whatsapp-ui-react 0.0.3 → 0.0.5

package/dist/index.d.ts

@@ -1,8 +1,12 @@
 export type * from './components/Chat';
-export type { ChatHandle } from './components/Chat/Chat';
 export { Chat } from './components/Chat';
+export type { ChatHandle } from './components/Chat/Chat';
+export type * from './components/History';
+export { History } from './components/History';
+export type * from './components/Animated';
+export { Animated } from './components/Animated';
 export type * from './components/Message';
-export { Audio, Contact, Emoji, Event, File, Gif, Image, Location, Message, Poll, Sticker, Text, Video, Voice, useMessage, } from './components/Message';
+export { Audio, Contact, Emoji, Event, File, Gif, Image, Location, Message, Poll, Sticker, Text, useMessage, Video, Voice, } from './components/Message';
 export type * from './components/Reply';
 export { Reply } from './components/Reply';
 export { useMessages } from './hooks/useMessages';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,mBAAmB,mBAAmB,CAAA;AACtC,YAAY,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAA;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAA;AAExC,mBAAmB,sBAAsB,CAAA;AACzC,OAAO,EACL,KAAK,EACL,OAAO,EACP,KAAK,EACL,KAAK,EACL,IAAI,EACJ,GAAG,EACH,KAAK,EACL,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,KAAK,EACL,KAAK,EACL,UAAU,GACX,MAAM,sBAAsB,CAAA;AAE7B,mBAAmB,oBAAoB,CAAA;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAA;AAE1C,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAEjD,mBAAmB,kBAAkB,CAAA;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAE3C,OAAO,EAAE,EAAE,EAAE,MAAM,YAAY,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,CAAA;AAEvB,mBAAmB,mBAAmB,CAAA;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAA;AACxC,YAAY,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAExD,mBAAmB,sBAAsB,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAE9C,mBAAmB,uBAAuB,CAAA;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAEhD,mBAAmB,sBAAsB,CAAA;AACzC,OAAO,EACL,KAAK,EACL,OAAO,EACP,KAAK,EACL,KAAK,EACL,IAAI,EACJ,GAAG,EACH,KAAK,EACL,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,UAAU,EACV,KAAK,EACL,KAAK,GACN,MAAM,sBAAsB,CAAA;AAE7B,mBAAmB,oBAAoB,CAAA;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAA;AAE1C,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAEjD,mBAAmB,kBAAkB,CAAA;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAE3C,OAAO,EAAE,EAAE,EAAE,MAAM,YAAY,CAAA"}

package/dist/index.js

@@ -3357,7 +3357,7 @@ function StatusIcon({ status, className }) {
   return /* @__PURE__ */ jsx(
     StatusDoubleCheckIcon,
     {
-      className: cn("size-4", status === "read" && "text-wa-read", className)
+      className: cn("size-4", status === "read" && "text-wa-teal", className)
     }
   );
 }
@@ -3393,8 +3393,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"
       ),
@@ -3649,9 +3649,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__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("audio", { ref: audioRef, src, preload: "metadata" }),
     /* @__PURE__ */ jsxs("div", { className: "flex h-13.75 w-84 min-w-84 shrink-0 items-center", children: [
@@ -3738,9 +3738,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 = useRef(null);
   useEffect(() => {
@@ -3749,8 +3752,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);
@@ -3778,7 +3781,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}%` }
       }
@@ -3896,7 +3899,7 @@ function Gif({ className }) {
   return /* @__PURE__ */ jsx("div", { className: cn("w-[336px]", className) });
 }
 function Image({ src, alt = "", className }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("w-[336px]", className), children: /* @__PURE__ */ jsx("img", { src, alt, className: "w-full rounded-wa-bubble object-cover" }) });
+  return /* @__PURE__ */ jsx("div", { className: cn("w-[336px]", className), children: /* @__PURE__ */ jsx("img", { src, alt, className: "w-full rounded-[0.525rem] object-cover" }) });
 }
 let _counter = 0;
 function uid() {
@@ -3926,13 +3929,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__ */ jsx("span", { className: "shrink-0", children: avatarUrl ? /* @__PURE__ */ jsx("img", { src: avatarUrl, alt: name, className: "size-10 rounded-full object-cover" }) : /* @__PURE__ */ 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__ */ jsx("span", { className: "shrink-0", children: avatarUrl ? /* @__PURE__ */ jsx("img", { src: avatarUrl, alt: name, className: "size-10 rounded-full object-cover" }) : /* @__PURE__ */ 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__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [
-          /* @__PURE__ */ jsx("span", { className: "truncate text-[15px] font-medium text-wa-text-primary", children: name }),
+          /* @__PURE__ */ jsx("span", { className: "truncate text-[15px] font-medium text-wa-text", children: name }),
           subtitle && /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-wa-text-secondary", children: subtitle })
         ] })
       ]
@@ -3950,7 +3953,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
     }
   );
@@ -3986,7 +3989,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__ */ jsx(MicOutlineIcon, { className: "size-5 group-hover:hidden" }),
           /* @__PURE__ */ jsx(MicFillIcon, { className: "hidden size-5 group-hover:block" })
@@ -4111,7 +4114,7 @@ function getDisplayDate(date) {
 }
 function DayDivider({ className, date }) {
   const displayDate = getDisplayDate(date.toISOString());
-  return /* @__PURE__ */ jsx("div", { className: cn("flex justify-center py-3", className), children: /* @__PURE__ */ 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__ */ jsx("div", { className: cn("flex justify-center py-3", className), children: /* @__PURE__ */ 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);
@@ -4154,15 +4157,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;
@@ -4200,6 +4210,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__ */ jsx(
           ChatHeader,
@@ -4217,7 +4228,17 @@ const Chat$1 = React.forwardRef(function Chat2({
               style: { backgroundImage: `url(${backgroundUrl})` }
             }
           ),
-          /* @__PURE__ */ jsx("div", { ref: scrollRef, className: "scrollbar-wa flex-1 overflow-y-auto py-2 px-12", children: messages.length > 0 ? /* @__PURE__ */ jsx(MessageList, { messages }) : children }),
+          /* @__PURE__ */ 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__ */ jsxs("div", { ref: contentRef, children: [
+                children,
+                messages.length > 0 && /* @__PURE__ */ jsx(MessageList, { messages })
+              ] })
+            }
+          ),
           showInputfield && /* @__PURE__ */ jsx(
             Inputfield,
             {
@@ -4249,6 +4270,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__ */ jsx(Fragment, {});
+  return /* @__PURE__ */ 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__ */ 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__ */ jsx(DayDivider, { date: today }, "history-today-divider"));
+  }
+  if (className) {
+    return /* @__PURE__ */ jsx("div", { className: cn(className), children: result });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: result });
+}
 function extractTextFromNode(node) {
   if (node === null || node === void 0) return "";
   if (typeof node === "string") return node;
@@ -4302,6 +4431,7 @@ function useMessages(callback) {
   }, [messages]);
 }
 export {
+  Animated,
   Audio,
   Chat,
   Contact,
@@ -4309,6 +4439,7 @@ export {
   Event,
   File,
   Gif,
+  History,
   Image,
   Location,
   Message,