@erlancarreira/evolution-chat 0.1.2 → 0.1.3

package/widget/index.js

@@ -23,7 +23,8 @@ var WIDGET_KEYS = [
   "retry",
   "sessionClosed",
   "newConversation",
-  "poweredBy"
+  "poweredBy",
+  "typing"
 ];
 var pt = {
   openChat: "Abrir chat",
@@ -40,7 +41,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",
@@ -57,7 +59,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",
@@ -74,7 +77,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) {
@@ -323,6 +327,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); }
 
@@ -387,17 +416,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) {
@@ -461,6 +496,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) {
@@ -531,8 +568,9 @@ function tmpMessage(body) {
     createdAt: (/* @__PURE__ */ new Date()).toISOString()
   };
 }
-function useChat({ endpoint, realtime }) {
+function useChat({ endpoint, realtime, typingEndpoint }) {
   const [state, dispatch] = useReducer(chatReducer, initialState);
+  const typingUrl = typingEndpoint ?? `${endpoint.replace(/\/+$/, "")}/typing`;
   const stateRef = useRef(state);
   useEffect(() => {
     stateRef.current = state;
@@ -587,6 +625,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 });
     }
   }, []);
   useEffect(() => {
@@ -693,6 +733,21 @@ function useChat({ endpoint, realtime }) {
     clearStoredSession();
     dispatch({ type: "reset-form" });
   }, []);
+  const notifyTyping = 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 = useCallback(
     async ({ name, phone, message, honeypot }) => {
       if (honeypot.trim() !== "") return;
@@ -740,7 +795,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
@@ -764,6 +819,14 @@ function StatusMark({ status }) {
   const glyph = status === "pending" ? "\u2713" : status === "sent" ? "\u2713\u2713" : "\u26A0";
   return /* @__PURE__ */ jsx("span", { className: status === "failed" ? "ecw-status ecw-status--failed" : "ecw-status", "aria-hidden": "true", children: glyph });
 }
+function TypingIndicator({ label }) {
+  return /* @__PURE__ */ jsx("li", { className: "ecw-item ecw-item--owner", "aria-live": "polite", children: /* @__PURE__ */ jsxs("div", { className: "ecw-typing", role: "status", "aria-label": label, children: [
+    /* @__PURE__ */ jsx("span", { className: "ecw-typing-dot" }),
+    /* @__PURE__ */ jsx("span", { className: "ecw-typing-dot" }),
+    /* @__PURE__ */ jsx("span", { className: "ecw-typing-dot" }),
+    /* @__PURE__ */ jsx("span", { className: "ecw-sr-only", children: label })
+  ] }) });
+}
 function PreChatForm({ welcome, tr, error, sending, firstFieldRef, onSubmit }) {
   const uid = useId();
   const [name, setName] = useState("");
@@ -863,29 +926,53 @@ function PreChatForm({ welcome, tr, error, sending, firstFieldRef, onSubmit }) {
     /* @__PURE__ */ 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 = useId();
   const [draft, setDraft] = useState("");
+  const typingTimer = useRef2(null);
+  useEffect2(() => {
+    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__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("ul", { ref: listRef, className: "ecw-list", children: messages.map(
-      (m) => m.direction === "system" ? /* @__PURE__ */ jsx("li", { className: "ecw-item ecw-item--system", role: "status", children: /* @__PURE__ */ jsx("div", { className: "ecw-system", children: m.body }) }, m.id) : /* @__PURE__ */ jsxs("li", { className: `ecw-item ecw-item--${m.direction}`, children: [
-        /* @__PURE__ */ jsx("div", { className: `ecw-bubble ecw-bubble--${m.direction}`, children: m.body }),
-        /* @__PURE__ */ jsxs("div", { className: "ecw-meta", children: [
-          /* @__PURE__ */ jsx("time", { dateTime: m.createdAt, children: formatTime(m.createdAt, locale) }),
-          m.direction === "visitor" && /* @__PURE__ */ jsx(StatusMark, { status: m.status }),
-          m.status === "failed" && /* @__PURE__ */ jsx("button", { type: "button", className: "ecw-retry", onClick: () => {
-            void onRetry(m.id);
-          }, children: tr("retry") })
-        ] })
-      ] }, m.id)
-    ) }),
+    /* @__PURE__ */ jsxs("ul", { ref: listRef, className: "ecw-list", children: [
+      messages.map(
+        (m) => m.direction === "system" ? /* @__PURE__ */ jsx("li", { className: "ecw-item ecw-item--system", role: "status", children: /* @__PURE__ */ jsx("div", { className: "ecw-system", children: m.body }) }, m.id) : /* @__PURE__ */ jsxs("li", { className: `ecw-item ecw-item--${m.direction}`, children: [
+          /* @__PURE__ */ jsx("div", { className: `ecw-bubble ecw-bubble--${m.direction}`, children: m.body }),
+          /* @__PURE__ */ jsxs("div", { className: "ecw-meta", children: [
+            /* @__PURE__ */ jsx("time", { dateTime: m.createdAt, children: formatTime(m.createdAt, locale) }),
+            m.direction === "visitor" && /* @__PURE__ */ jsx(StatusMark, { status: m.status }),
+            m.status === "failed" && /* @__PURE__ */ jsx("button", { type: "button", className: "ecw-retry", onClick: () => {
+              void onRetry(m.id);
+            }, children: tr("retry") })
+          ] })
+        ] }, m.id)
+      ),
+      ownerTyping && canCompose && /* @__PURE__ */ jsx(TypingIndicator, { label: tr("typing") })
+    ] }),
     !canCompose && /* @__PURE__ */ jsxs("div", { className: "ecw-closed", children: [
       /* @__PURE__ */ jsx("p", { className: "ecw-notice", role: "status", children: tr("sessionClosed") }),
       /* @__PURE__ */ jsx("button", { type: "button", className: "ecw-submit", onClick: onNewConversation, children: tr("newConversation") })
@@ -902,9 +989,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
         }
       ),
@@ -916,7 +1001,7 @@ function ChatWidget(props) {
   const { endpoint, locale, welcome, projectName, realtime, labels } = props;
   const accentColor = props.accentColor ?? DEFAULT_ACCENT;
   const tr = useCallback2((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 = useRef2(null);
   const listRef = useRef2(null);
   const firstFieldRef = useRef2(null);
@@ -941,7 +1026,7 @@ function ChatWidget(props) {
   useEffect2(() => {
     const list = listRef.current;
     if (list !== null) list.scrollTop = list.scrollHeight;
-  }, [state.messages, state.open]);
+  }, [state.messages, state.ownerTyping, state.open]);
   const handleClose = useCallback2(() => {
     closePanel();
     bubbleRef.current?.focus();
@@ -984,6 +1069,8 @@ function ChatWidget(props) {
           tr,
           listRef,
           firstFieldRef,
+          ownerTyping: state.ownerTyping,
+          onTyping: notifyTyping,
           onSend: sendMessage,
           onRetry: retryMessage,
           onNewConversation: startNewConversation