@erlancarreira/evolution-chat 0.1.1 → 0.1.3

package/next/index.d.ts

@@ -46,6 +46,8 @@ interface ChatConfig {
     /** URL pública da imagem de capa do grupo (opcional; ignora se vazia). */
     groupImage?: string;
 }
+/** Estado de presença (digitação) normalizado da Evolution. */
+type PresenceState = "composing" | "paused" | "recording";
 /** Evento de tempo real publicado no canal broadcast `chat:<realtimeToken>`. */
 type ChatEvent = {
     type: "message";
@@ -53,6 +55,14 @@ type ChatEvent = {
 } | {
     type: "session";
     status: ChatSessionStatus;
+}
+/** Indicador de digitação: `from` diz quem está digitando (dona da plataforma
+ *  ou visitante) para o widget exibir os "3 pontinhos" apenas quando a OUTRA
+ *  ponta digita. */
+ | {
+    type: "typing";
+    isTyping: boolean;
+    from: "owner" | "visitor";
 };
 
 /** Persistência de sessões/mensagens vista pela bridge. */
@@ -120,6 +130,10 @@ interface CreateGroupResult {
 }
 interface EvolutionClient {
     sendText(instance: string, number: string, text: string): Promise<SendTextResult>;
+    /** Envia presença de digitação ("digitando…") para o número/grupo. `presence` =
+     *  "composing" | "recording" (digitando) ou "paused" (parou). Best-effort: a
+     *  presença é anunciada pela CONTA CONECTADA à instância, não por terceiros. */
+    sendPresence(instance: string, number: string, presence: PresenceState): Promise<void>;
     createGroup(instance: string, subject: string, participants: string[], description?: string): Promise<CreateGroupResult>;
     setGroupPicture(instance: string, groupJid: string, image: string): Promise<void>;
     leaveGroup(instance: string, groupJid: string): Promise<void>;
@@ -193,6 +207,29 @@ declare class ChatBridge {
      * não reenviar.
      */
     private handleGroupParticipants;
+    /**
+     * Trata `PRESENCE_UPDATE` (Evolution): quando a OUTRA ponta está digitando, publica
+     * um evento de tempo real para o widget exibir os "3 pontinhos". O `from` distingue
+     * quem digita (dona da plataforma vs. visitante) para o widget mostrar só quando a
+     * ponta OPOSTA digita.
+     * NUNCA lança: erros são logados e devolvidos como tratado (200) para a Evolution não
+     * reenviar.
+     */
+    private handlePresence;
+    /**
+     * Sinaliza que o visitante está (ou parou de) digitar no widget. Publica um evento
+     * `typing` no canal em tempo real da sessão para que uma eventual INTERFACE DE
+     * ATENDENTE exiba o indicador.
+     *
+     * NOTA sobre WhatsApp: a Evolution só permite anunciar a presença da CONTA CONECTADA
+     * à instância. Como o atendente desta plataforma OPERA a própria instância, enviar
+     * `sendPresence` faria o widget exibir um "digitando" FALSO do atendente (eco do
+     * próprio evento de volta pelo webhook). Por isso, aqui, apenas publicamos no canal
+     * em tempo real — a presença WhatsApp do visitante não é representável por terceiros.
+     */
+    setVisitorTyping(token: string, isTyping: boolean): Promise<void>;
+    /** Verdadeiro se `jid` é a conta da plataforma (dona da instância). */
+    private isPlatformParticipant;
     /**
      * Encerra a sessão (status closed + evento realtime) e — só quando o grupo morreu do
      * lado do visitante (ele saiu ou o destino sumiu) — faz a EMPRESA SAIR do grupo na

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@erlancarreira/evolution-chat",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Chat widget + Evolution API bridge (WhatsApp) — reutilizável, hexagonal, SOLID",
   "license": "MIT",
   "type": "module",

package/transports/supabase/index.d.cts

@@ -20,6 +20,14 @@ type ChatEvent = {
 } | {
     type: "session";
     status: ChatSessionStatus;
+}
+/** Indicador de digitação: `from` diz quem está digitando (dona da plataforma
+ *  ou visitante) para o widget exibir os "3 pontinhos" apenas quando a OUTRA
+ *  ponta digita. */
+ | {
+    type: "typing";
+    isTyping: boolean;
+    from: "owner" | "visitor";
 };
 
 /** Publicação server-side de eventos para o canal de uma sessão (fire-and-forget). */

package/transports/supabase/index.d.ts

@@ -20,6 +20,14 @@ type ChatEvent = {
 } | {
     type: "session";
     status: ChatSessionStatus;
+}
+/** Indicador de digitação: `from` diz quem está digitando (dona da plataforma
+ *  ou visitante) para o widget exibir os "3 pontinhos" apenas quando a OUTRA
+ *  ponta digita. */
+ | {
+    type: "typing";
+    isTyping: boolean;
+    from: "owner" | "visitor";
 };
 
 /** Publicação server-side de eventos para o canal de uma sessão (fire-and-forget). */

package/widget/index.cjs

@@ -58,7 +58,8 @@ var WIDGET_KEYS = [
   "retry",
   "sessionClosed",
   "newConversation",
-  "poweredBy"
+  "poweredBy",
+  "typing"
 ];
 var pt = {
   openChat: "Abrir chat",
@@ -75,7 +76,8 @@ var pt = {
   retry: "Tentar novamente",
   sessionClosed: "Esta conversa foi encerrada. Abra uma nova para continuar.",
   newConversation: "Iniciar nova conversa",
-  poweredBy: "Powered by"
+  poweredBy: "Powered by",
+  typing: "digitando\u2026"
 };
 var en = {
   openChat: "Open chat",
@@ -92,7 +94,8 @@ var en = {
   retry: "Try again",
   sessionClosed: "This conversation was closed. Start a new one to continue.",
   newConversation: "Start a new conversation",
-  poweredBy: "Powered by"
+  poweredBy: "Powered by",
+  typing: "typing\u2026"
 };
 var es = {
   openChat: "Abrir chat",
@@ -109,7 +112,8 @@ var es = {
   retry: "Reintentar",
   sessionClosed: "Esta conversaci\xF3n fue cerrada. Abre una nueva para continuar.",
   newConversation: "Iniciar nueva conversaci\xF3n",
-  poweredBy: "Powered by"
+  poweredBy: "Powered by",
+  typing: "escribiendo\u2026"
 };
 var dictionaries = { pt, en, es };
 function t(locale, key, overrides) {
@@ -358,6 +362,31 @@ var WIDGET_CSS = `/*
 .ecw-send:disabled { opacity: 0.55; cursor: not-allowed; }
 .ecw-send svg { width: 18px; height: 18px; }
 
+/* \u2500\u2500 indicador "digitando\u2026" (3 pontinhos) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.ecw-typing {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 10px 14px;
+  border-radius: 12px;
+  border-bottom-left-radius: 4px;
+  background: var(--ecw-surface);
+  border: 1px solid var(--ecw-border);
+}
+.ecw-typing-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--ecw-muted);
+  animation: ecw-typing-bounce 1.2s infinite ease-in-out;
+}
+.ecw-typing-dot:nth-child(2) { animation-delay: 0.18s; }
+.ecw-typing-dot:nth-child(3) { animation-delay: 0.36s; }
+@keyframes ecw-typing-bounce {
+  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
+  30% { transform: translateY(-4px); opacity: 1; }
+}
+
 /* \u2500\u2500 sess\xE3o encerrada / falha \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 .ecw-closed { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--ecw-border); background: var(--ecw-surface); }
 
@@ -422,17 +451,23 @@ var initialState = {
   messages: [],
   unread: 0,
   sending: false,
-  error: null
+  error: null,
+  ownerTyping: false,
+  visitorTyping: false
 };
 function withMessage(state, message) {
   const index = state.messages.findIndex((m) => m.id === message.id);
+  let messages;
   if (index >= 0) {
-    const messages = [...state.messages];
+    messages = [...state.messages];
     messages[index] = message;
-    return { ...state, messages };
+  } else {
+    messages = [...state.messages, message];
   }
   const bump = state.open || message.direction !== "owner" ? 0 : 1;
-  return { ...state, messages: [...state.messages, message], unread: state.unread + bump };
+  const next = { ...state, messages, unread: state.unread + bump };
+  if (message.direction === "owner") next.ownerTyping = false;
+  return next;
 }
 function chatReducer(state, action) {
   switch (action.type) {
@@ -496,6 +531,8 @@ function chatReducer(state, action) {
       return { ...state, sending: action.value };
     case "error":
       return { ...state, error: action.value };
+    case "typing":
+      return action.from === "owner" ? state.ownerTyping === action.isTyping ? state : { ...state, ownerTyping: action.isTyping } : state.visitorTyping === action.isTyping ? state : { ...state, visitorTyping: action.isTyping };
   }
 }
 function normalizePhone(value) {
@@ -566,8 +603,9 @@ function tmpMessage(body) {
     createdAt: (/* @__PURE__ */ new Date()).toISOString()
   };
 }
-function useChat({ endpoint, realtime }) {
+function useChat({ endpoint, realtime, typingEndpoint }) {
   const [state, dispatch] = (0, import_react.useReducer)(chatReducer, initialState);
+  const typingUrl = typingEndpoint ?? `${endpoint.replace(/\/+$/, "")}/typing`;
   const stateRef = (0, import_react.useRef)(state);
   (0, import_react.useEffect)(() => {
     stateRef.current = state;
@@ -622,6 +660,8 @@ function useChat({ endpoint, realtime }) {
       dispatch({ type: "append", message: e.message });
     } else if (e.type === "session" && e.status !== void 0) {
       dispatch({ type: "session-status", status: e.status });
+    } else if (e.type === "typing" && e.from !== void 0) {
+      dispatch({ type: "typing", from: e.from, isTyping: e.isTyping });
     }
   }, []);
   (0, import_react.useEffect)(() => {
@@ -728,6 +768,21 @@ function useChat({ endpoint, realtime }) {
     clearStoredSession();
     dispatch({ type: "reset-form" });
   }, []);
+  const notifyTyping = (0, import_react.useCallback)(
+    async (isTyping) => {
+      const token = stateRef.current.token;
+      if (token === null) return;
+      try {
+        await fetch(typingUrl, {
+          method: "POST",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify({ token, isTyping })
+        });
+      } catch {
+      }
+    },
+    [typingUrl]
+  );
   const submitForm = (0, import_react.useCallback)(
     async ({ name, phone, message, honeypot }) => {
       if (honeypot.trim() !== "") return;
@@ -775,7 +830,7 @@ function useChat({ endpoint, realtime }) {
     },
     [endpoint]
   );
-  return { state, openPanel, closePanel, togglePanel, submitForm, sendMessage, retryMessage, startNewConversation };
+  return { state, openPanel, closePanel, togglePanel, submitForm, sendMessage, retryMessage, startNewConversation, notifyTyping };
 }
 
 // src/widget/chat-widget.tsx
@@ -799,6 +854,14 @@ function StatusMark({ status }) {
   const glyph = status === "pending" ? "\u2713" : status === "sent" ? "\u2713\u2713" : "\u26A0";
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: status === "failed" ? "ecw-status ecw-status--failed" : "ecw-status", "aria-hidden": "true", children: glyph });
 }
+function TypingIndicator({ label }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { className: "ecw-item ecw-item--owner", "aria-live": "polite", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ecw-typing", role: "status", "aria-label": label, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ecw-typing-dot" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ecw-typing-dot" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ecw-typing-dot" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ecw-sr-only", children: label })
+  ] }) });
+}
 function PreChatForm({ welcome, tr, error, sending, firstFieldRef, onSubmit }) {
   const uid = (0, import_react2.useId)();
   const [name, setName] = (0, import_react2.useState)("");
@@ -898,29 +961,53 @@ function PreChatForm({ welcome, tr, error, sending, firstFieldRef, onSubmit }) {
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "ecw-notice", children: tr("privacyNote") })
   ] });
 }
-function ChatPanel({ messages, canCompose, sending, locale, tr, listRef, firstFieldRef, onSend, onRetry, onNewConversation }) {
+function ChatPanel({ messages, canCompose, sending, locale, tr, listRef, firstFieldRef, ownerTyping, onTyping, onSend, onRetry, onNewConversation }) {
   const uid = (0, import_react2.useId)();
   const [draft, setDraft] = (0, import_react2.useState)("");
+  const typingTimer = (0, import_react2.useRef)(null);
+  (0, import_react2.useEffect)(() => {
+    return () => {
+      if (typingTimer.current !== null) clearTimeout(typingTimer.current);
+    };
+  }, []);
+  const handleDraftChange = (e) => {
+    setDraft(e.target.value);
+    if (!canCompose) return;
+    void onTyping(true);
+    if (typingTimer.current !== null) clearTimeout(typingTimer.current);
+    typingTimer.current = setTimeout(() => {
+      void onTyping(false);
+      typingTimer.current = null;
+    }, 2500);
+  };
   const submit = (e) => {
     e.preventDefault();
     const text = draft.trim();
     if (text === "" || !canCompose) return;
+    if (typingTimer.current !== null) {
+      clearTimeout(typingTimer.current);
+      typingTimer.current = null;
+    }
+    void onTyping(false);
     setDraft("");
     void onSend(text);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { ref: listRef, className: "ecw-list", children: messages.map(
-      (m) => m.direction === "system" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { className: "ecw-item ecw-item--system", role: "status", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ecw-system", children: m.body }) }, m.id) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { className: `ecw-item ecw-item--${m.direction}`, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `ecw-bubble ecw-bubble--${m.direction}`, children: m.body }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ecw-meta", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("time", { dateTime: m.createdAt, children: formatTime(m.createdAt, locale) }),
-          m.direction === "visitor" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StatusMark, { status: m.status }),
-          m.status === "failed" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", className: "ecw-retry", onClick: () => {
-            void onRetry(m.id);
-          }, children: tr("retry") })
-        ] })
-      ] }, m.id)
-    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("ul", { ref: listRef, className: "ecw-list", children: [
+      messages.map(
+        (m) => m.direction === "system" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { className: "ecw-item ecw-item--system", role: "status", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ecw-system", children: m.body }) }, m.id) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { className: `ecw-item ecw-item--${m.direction}`, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `ecw-bubble ecw-bubble--${m.direction}`, children: m.body }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ecw-meta", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("time", { dateTime: m.createdAt, children: formatTime(m.createdAt, locale) }),
+            m.direction === "visitor" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StatusMark, { status: m.status }),
+            m.status === "failed" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", className: "ecw-retry", onClick: () => {
+              void onRetry(m.id);
+            }, children: tr("retry") })
+          ] })
+        ] }, m.id)
+      ),
+      ownerTyping && canCompose && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TypingIndicator, { label: tr("typing") })
+    ] }),
     !canCompose && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ecw-closed", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "ecw-notice", role: "status", children: tr("sessionClosed") }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", className: "ecw-submit", onClick: onNewConversation, children: tr("newConversation") })
@@ -937,9 +1024,7 @@ function ChatPanel({ messages, canCompose, sending, locale, tr, listRef, firstFi
           autoComplete: "off",
           placeholder: tr("message"),
           value: draft,
-          onChange: (e) => {
-            setDraft(e.target.value);
-          },
+          onChange: handleDraftChange,
           disabled: !canCompose
         }
       ),
@@ -951,7 +1036,7 @@ function ChatWidget(props) {
   const { endpoint, locale, welcome, projectName, realtime, labels } = props;
   const accentColor = props.accentColor ?? DEFAULT_ACCENT;
   const tr = (0, import_react2.useCallback)((key) => t(locale, key, labels), [locale, labels]);
-  const { state, closePanel, togglePanel, submitForm, sendMessage, retryMessage, startNewConversation } = useChat({ endpoint, realtime });
+  const { state, closePanel, togglePanel, submitForm, sendMessage, retryMessage, startNewConversation, notifyTyping } = useChat({ endpoint, realtime });
   const bubbleRef = (0, import_react2.useRef)(null);
   const listRef = (0, import_react2.useRef)(null);
   const firstFieldRef = (0, import_react2.useRef)(null);
@@ -976,7 +1061,7 @@ function ChatWidget(props) {
   (0, import_react2.useEffect)(() => {
     const list = listRef.current;
     if (list !== null) list.scrollTop = list.scrollHeight;
-  }, [state.messages, state.open]);
+  }, [state.messages, state.ownerTyping, state.open]);
   const handleClose = (0, import_react2.useCallback)(() => {
     closePanel();
     bubbleRef.current?.focus();
@@ -1019,6 +1104,8 @@ function ChatWidget(props) {
           tr,
           listRef,
           firstFieldRef,
+          ownerTyping: state.ownerTyping,
+          onTyping: notifyTyping,
           onSend: sendMessage,
           onRetry: retryMessage,
           onNewConversation: startNewConversation