@erlancarreira/evolution-chat 0.1.2 → 0.1.4

package/widget-embed/evolution-chat.iife.js

@@ -7307,7 +7307,8 @@ var EvolutionChatEmbed = (() => {
     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",
@@ -7324,7 +7325,8 @@ var EvolutionChatEmbed = (() => {
     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",
@@ -7341,7 +7343,8 @@ var EvolutionChatEmbed = (() => {
     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) {
@@ -7590,6 +7593,31 @@ var EvolutionChatEmbed = (() => {
 .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); }
 
@@ -7654,17 +7682,23 @@ var EvolutionChatEmbed = (() => {
     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) {
@@ -7728,6 +7762,8 @@ var EvolutionChatEmbed = (() => {
         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) {
@@ -7798,8 +7834,9 @@ var EvolutionChatEmbed = (() => {
       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;
@@ -7854,6 +7891,8 @@ var EvolutionChatEmbed = (() => {
         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)(() => {
@@ -7960,6 +7999,21 @@ var EvolutionChatEmbed = (() => {
       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;
@@ -8007,7 +8061,7 @@ var EvolutionChatEmbed = (() => {
       },
       [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
@@ -8031,6 +8085,14 @@ var EvolutionChatEmbed = (() => {
     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)("");
@@ -8130,29 +8192,53 @@ var EvolutionChatEmbed = (() => {
       /* @__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") })
@@ -8169,9 +8255,7 @@ var EvolutionChatEmbed = (() => {
             autoComplete: "off",
             placeholder: tr("message"),
             value: draft,
-            onChange: (e) => {
-              setDraft(e.target.value);
-            },
+            onChange: handleDraftChange,
             disabled: !canCompose
           }
         ),
@@ -8183,7 +8267,7 @@ var EvolutionChatEmbed = (() => {
     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);
@@ -8208,7 +8292,7 @@ var EvolutionChatEmbed = (() => {
     (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();
@@ -8251,6 +8335,8 @@ var EvolutionChatEmbed = (() => {
             tr,
             listRef,
             firstFieldRef,
+            ownerTyping: state.ownerTyping,
+            onTyping: notifyTyping,
             onSend: sendMessage,
             onRetry: retryMessage,
             onNewConversation: startNewConversation