@adatechnology/conversations-ui 0.1.0-rc.4 → 0.1.0-rc.41

package/dist/chunk-DKPXKQGC.js

@@ -0,0 +1,110 @@
+// src/Tooltip.tsx
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { jsx } from "react/jsx-runtime";
+var TOOLTIP_ATTRIBUTE = "data-cv-tooltip";
+var TOOLTIP_DELAY_MS = 120;
+var TOOLTIP_GAP_PX = 8;
+var TOOLTIP_EDGE_PX = 72;
+function tooltipPositionOf({ targetRect, viewportWidth }) {
+  const placement = targetRect.top < TOOLTIP_EDGE_PX ? "bottom" : "top";
+  const centerX = targetRect.left + targetRect.width / 2;
+  return {
+    left: Math.min(Math.max(centerX, TOOLTIP_EDGE_PX), viewportWidth - TOOLTIP_EDGE_PX),
+    top: placement === "top" ? targetRect.top - TOOLTIP_GAP_PX : targetRect.bottom + TOOLTIP_GAP_PX,
+    placement
+  };
+}
+function tooltipStateFor(target, text) {
+  const position = tooltipPositionOf({
+    targetRect: target.getBoundingClientRect(),
+    viewportWidth: window.innerWidth
+  });
+  return { text, ...position };
+}
+var layerOwner;
+function TooltipLayer() {
+  const identity = useRef({});
+  const [isOwner, setIsOwner] = useState(false);
+  const [tooltip, setTooltip] = useState(void 0);
+  useEffect(() => {
+    const owned = identity.current;
+    if (layerOwner && layerOwner !== owned) return void 0;
+    layerOwner = owned;
+    setIsOwner(true);
+    return () => {
+      if (layerOwner === owned) layerOwner = void 0;
+    };
+  }, []);
+  useEffect(() => {
+    if (!isOwner) return void 0;
+    let timer;
+    function cancelPending() {
+      if (timer) clearTimeout(timer);
+      timer = void 0;
+    }
+    function hide() {
+      cancelPending();
+      setTooltip(void 0);
+    }
+    function handleEnter(event) {
+      const origin = event.target;
+      if (!(origin instanceof Element)) return;
+      const target = origin.closest(`[${TOOLTIP_ATTRIBUTE}]`);
+      if (!target) {
+        hide();
+        return;
+      }
+      const text = target.getAttribute(TOOLTIP_ATTRIBUTE);
+      if (!text) {
+        hide();
+        return;
+      }
+      cancelPending();
+      timer = setTimeout(() => setTooltip(tooltipStateFor(target, text)), TOOLTIP_DELAY_MS);
+    }
+    function handleLeaveWindow(event) {
+      if (!event.relatedTarget) hide();
+    }
+    function handleKeyDown(event) {
+      if (event.key === "Escape") hide();
+    }
+    document.addEventListener("pointerover", handleEnter);
+    document.addEventListener("pointerout", handleLeaveWindow);
+    document.addEventListener("focusin", handleEnter);
+    document.addEventListener("pointerdown", hide);
+    document.addEventListener("focusout", hide);
+    document.addEventListener("keydown", handleKeyDown);
+    window.addEventListener("scroll", hide, true);
+    window.addEventListener("resize", hide);
+    return () => {
+      cancelPending();
+      document.removeEventListener("pointerover", handleEnter);
+      document.removeEventListener("pointerout", handleLeaveWindow);
+      document.removeEventListener("focusin", handleEnter);
+      document.removeEventListener("pointerdown", hide);
+      document.removeEventListener("focusout", hide);
+      document.removeEventListener("keydown", handleKeyDown);
+      window.removeEventListener("scroll", hide, true);
+      window.removeEventListener("resize", hide);
+    };
+  }, [isOwner]);
+  if (!tooltip) return null;
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "tooltip",
+        className: `cv-tooltip cv-tooltip--${tooltip.placement}`,
+        style: { left: tooltip.left, top: tooltip.top },
+        children: tooltip.text
+      }
+    ),
+    document.body
+  );
+}
+
+export {
+  TOOLTIP_ATTRIBUTE,
+  TooltipLayer
+};

package/dist/{chunk-OGRRHQQW.js → chunk-WCBDXZ3X.js}

@@ -69,9 +69,12 @@ function parseInlineTokens(text) {
       if (remaining) result.push({ type: "text", content: remaining });
       break;
     }
-    if (nextSpecial > 0) {
-      result.push({ type: "text", content: remaining.slice(0, nextSpecial) });
+    if (nextSpecial === 0) {
+      result.push({ type: "text", content: remaining.slice(0, 1) });
+      remaining = remaining.slice(1);
+      continue;
     }
+    result.push({ type: "text", content: remaining.slice(0, nextSpecial) });
     remaining = remaining.slice(nextSpecial);
   }
   return result;
@@ -103,6 +106,9 @@ function unescapeHtml(text) {
 }
 var CODE_TOKEN_MARK = String.fromCharCode(57344);
 var CODE_TOKEN_REGEX = new RegExp(`${CODE_TOKEN_MARK}(\\d+)${CODE_TOKEN_MARK}`, "g");
