@natoe/colab 0.1.1 → 0.1.2

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { createContext, forwardRef, useRef, useImperativeHandle, useEffect, useCallback, useState, useContext, useMemo } from 'react';
+import React4, { createContext, forwardRef, useRef, useImperativeHandle, useEffect, useCallback, useState, useContext, useMemo } from 'react';
 import { Socket, Presence } from 'phoenix';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
@@ -1755,6 +1755,82 @@ var styles5 = {
     color: "#d1d5db"
   }
 };
+
+// src/core/dateLabels.ts
+var SHORT_MONTHS = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec"
+];
+var LONG_WEEKDAYS = [
+  "Sunday",
+  "Monday",
+  "Tuesday",
+  "Wednesday",
+  "Thursday",
+  "Friday",
+  "Saturday"
+];
+var ONE_DAY_MS = 864e5;
+function parseSafe(iso) {
+  const d = new Date(iso);
+  return Number.isNaN(d.getTime()) ? null : d;
+}
+function startOfDay(d) {
+  return new Date(d.getFullYear(), d.getMonth(), d.getDate());
+}
+function daysBetween(a, b) {
+  return Math.floor((startOfDay(a).getTime() - startOfDay(b).getTime()) / ONE_DAY_MS);
+}
+function formatFullDate(d) {
+  return `${d.getDate()} ${SHORT_MONTHS[d.getMonth()]} ${d.getFullYear()}`;
+}
+function formatLocaleTime(d) {
+  try {
+    return d.toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
+  } catch {
+    const h = d.getHours();
+    const m = d.getMinutes().toString().padStart(2, "0");
+    const suffix = h >= 12 ? "PM" : "AM";
+    const h12 = (h + 11) % 12 + 1;
+    return `${h12}:${m} ${suffix}`;
+  }
+}
+function formatInboxTimestamp(iso) {
+  if (!iso) return "";
+  const d = parseSafe(iso);
+  if (!d) return "";
+  const diffDays = daysBetween(/* @__PURE__ */ new Date(), d);
+  if (diffDays === 0) return formatLocaleTime(d);
+  if (diffDays === 1) return "Yesterday";
+  if (diffDays > 1 && diffDays < 7) return LONG_WEEKDAYS[d.getDay()];
+  return formatFullDate(d);
+}
+function formatDayDivider(iso) {
+  if (!iso) return "";
+  const d = parseSafe(iso);
+  if (!d) return "";
+  const diffDays = daysBetween(/* @__PURE__ */ new Date(), d);
+  if (diffDays === 0) return "Today";
+  if (diffDays === 1) return "Yesterday";
+  if (diffDays > 1 && diffDays < 7) return LONG_WEEKDAYS[d.getDay()];
+  return formatFullDate(d);
+}
+function dayBucketKey(iso) {
+  if (!iso) return "";
+  const d = parseSafe(iso);
+  if (!d) return "";
+  return `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
+}
 var MessageList = forwardRef(function MessageList2({
   messages,
   currentUserId,
@@ -1840,22 +1916,30 @@ var MessageList = forwardRef(function MessageList2({
           /* @__PURE__ */ jsx("p", { style: styles6.emptyTitle, children: "No messages yet" }),
           /* @__PURE__ */ jsx("p", { style: styles6.emptySubtitle, children: "Start the conversation about this study" })
         ] }),
-        messages.map((message) => /* @__PURE__ */ jsx("div", { "data-message-id": message.id, children: /* @__PURE__ */ jsx(
-          MessageBubble,
-          {
-            message,
-            isOwn: message.senderId === currentUserId,
-            participants,
-            currentUserId,
-            showSeenBy,
-            onDeepLinkClick,
-            onReply,
-            onPin,
-            onUnpin,
-            onCopy,
-            pinDisabled
-          }
-        ) }, message.id)),
+        messages.map((message, index) => {
+          const currentBucket = dayBucketKey(message.insertedAt);
+          const prevBucket = index === 0 ? null : dayBucketKey(messages[index - 1].insertedAt);
+          const showDivider = currentBucket && currentBucket !== prevBucket;
+          return /* @__PURE__ */ jsxs(React4.Fragment, { children: [
+            showDivider && /* @__PURE__ */ jsx("div", { style: styles6.dayDivider, role: "separator", "aria-label": "Date", children: /* @__PURE__ */ jsx("span", { style: styles6.dayDividerPill, children: formatDayDivider(message.insertedAt) }) }),
+            /* @__PURE__ */ jsx("div", { "data-message-id": message.id, children: /* @__PURE__ */ jsx(
+              MessageBubble,
+              {
+                message,
+                isOwn: message.senderId === currentUserId,
+                participants,
+                currentUserId,
+                showSeenBy,
+                onDeepLinkClick,
+                onReply,
+                onPin,
+                onUnpin,
+                onCopy,
+                pinDisabled
+              }
+            ) })
+          ] }, message.id);
+        }),
         typingUsers.length > 0 && /* @__PURE__ */ jsxs("div", { style: styles6.typingIndicator, children: [
           typingUsers.map((t) => t.userName ?? "Someone").join(", "),
           typingUsers.length === 1 ? " is " : " are ",
@@ -1917,6 +2001,22 @@ var styles6 = {
     fontSize: "12px",
     color: "#9ca3af",
     fontStyle: "italic"
+  },
+  dayDivider: {
+    display: "flex",
+    justifyContent: "center",
+    margin: "12px 0 8px"
+  },
+  dayDividerPill: {
+    display: "inline-block",
+    padding: "4px 12px",
+    fontSize: "12px",
+    fontWeight: 500,
+    color: "#475569",
+    backgroundColor: "#f1f5f9",
+    border: "1px solid #e2e8f0",
+    borderRadius: "12px",
+    letterSpacing: "0.2px"
   }
 };
 function ReplyPreview({ message, onCancel, className }) {
@@ -3901,7 +4001,7 @@ function ConversationListItem({
                   ...styles14.time,
                   ...hasUnread ? styles14.timeUnread : {}
                 },
-                children: formatRelativeTime(item.lastActivityAt)
+                children: formatInboxTimestamp(item.lastActivityAt)
               }
             )
           ] }),
@@ -3944,23 +4044,6 @@ function renderLastMessagePreview(message) {
     }
   }
 }
-function formatRelativeTime(iso) {
-  try {
-    const date = new Date(iso);
-    const now = /* @__PURE__ */ new Date();
-    const diffMs = now.getTime() - date.getTime();
-    const diffMin = Math.floor(diffMs / 6e4);
-    const diffHr = Math.floor(diffMs / 36e5);
-    const diffDay = Math.floor(diffMs / 864e5);
-    if (diffMin < 1) return "now";
-    if (diffMin < 60) return `${diffMin}m`;
-    if (diffHr < 24) return `${diffHr}h`;
-    if (diffDay < 7) return `${diffDay}d`;
-    return date.toLocaleDateString([], { month: "short", day: "numeric" });
-  } catch {
-    return "";
-  }
-}
 var styles14 = {
   container: {
     display: "flex",