whatsapp-ui-react 0.0.3 → 0.0.5

package/dist/index.cjs

@@ -3360,7 +3360,7 @@ function StatusIcon({ status, className }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     StatusDoubleCheckIcon,
     {
-      className: cn("size-4", status === "read" && "text-wa-read", className)
+      className: cn("size-4", status === "read" && "text-wa-teal", className)
     }
   );
 }
@@ -3396,8 +3396,8 @@ function Message({
     "div",
     {
       className: cn(
-        "relative w-fit rounded-wa-bubble px-3 py-1.5 shadow-md",
-        isOut ? "bg-wa-bubble-out text-wa-text-primary" : "bg-wa-bubble-in text-wa-text-primary",
+        "relative w-fit rounded-[0.525rem] px-3 py-1.5 shadow-md",
+        isOut ? "bg-wa-bubble-out text-wa-text" : "bg-wa-bubble-in text-wa-text",
         top && isOut && "rounded-tr-none",
         top && !isOut && "rounded-tl-none"
       ),
@@ -3652,9 +3652,9 @@ function Audio({ src, duration, fileName }) {
     if (progress > 0) setHasPlayed(true);
   }, [progress]);
   const displayDuration = totalDuration > 0 ? fmtTime(remaining) : duration ?? "0:00";
-  const trackColor = isOut ? "bg-wa-waveform-out" : "bg-wa-waveform-in";
-  const trackColorFaint = isOut ? "bg-wa-waveform-out/40" : "bg-wa-waveform-in/40";
-  const dotColor = hasPlayed || isOut ? "bg-wa-waveform-out" : "bg-wa-waveform-in";
+  const trackColor = isOut ? "bg-wa-teal" : "bg-wa-text-secondary";
+  const trackColorFaint = isOut ? "bg-wa-teal/40" : "bg-wa-text-secondary/40";
+  const dotColor = hasPlayed || isOut ? "bg-wa-teal" : "bg-wa-text-secondary";
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx("audio", { ref: audioRef, src, preload: "metadata" }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-13.75 w-84 min-w-84 shrink-0 items-center", children: [
@@ -3741,9 +3741,12 @@ const CANVAS_HEIGHT = 30;
 const BAR_MAX_HEIGHT = 26;
 const BAR_WIDTH = 3;
 const SLOT_WIDTH = CANVAS_WIDTH / BAR_COUNT;
-function readCssVar(name) {
-  return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
-}
+const COLORS = {
+  waveformOut: "#53bdeb",
+  waveformIn: "#8696a0",
+  waveformOutFaint: "rgba(83, 189, 235, 0.4)",
+  waveformInFaint: "rgba(134, 150, 160, 0.4)"
+};
 function Waveform({ bars, progress, isOut, hasPlayed, seek }) {
   const canvasRef = React.useRef(null);
   React.useEffect(() => {
@@ -3752,8 +3755,8 @@ function Waveform({ bars, progress, isOut, hasPlayed, seek }) {
     const ctx = canvas.getContext("2d");
     if (!ctx) return;
     ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
-    const colorPlayed = isOut ? readCssVar("--color-wa-waveform-out") : readCssVar("--color-wa-waveform-in");
-    const colorUnplayed = isOut ? readCssVar("--color-wa-waveform-out-faint") : readCssVar("--color-wa-waveform-in-faint");
+    const colorPlayed = isOut ? COLORS.waveformOut : COLORS.waveformIn;
+    const colorUnplayed = isOut ? COLORS.waveformOutFaint : COLORS.waveformInFaint;
     bars.forEach((amplitude, i) => {
       const level = Math.max(1, amplitude);
       const barHeight = Math.round(level / 10 * BAR_MAX_HEIGHT);
@@ -3781,7 +3784,7 @@ function Waveform({ bars, progress, isOut, hasPlayed, seek }) {
         "aria-hidden": "true",
         className: cn(
           "pointer-events-none absolute top-1/2 size-3 -translate-x-1/2 -translate-y-1/2 rounded-full",
-          hasPlayed || isOut ? "bg-wa-waveform-out" : "bg-wa-waveform-in"
+          hasPlayed || isOut ? "bg-wa-teal" : "bg-wa-text-secondary"
         ),
         style: { left: `${progress * 100}%` }
       }
@@ -3899,7 +3902,7 @@ function Gif({ className }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-[336px]", className) });
 }
 function Image({ src, alt = "", className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-[336px]", className), children: /* @__PURE__ */ jsxRuntime.jsx("img", { src, alt, className: "w-full rounded-wa-bubble object-cover" }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-[336px]", className), children: /* @__PURE__ */ jsxRuntime.jsx("img", { src, alt, className: "w-full rounded-[0.525rem] object-cover" }) });
 }
 let _counter = 0;
 function uid() {
@@ -3929,13 +3932,13 @@ function ChatHeader({ className, name, avatarUrl, subtitle }) {
     "div",
     {
       className: cn(
-        "flex items-center gap-3 bg-wa-header px-4 py-3 shadow-[0_1px_4px_rgba(0,0,0,0.15)]",
+        "flex items-center gap-3 bg-wa-bg px-4 py-3 shadow-[0_1px_4px_rgba(0,0,0,0.15)]",
         className
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: avatarUrl ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: avatarUrl, alt: name, className: "size-10 rounded-full object-cover" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-10 items-center justify-center rounded-full bg-wa-avatar text-sm font-medium text-wa-text-primary", children: initials }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: avatarUrl ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: avatarUrl, alt: name, className: "size-10 rounded-full object-cover" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-10 items-center justify-center rounded-full bg-wa-avatar text-sm font-medium text-wa-text", children: initials }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-[15px] font-medium text-wa-text-primary", children: name }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-[15px] font-medium text-wa-text", children: name }),
           subtitle && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-xs text-wa-text-secondary", children: subtitle })
         ] })
       ]
@@ -3953,7 +3956,7 @@ function ActionButton({
       type: "button",
       onClick,
       "aria-label": label,
-      className: "inline-flex size-8 shrink-0 items-center justify-center rounded-full text-wa-icon transition-colors hover:text-wa-text-primary",
+      className: "inline-flex size-8 shrink-0 items-center justify-center rounded-full text-wa-icon transition-colors hover:text-wa-text",
       children
     }
   );
@@ -3989,7 +3992,7 @@ function InputfieldActions({
         type: "button",
         onClick: onMicClick,
         "aria-label": "Record voice message",
-        className: "group inline-flex size-8 shrink-0 items-center justify-center rounded-full text-wa-icon transition-colors hover:bg-wa-teal hover:text-black",
+        className: "group inline-flex size-8 shrink-0 items-center justify-center rounded-full text-wa-icon transition-colors hover:bg-wa-hover hover:text-black",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(MicOutlineIcon, { className: "size-5 group-hover:hidden" }),
           /* @__PURE__ */ jsxRuntime.jsx(MicFillIcon, { className: "hidden size-5 group-hover:block" })
@@ -4114,7 +4117,7 @@ function getDisplayDate(date) {
 }
 function DayDivider({ className, date }) {
   const displayDate = getDisplayDate(date.toISOString());
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex justify-center py-3", className), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-wa-divider bg-wa-divider px-3 py-1 text-[13px] font-medium text-wa-text-secondary shadow-sm", children: displayDate }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex justify-center py-3", className), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-[0.325rem] bg-wa-divider px-3 py-1 text-[13px] font-medium text-wa-text-secondary shadow-sm", children: displayDate }) });
 }
 function MessageList({ className, messages }) {
   const dayGroups = groupMessagesByDay(messages);
@@ -4157,15 +4160,22 @@ const Chat$1 = React.forwardRef(function Chat2({
   onEmojiClick,
   onAttachClick,
   onCameraClick,
-  onMicClick
+  onMicClick,
+  theme
 }, ref) {
   const [messages, setMessages] = React.useState(messageHistory ?? []);
   const scrollRef = React.useRef(null);
+  const contentRef = React.useRef(null);
   React.useEffect(() => {
-    if (scrollRef.current) {
-      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
-    }
-  }, [messages]);
+    const content = contentRef.current;
+    const scroll = scrollRef.current;
+    if (!content || !scroll) return;
+    const ro = new ResizeObserver(() => {
+      scroll.scrollTop = scroll.scrollHeight;
+    });
+    ro.observe(content);
+    return () => ro.disconnect();
+  }, []);
   function sendMessage(text) {
     const trimmed = text.trim();
     if (!trimmed) return;
@@ -4203,6 +4213,7 @@ const Chat$1 = React.forwardRef(function Chat2({
     {
       className: cn("flex h-full min-h-0 flex-col", isDefaultBg ? "bg-wa-bg" : "", className),
       style: isDefaultBg ? void 0 : bgStyle,
+      ...theme ? { "data-wa-theme": theme } : {},
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           ChatHeader,
@@ -4220,7 +4231,17 @@ const Chat$1 = React.forwardRef(function Chat2({
               style: { backgroundImage: `url(${backgroundUrl})` }
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { ref: scrollRef, className: "scrollbar-wa flex-1 overflow-y-auto py-2 px-12", children: messages.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(MessageList, { messages }) : children }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              ref: scrollRef,
+              className: "flex-1 overflow-y-auto py-2 px-12 [scrollbar-width:thin] [scrollbar-color:rgba(255,255,255,0.1)_transparent] [&::-webkit-scrollbar]:w-1 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-[rgba(255,255,255,0.18)] [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb:hover]:bg-[rgba(255,255,255,0.3)]",
+              children: /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: contentRef, children: [
+                children,
+                messages.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(MessageList, { messages })
+              ] })
+            }
+          ),
           showInputfield && /* @__PURE__ */ jsxRuntime.jsx(
             Inputfield,
             {
@@ -4252,6 +4273,114 @@ const ChatParts = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePro
   Root: Chat$1
 }, Symbol.toStringTag, { value: "Module" }));
 const Chat = Object.assign(Chat$1, ChatParts);
+function Animated({ delay = 0, children, className }) {
+  const [mounted, setMounted] = React.useState(delay === 0);
+  const [visible, setVisible] = React.useState(false);
+  React.useEffect(() => {
+    if (delay === 0) {
+      const raf = requestAnimationFrame(() => setVisible(true));
+      return () => cancelAnimationFrame(raf);
+    }
+    const timer = setTimeout(() => setMounted(true), delay);
+    return () => clearTimeout(timer);
+  }, [delay]);
+  React.useLayoutEffect(() => {
+    if (mounted && delay !== 0) {
+      const raf = requestAnimationFrame(() => setVisible(true));
+      return () => cancelAnimationFrame(raf);
+    }
+  }, [mounted, delay]);
+  if (!mounted) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "transition-all duration-300 ease-out",
+        visible ? "translate-y-0 opacity-100" : "translate-y-2 opacity-0",
+        className
+      ),
+      children
+    }
+  );
+}
+function History({ children, className }) {
+  const childArray = React.Children.toArray(children ?? []);
+  const result = [];
+  let lastGroupKey = void 0;
+  let lastDate = null;
+  const today = /* @__PURE__ */ new Date();
+  let hasAnyMessage = false;
+  function extractMessageInfo(node) {
+    if (!React.isValidElement(node)) return null;
+    const el = node;
+    if (el.type === Message) {
+      return {
+        msgProps: el.props,
+        isAnimated: false,
+        msgEl: el
+      };
+    }
+    if (el.type === Animated) {
+      const innerChildren = React.Children.toArray(
+        el.props.children ?? []
+      );
+      const innerMsg = innerChildren.find(
+        (c) => React.isValidElement(c) && c.type === Message
+      );
+      if (innerMsg) {
+        return {
+          msgProps: innerMsg.props,
+          isAnimated: true,
+          animatedEl: el,
+          msgEl: innerMsg
+        };
+      }
+    }
+    return null;
+  }
+  for (const child of childArray) {
+    const info = extractMessageInfo(child);
+    if (!info) {
+      result.push(child);
+      continue;
+    }
+    hasAnyMessage = true;
+    const { msgProps, isAnimated } = info;
+    const groupKey = msgProps.senderId ?? msgProps.direction;
+    const currentDate = toDate(msgProps.timestamp);
+    const isNewDay = currentDate !== null && (lastDate === null || !isSameCalendarDay(currentDate, lastDate));
+    if (isNewDay && currentDate) {
+      result.push(/* @__PURE__ */ jsxRuntime.jsx(DayDivider, { date: currentDate }, `divider-${currentDate.toISOString()}`));
+    }
+    const isNewGroup = lastGroupKey === void 0 || groupKey !== lastGroupKey || isNewDay;
+    if (isAnimated) {
+      const { animatedEl, msgEl } = info;
+      const newMsg = React.cloneElement(msgEl, {
+        top: isNewGroup
+      });
+      result.push(
+        React.cloneElement(animatedEl, {
+          children: newMsg
+        })
+      );
+    } else {
+      result.push(
+        React.cloneElement(info.msgEl, {
+          top: isNewGroup
+        })
+      );
+    }
+    lastGroupKey = groupKey;
+    if (currentDate) lastDate = currentDate;
+  }
+  if (!hasAnyMessage) {
+    result.push(/* @__PURE__ */ jsxRuntime.jsx(DayDivider, { date: today }, "history-today-divider"));
+  }
+  if (className) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(className), children: result });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: result });
+}
 function extractTextFromNode(node) {
   if (node === null || node === void 0) return "";
   if (typeof node === "string") return node;
@@ -4304,6 +4433,7 @@ function useMessages(callback) {
     for (const m of newMessages) callbackRef.current(m);
   }, [messages]);
 }
+exports.Animated = Animated;
 exports.Audio = Audio;
 exports.Chat = Chat;
 exports.Contact = Contact;
@@ -4311,6 +4441,7 @@ exports.Emoji = Emoji;
 exports.Event = Event;
 exports.File = File;
 exports.Gif = Gif;
+exports.History = History;
 exports.Image = Image;
 exports.Location = Location;
 exports.Message = Message;