+var ZERO_WIDTH_SPACE = String.fromCharCode(8203);
+var EMPTY_CODE_REGEX = new RegExp(`<code[^>]*>[${ZERO_WIDTH_SPACE}\\s]*</code>`, "gi");
+var ZERO_WIDTH_SPACE_REGEX = new RegExp(ZERO_WIDTH_SPACE, "g");
 function waToHTML(text) {
   if (!text) return "";
   const codeTokens = [];
@@ -117,7 +123,7 @@ function waToHTML(text) {
   let html = escapeHtml(working);
   html = html.replace(/\*([^*\n]+)\*/g, "<strong>$1</strong>");
   html = html.replace(/_([^_\n]+)_/g, "<em>$1</em>");
-  html = html.replace(/~([^~\n]+)~/g, "<del>$1</del>");
+  html = html.replace(/~([^~\n]+)~/g, "<s>$1</s>");
   html = html.replace(/\n/g, "<br>");
   html = html.replace(CODE_TOKEN_REGEX, (_match, indexStr) => {
     const token = codeTokens[Number(indexStr)];
@@ -132,6 +138,7 @@ function waToHTML(text) {
 function htmlToWA(html) {
   if (!html) return "";
   let text = html;
+  text = text.replace(EMPTY_CODE_REGEX, "");
   text = text.replace(/<code data-wa="block"[^>]*>([\s\S]*?)<\/code>/gi, (_match, inner) => `\`\`\`${unescapeHtml(inner.replace(/<br\s*\/?>/gi, "\n"))}\`\`\``);
   text = text.replace(/<code data-wa="inline"[^>]*>([\s\S]*?)<\/code>/gi, (_match, inner) => `\`${unescapeHtml(inner)}\``);
   text = text.replace(/<br\s*\/?>/gi, "\n").replace(/<div>/gi, "\n").replace(/<\/div>/gi, "").replace(/<\/p>/gi, "\n").replace(/<p[^>]*>/gi, "");
@@ -141,9 +148,11 @@ function htmlToWA(html) {
   text = text.replace(/<i>(.*?)<\/i>/gi, "_$1_");
   text = text.replace(/<del>(.*?)<\/del>/gi, "~$1~");
   text = text.replace(/<s>(.*?)<\/s>/gi, "~$1~");
+  text = text.replace(/<strike>(.*?)<\/strike>/gi, "~$1~");
   text = text.replace(/<code[^>]*>(.*?)<\/code>/gi, "`$1`");
   text = text.replace(/<[^>]+>/g, "");
   text = unescapeHtml(text);
+  text = text.replace(ZERO_WIDTH_SPACE_REGEX, "");
   return text.trim();
 }
 function waToHTMLInline(text) {
@@ -151,9 +160,64 @@ function waToHTMLInline(text) {
   return escapeHtml(text).replace(/\*([^*\n]+)\*/g, "<strong>$1</strong>").replace(/_([^_\n]+)_/g, "<em>$1</em>").replace(/~([^~\n]+)~/g, "<del>$1</del>").replace(/`([^`\n]+)`/g, "<code>$1</code>");
 }
 
+// src/useDarkMode.ts
+import { useState, useEffect, useCallback } from "react";
+var STORAGE_KEY = "conversations-ui-dark-mode";
+function getInitialDark() {
+  if (typeof window === "undefined") return false;
+  const stored = localStorage.getItem(STORAGE_KEY);
+  if (stored !== null) {
+    return stored === "true";
+  }
+  return window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+function useIsDarkTheme() {
+  const [isDark, setIsDark] = useState(
+    () => typeof document !== "undefined" && document.documentElement.classList.contains("dark")
+  );
+  useEffect(() => {
+    const root = document.documentElement;
+    const observer = new MutationObserver(() => setIsDark(root.classList.contains("dark")));
+    observer.observe(root, { attributes: true, attributeFilter: ["class"] });
+    setIsDark(root.classList.contains("dark"));
+    return () => observer.disconnect();
+  }, []);
+  return isDark;
+}
+function useDarkMode() {
+  const [isDark, setIsDark] = useState(getInitialDark);
+  useEffect(() => {
+    const root = document.documentElement;
+    if (isDark) {
+      root.classList.add("dark");
+    } else {
+      root.classList.remove("dark");
+    }
+    localStorage.setItem(STORAGE_KEY, String(isDark));
+  }, [isDark]);
+  useEffect(() => {
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = (event) => {
+      const stored = localStorage.getItem(STORAGE_KEY);
+      if (stored === null) {
+        setIsDark(event.matches);
+      }
+    };
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, []);
+  const toggle = useCallback(() => {
+    setIsDark((prev) => !prev);
+  }, []);
+  return { isDark, toggle };
+}
+
 export {
   parseWhatsAppFormatting,
+  ZERO_WIDTH_SPACE,
   waToHTML,
   htmlToWA,
-  waToHTMLInline
+  waToHTMLInline,
+  useIsDarkTheme,
+  useDarkMode
 };