@natoe/colab 0.1.1 → 0.1.3

package/dist/index.js

@@ -1,9 +1,13 @@
 'use strict';
 
-var react = require('react');
+var React4 = require('react');
 var phoenix = require('phoenix');
 var jsxRuntime = require('react/jsx-runtime');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React4__default = /*#__PURE__*/_interopDefault(React4);
+
 // src/components/CollabPanel.tsx
 
 // src/core/constants.ts
@@ -316,25 +320,25 @@ var CollabSocket = class {
     this.config = null;
   }
 };
-var CollabContext = react.createContext(null);
+var CollabContext = React4.createContext(null);
 function useCollab() {
-  const context = react.useContext(CollabContext);
+  const context = React4.useContext(CollabContext);
   if (!context) {
     throw new Error("useCollab must be used within a <CollabProvider>");
   }
   return context;
 }
 function CollabProvider({ config, apiBaseUrl, children }) {
-  const [socket, setSocket] = react.useState(() => {
+  const [socket, setSocket] = React4.useState(() => {
     if (typeof window === "undefined") return null;
     return new CollabSocket();
   });
-  const [unreadCounts, setUnreadCounts] = react.useState({});
-  const pendingOrderIds = react.useRef(/* @__PURE__ */ new Set());
-  const pendingResolvers = react.useRef(/* @__PURE__ */ new Map());
-  const previewCache = react.useRef(/* @__PURE__ */ new Map());
-  const batchScheduled = react.useRef(false);
-  react.useEffect(() => {
+  const [unreadCounts, setUnreadCounts] = React4.useState({});
+  const pendingOrderIds = React4.useRef(/* @__PURE__ */ new Set());
+  const pendingResolvers = React4.useRef(/* @__PURE__ */ new Map());
+  const previewCache = React4.useRef(/* @__PURE__ */ new Map());
+  const batchScheduled = React4.useRef(false);
+  React4.useEffect(() => {
     if (typeof window === "undefined") return;
     let s = socket;
     if (!s) {
@@ -349,14 +353,14 @@ function CollabProvider({ config, apiBaseUrl, children }) {
       s.connect(config);
     }
   }, [config.socketUrl, config.userId]);
-  const authHeaders = react.useCallback(
+  const authHeaders = React4.useCallback(
     () => ({
       Authorization: `Bearer ${config.getToken()}`,
       "Content-Type": "application/json"
     }),
     [config]
   );
-  const flushPreviewBatch = react.useCallback(async () => {
+  const flushPreviewBatch = React4.useCallback(async () => {
     const orderIds = Array.from(pendingOrderIds.current);
     const resolvers = new Map(pendingResolvers.current);
     pendingOrderIds.current.clear();
@@ -386,7 +390,7 @@ function CollabProvider({ config, apiBaseUrl, children }) {
       });
     }
   }, [apiBaseUrl, authHeaders, config]);
-  const requestPreview = react.useCallback(
+  const requestPreview = React4.useCallback(
     (orderId) => {
       if (previewCache.current.has(orderId)) {
         return Promise.resolve(previewCache.current.get(orderId) ?? null);
@@ -404,10 +408,10 @@ function CollabProvider({ config, apiBaseUrl, children }) {
     },
     [flushPreviewBatch]
   );
-  const invalidatePreview = react.useCallback((orderId) => {
+  const invalidatePreview = React4.useCallback((orderId) => {
     previewCache.current.delete(orderId);
   }, []);
-  const fetchMessages = react.useCallback(
+  const fetchMessages = React4.useCallback(
     async (conversationId, options = {}) => {
       const limit = options.limit ?? MESSAGES_PAGE_SIZE;
       const params = new URLSearchParams({ limit: String(limit) });
@@ -423,7 +427,7 @@ function CollabProvider({ config, apiBaseUrl, children }) {
     },
     [apiBaseUrl, authHeaders]
   );
-  const createConversationWithMessage = react.useCallback(
+  const createConversationWithMessage = React4.useCallback(
     async (orderId, message, options) => {
       if (!orderId || !orderId.trim()) {
         throw {
@@ -452,7 +456,7 @@ function CollabProvider({ config, apiBaseUrl, children }) {
     },
     [apiBaseUrl, authHeaders]
   );
-  const addParticipant = react.useCallback(
+  const addParticipant = React4.useCallback(
     async (conversationId, userId) => {
       const response = await fetch(
         `${apiBaseUrl}/api/natoe-colab/conversations/${conversationId}/participants`,
@@ -468,7 +472,7 @@ function CollabProvider({ config, apiBaseUrl, children }) {
     },
     [apiBaseUrl, authHeaders]
   );
-  const removeParticipant = react.useCallback(
+  const removeParticipant = React4.useCallback(
     async (conversationId, userId) => {
       const response = await fetch(
         `${apiBaseUrl}/api/natoe-colab/conversations/${conversationId}/participants/${userId}`,
@@ -483,7 +487,7 @@ function CollabProvider({ config, apiBaseUrl, children }) {
     },
     [apiBaseUrl, authHeaders]
   );
-  const fetchConversationList = react.useCallback(async () => {
+  const fetchConversationList = React4.useCallback(async () => {
     const response = await fetch(`${apiBaseUrl}/api/natoe-colab/conversations`, {
       headers: authHeaders()
     });
@@ -492,7 +496,7 @@ function CollabProvider({ config, apiBaseUrl, children }) {
     }
     return snakeToCamel(await response.json());
   }, [apiBaseUrl, authHeaders]);
-  const pinMessage = react.useCallback(
+  const pinMessage = React4.useCallback(
     async (conversationId, messageId) => {
       const response = await fetch(
         `${apiBaseUrl}/api/natoe-colab/conversations/${conversationId}/messages/${messageId}/pin`,
@@ -508,7 +512,7 @@ function CollabProvider({ config, apiBaseUrl, children }) {
     },
     [apiBaseUrl, authHeaders]
   );
-  const unpinMessage = react.useCallback(
+  const unpinMessage = React4.useCallback(
     async (conversationId, messageId) => {
       const response = await fetch(
         `${apiBaseUrl}/api/natoe-colab/conversations/${conversationId}/messages/${messageId}/pin`,
@@ -523,7 +527,7 @@ function CollabProvider({ config, apiBaseUrl, children }) {
     },
     [apiBaseUrl, authHeaders]
   );
-  const fetchPinnedMessages = react.useCallback(
+  const fetchPinnedMessages = React4.useCallback(
     async (conversationId) => {
       const response = await fetch(
         `${apiBaseUrl}/api/natoe-colab/conversations/${conversationId}/pinned`,
@@ -587,25 +591,25 @@ function useConversation({
     pinMessage: pinMessageApi,
     unpinMessage: unpinMessageApi
   } = useCollab();
-  const [conversation, setConversation] = react.useState(null);
-  const [messages, setMessages] = react.useState([]);
-  const [pinnedMessages, setPinnedMessages] = react.useState([]);
-  const [participants, setParticipants] = react.useState([]);
-  const [typingUsers, setTypingUsers] = react.useState([]);
-  const [isLoading, setIsLoading] = react.useState(true);
-  const [hasMore, setHasMore] = react.useState(true);
-  const [error, setError] = react.useState(null);
-  const [isConnected, setIsConnected] = react.useState(false);
-  const [replyTo, setReplyTo] = react.useState(null);
-  const joinedConversationId = react.useRef(null);
-  const typingTimers = react.useRef(/* @__PURE__ */ new Map());
-  const ensureConversationInFlight = react.useRef(null);
-  const markedReadIdsRef = react.useRef(/* @__PURE__ */ new Set());
-  const buildName = react.useCallback(
+  const [conversation, setConversation] = React4.useState(null);
+  const [messages, setMessages] = React4.useState([]);
+  const [pinnedMessages, setPinnedMessages] = React4.useState([]);
+  const [participants, setParticipants] = React4.useState([]);
+  const [typingUsers, setTypingUsers] = React4.useState([]);
+  const [isLoading, setIsLoading] = React4.useState(true);
+  const [hasMore, setHasMore] = React4.useState(true);
+  const [error, setError] = React4.useState(null);
+  const [isConnected, setIsConnected] = React4.useState(false);
+  const [replyTo, setReplyTo] = React4.useState(null);
+  const joinedConversationId = React4.useRef(null);
+  const typingTimers = React4.useRef(/* @__PURE__ */ new Map());
+  const ensureConversationInFlight = React4.useRef(null);
+  const markedReadIdsRef = React4.useRef(/* @__PURE__ */ new Set());
+  const buildName = React4.useCallback(
     () => buildChannelName(patientData),
     [patientData]
   );
-  const joinChannel = react.useCallback(
+  const joinChannel = React4.useCallback(
     (conv) => {
       if (joinedConversationId.current === conv.id) return;
       socket.joinConversation(conv.id, {
@@ -688,7 +692,7 @@ function useConversation({
     },
     [socket, config.userId]
   );
-  react.useEffect(() => {
+  React4.useEffect(() => {
     let cancelled = false;
     const init = async () => {
       setIsLoading(true);
@@ -757,7 +761,7 @@ function useConversation({
       setIsConnected(false);
     };
   }, [orderId]);
-  const ensureConversation = react.useCallback(
+  const ensureConversation = React4.useCallback(
     async (payload) => {
       if (conversation) return { conv: conversation, persistedByCreate: false };
       if (ensureConversationInFlight.current) {
@@ -811,7 +815,7 @@ function useConversation({
       fetchMessages
     ]
   );
-  const sendMessage = react.useCallback(
+  const sendMessage = React4.useCallback(
     async (body) => {
       const payload = {
         body,
@@ -855,7 +859,7 @@ function useConversation({
     },
     [ensureConversation, socket, replyTo, config]
   );
-  const sendAudioMessage = react.useCallback(
+  const sendAudioMessage = React4.useCallback(
     async (audioBlob, duration) => {
       if (!config.onUploadFile) return;
       const url = await config.onUploadFile(audioBlob, "voice-message.webm");
@@ -871,7 +875,7 @@ function useConversation({
     },
     [config, ensureConversation, socket]
   );
-  const sendFileMessage = react.useCallback(
+  const sendFileMessage = React4.useCallback(
     async (file) => {
       if (!config.onUploadFile) return;
       const url = await config.onUploadFile(file, file.name);
@@ -888,7 +892,7 @@ function useConversation({
     },
     [config, ensureConversation, socket]
   );
-  const sendDeepLink = react.useCallback(
+  const sendDeepLink = React4.useCallback(
     async (path, label) => {
       const payload = {
         body: label,
@@ -901,14 +905,14 @@ function useConversation({
     },
     [ensureConversation, socket]
   );
-  const sendTypingIndicator = react.useCallback(
+  const sendTypingIndicator = React4.useCallback(
     (isTyping) => {
       if (!conversation || !isConnected) return;
       socket.sendTyping(conversation.id, isTyping);
     },
     [conversation, isConnected, socket]
   );
-  const markAsRead = react.useCallback(
+  const markAsRead = React4.useCallback(
     (messageId) => {
       if (!conversation || !isConnected) return;
       if (markedReadIdsRef.current.has(messageId)) return;
@@ -917,7 +921,7 @@ function useConversation({
     },
     [conversation, isConnected, socket]
   );
-  const loadMoreMessages = react.useCallback(async () => {
+  const loadMoreMessages = React4.useCallback(async () => {
     if (!conversation || !hasMore || isLoading) return;
     const oldestMessage = messages[0];
     const before = oldestMessage?.id;
@@ -936,7 +940,7 @@ function useConversation({
       setIsLoading(false);
     }
   }, [conversation, hasMore, isLoading, messages, fetchMessages, config]);
-  const pinMessage = react.useCallback(
+  const pinMessage = React4.useCallback(
     async (messageId) => {
       if (!conversation) return;
       try {
@@ -951,7 +955,7 @@ function useConversation({
     },
     [conversation, pinMessageApi, config]
   );
-  const unpinMessage = react.useCallback(
+  const unpinMessage = React4.useCallback(
     async (messageId) => {
       if (!conversation) return;
       try {
@@ -991,10 +995,10 @@ function useConversation({
 }
 function useChannelSettings({ conversationId }) {
   const { socket, config } = useCollab();
-  const [isUpdating, setIsUpdating] = react.useState(false);
-  const [error, setError] = react.useState(null);
+  const [isUpdating, setIsUpdating] = React4.useState(false);
+  const [error, setError] = React4.useState(null);
   const isAdmin = config.userRole === "admin";
-  const withLoading = react.useCallback(
+  const withLoading = React4.useCallback(
     async (operation) => {
       if (!conversationId) return;
       setIsUpdating(true);
@@ -1013,25 +1017,25 @@ function useChannelSettings({ conversationId }) {
     },
     [conversationId, config]
   );
-  const inviteUser = react.useCallback(
+  const inviteUser = React4.useCallback(
     async (payload) => {
       await withLoading(() => socket.inviteUser(conversationId, payload));
     },
     [conversationId, socket, withLoading]
   );
-  const removeUser = react.useCallback(
+  const removeUser = React4.useCallback(
     async (userId) => {
       await withLoading(() => socket.removeUser(conversationId, userId));
     },
     [conversationId, socket, withLoading]
   );
-  const leaveChannel = react.useCallback(async () => {
+  const leaveChannel = React4.useCallback(async () => {
     await withLoading(async () => {
       await socket.removeUser(conversationId, config.userId);
       socket.leaveConversation(conversationId);
     });
   }, [conversationId, socket, config.userId, withLoading]);
-  const deleteChannel = react.useCallback(async () => {
+  const deleteChannel = React4.useCallback(async () => {
     if (!isAdmin) {
       const err = {
         code: "FORBIDDEN",
@@ -1043,7 +1047,7 @@ function useChannelSettings({ conversationId }) {
     }
     await withLoading(() => socket.deleteChannel(conversationId));
   }, [conversationId, socket, isAdmin, config, withLoading]);
-  const updateChannel = react.useCallback(
+  const updateChannel = React4.useCallback(
     async (payload) => {
       await withLoading(() => socket.updateChannel(conversationId, payload));
     },
@@ -1062,7 +1066,7 @@ function useChannelSettings({ conversationId }) {
 }
 function useDeepLinks() {
   const { config } = useCollab();
-  const parseDeepLink = react.useCallback((link) => {
+  const parseDeepLink = React4.useCallback((link) => {
     if (!link.startsWith(DEEP_LINK_PREFIX)) return null;
     const path = link.slice(DEEP_LINK_PREFIX.length);
     const parts = path.split("/").filter(Boolean);
@@ -1074,7 +1078,7 @@ function useDeepLinks() {
       id: parts[1]
     };
   }, []);
-  const handleDeepLink = react.useCallback(
+  const handleDeepLink = React4.useCallback(
     (link) => {
       const parsed = parseDeepLink(link);
       if (!parsed) return;
@@ -1088,10 +1092,10 @@ function useDeepLinks() {
     },
     [parseDeepLink, config]
   );
-  const containsDeepLink = react.useCallback((text) => {
+  const containsDeepLink = React4.useCallback((text) => {
     return text.includes(DEEP_LINK_PREFIX);
   }, []);
-  const extractDeepLinks = react.useCallback(
+  const extractDeepLinks = React4.useCallback(
     (text) => {
       const regex = new RegExp(`${escapeRegex(DEEP_LINK_PREFIX)}[\\w/.-]+`, "g");
       const matches = text.match(regex) || [];
@@ -1155,7 +1159,7 @@ var styles = {
   },
   patientName: {
     fontWeight: 600,
-    fontSize: "15px",
+    fontSize: "17px",
     color: "#111827"
   },
   secondaryRow: {
@@ -1165,8 +1169,8 @@ var styles = {
     alignItems: "center"
   },
   secondary: {
-    fontSize: "12px",
-    color: "#6b7280"
+    fontSize: "13px",
+    color: "#4b5563"
   },
   actions: {
     display: "flex",
@@ -1174,8 +1178,9 @@ var styles = {
     marginTop: "8px"
   },
   dicomButton: {
-    padding: "6px 12px",
-    fontSize: "13px",
+    minHeight: "40px",
+    padding: "8px 16px",
+    fontSize: "14px",
     fontWeight: 500,
     color: "#ffffff",
     backgroundColor: "#2563eb",
@@ -1184,8 +1189,9 @@ var styles = {
     cursor: "pointer"
   },
   settingsButton: {
-    padding: "6px 12px",
-    fontSize: "13px",
+    minHeight: "40px",
+    padding: "8px 16px",
+    fontSize: "14px",
     fontWeight: 500,
     color: "#374151",
     backgroundColor: "#ffffff",
@@ -1281,7 +1287,7 @@ function SeenByIndicator({
   senderId,
   className
 }) {
-  const [expanded, setExpanded] = react.useState(false);
+  const [expanded, setExpanded] = React4.useState(false);
   if (senderId !== currentUserId) return null;
   const seenByOthers = readBy.filter((id) => id !== currentUserId && id !== senderId).map((id) => participants.find((p) => p.userId === id)).filter((p) => !!p);
   if (seenByOthers.length === 0) return null;
@@ -1426,6 +1432,40 @@ var styles4 = {
     cursor: "pointer"
   }
 };
+function FileIcon({ size = 18, color = "currentColor" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: color,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z" })
+    }
+  );
+}
+function PinIcon({ size = 14, color = "currentColor" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: color,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 9V4l1 0c.55 0 1-.45 1-1s-.45-1-1-1H7c-.55 0-1 .45-1 1s.45 1 1 1l1 0v5c0 1.66-1.34 3-3 3v2h5.97v7l1 1 1-1v-7H19v-2c-1.66 0-3-1.34-3-3z" })
+    }
+  );
+}
+var ROLE_LABELS = {
+  radiologist: "Radiologist",
+  lab: "Imaging Center",
+  physician: "Physician",
+  admin: "Admin"
+};
 function MessageBubble({
   message,
   isOwn,
@@ -1441,7 +1481,7 @@ function MessageBubble({
   pinDisabled = false,
   className
 }) {
-  const [isHovered, setIsHovered] = react.useState(false);
+  const [isHovered, setIsHovered] = React4.useState(false);
   if (message.type === "system") {
     return /* @__PURE__ */ jsxRuntime.jsx(SystemBubble, { message });
   }
@@ -1465,7 +1505,10 @@ function MessageBubble({
               ...isOwn ? styles5.ownBubble : styles5.otherBubble
             },
             children: [
-              message.isPinned && /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles5.pinnedBadge, children: "\u{1F4CC} Pinned" }),
+              message.isPinned && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles5.pinnedBadge, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(PinIcon, { size: 12 }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Pinned" })
+              ] }),
               message.replyToSnapshot && /* @__PURE__ */ jsxRuntime.jsx(
                 ReplyQuoteBlock,
                 {
@@ -1560,7 +1603,7 @@ function ImageContent({ mediaUrl, fileName }) {
 function FileContent({ mediaUrl, fileName }) {
   if (!mediaUrl) return null;
   return /* @__PURE__ */ jsxRuntime.jsxs("a", { href: mediaUrl, target: "_blank", rel: "noopener noreferrer", style: styles5.fileLink, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles5.fileIcon, children: "\u{1F4C4}" }),
+    /* @__PURE__ */ jsxRuntime.jsx(FileIcon, { size: 20 }),
     /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles5.fileName, children: fileName || "Download file" })
   ] });
 }
@@ -1598,7 +1641,7 @@ function RoleBadge({ role }) {
     physician: "#059669",
     admin: "#dc2626"
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...styles5.roleBadge, backgroundColor: `${colors[role]}15`, color: colors[role] }, children: role });
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...styles5.roleBadge, backgroundColor: `${colors[role]}15`, color: colors[role] }, children: ROLE_LABELS[role] ?? role });
 }
 function formatTime(iso) {
   try {
@@ -1627,7 +1670,7 @@ var styles5 = {
     maxWidth: "75%"
   },
   bubble: {
-    padding: "8px 12px",
+    padding: "10px 14px",
     borderRadius: "12px",
     wordBreak: "break-word"
   },
@@ -1642,11 +1685,13 @@ var styles5 = {
     borderBottomLeftRadius: "4px"
   },
   pinnedBadge: {
-    display: "inline-block",
-    fontSize: "10px",
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "4px",
+    fontSize: "12px",
     fontWeight: 600,
     marginBottom: "4px",
-    opacity: 0.7
+    color: "#6b7280"
   },
   senderRow: {
     display: "flex",
@@ -1655,24 +1700,25 @@ var styles5 = {
     marginBottom: "4px"
   },
   senderName: {
-    fontSize: "12px",
+    fontSize: "13px",
     fontWeight: 600,
     color: "#374151"
   },
   roleBadge: {
-    fontSize: "10px",
-    fontWeight: 500,
-    padding: "1px 6px",
+    fontSize: "11px",
+    fontWeight: 600,
+    padding: "2px 8px",
     borderRadius: "4px"
   },
   textBody: {
     margin: 0,
-    fontSize: "14px",
-    lineHeight: "1.4"
+    fontSize: "15px",
+    lineHeight: "1.45"
   },
   timestamp: {
-    fontSize: "10px",
-    opacity: 0.7,
+    fontSize: "12px",
+    color: "inherit",
+    opacity: 0.8,
     marginTop: "4px",
     textAlign: "right"
   },
@@ -1711,9 +1757,6 @@ var styles5 = {
     color: "inherit",
     padding: "6px 0"
   },
-  fileIcon: {
-    fontSize: "18px"
-  },
   fileName: {
     fontSize: "13px",
     textDecoration: "underline"
@@ -1748,16 +1791,92 @@ var styles5 = {
     justifyContent: "center",
     alignItems: "center",
     gap: "8px",
-    padding: "4px 16px",
-    fontSize: "12px",
-    color: "#9ca3af"
+    padding: "6px 16px",
+    fontSize: "13px",
+    color: "#6b7280"
   },
   systemTime: {
-    fontSize: "10px",
-    color: "#d1d5db"
+    fontSize: "12px",
+    color: "#9ca3af"
   }
 };
-var MessageList = react.forwardRef(function MessageList2({
+
+// 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 = React4.forwardRef(function MessageList2({
   messages,
   currentUserId,
   participants = [],
@@ -1775,10 +1894,10 @@ var MessageList = react.forwardRef(function MessageList2({
   pinDisabled,
   className
 }, ref) {
-  const containerRef = react.useRef(null);
-  const bottomRef = react.useRef(null);
-  const prevMessageCount = react.useRef(messages.length);
-  react.useImperativeHandle(
+  const containerRef = React4.useRef(null);
+  const bottomRef = React4.useRef(null);
+  const prevMessageCount = React4.useRef(messages.length);
+  React4.useImperativeHandle(
     ref,
     () => ({
       scrollToMessage: (messageId) => {
@@ -1795,7 +1914,7 @@ var MessageList = react.forwardRef(function MessageList2({
     }),
     []
   );
-  react.useEffect(() => {
+  React4.useEffect(() => {
     if (messages.length > prevMessageCount.current) {
       const lastMessage = messages[messages.length - 1];
       const isOwnMessage = lastMessage?.senderId === currentUserId;
@@ -1805,7 +1924,7 @@ var MessageList = react.forwardRef(function MessageList2({
     }
     prevMessageCount.current = messages.length;
   }, [messages, currentUserId]);
-  react.useEffect(() => {
+  React4.useEffect(() => {
     if (!onMessageVisible || !containerRef.current) return;
     const observer = new IntersectionObserver(
       (entries) => {
@@ -1822,7 +1941,7 @@ var MessageList = react.forwardRef(function MessageList2({
     messageElements.forEach((el) => observer.observe(el));
     return () => observer.disconnect();
   }, [messages, onMessageVisible]);
-  const handleScroll = react.useCallback(() => {
+  const handleScroll = React4.useCallback(() => {
     if (!containerRef.current || !hasMore || isLoading) return;
     if (containerRef.current.scrollTop < 50) {
       onLoadMore();
@@ -1842,22 +1961,30 @@ var MessageList = react.forwardRef(function MessageList2({
           /* @__PURE__ */ jsxRuntime.jsx("p", { style: styles6.emptyTitle, children: "No messages yet" }),
           /* @__PURE__ */ jsxRuntime.jsx("p", { style: styles6.emptySubtitle, children: "Start the conversation about this study" })
         ] }),
-        messages.map((message) => /* @__PURE__ */ jsxRuntime.jsx("div", { "data-message-id": message.id, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(React4__default.default.Fragment, { children: [
+            showDivider && /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles6.dayDivider, role: "separator", "aria-label": "Date", children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles6.dayDividerPill, children: formatDayDivider(message.insertedAt) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { "data-message-id": message.id, children: /* @__PURE__ */ jsxRuntime.jsx(
+              MessageBubble,
+              {
+                message,
+                isOwn: message.senderId === currentUserId,
+                participants,
+                currentUserId,
+                showSeenBy,
+                onDeepLinkClick,
+                onReply,
+                onPin,
+                onUnpin,
+                onCopy,
+                pinDisabled
+              }
+            ) })
+          ] }, message.id);
+        }),
         typingUsers.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles6.typingIndicator, children: [
           typingUsers.map((t) => t.userName ?? "Someone").join(", "),
           typingUsers.length === 1 ? " is " : " are ",
@@ -1883,18 +2010,19 @@ var styles6 = {
   loadingMore: {
     textAlign: "center",
     padding: "12px",
-    fontSize: "13px",
-    color: "#9ca3af"
+    fontSize: "14px",
+    color: "#6b7280"
   },
   loadMoreButton: {
     display: "block",
     margin: "0 auto 12px",
-    padding: "6px 16px",
-    fontSize: "12px",
-    color: "#6b7280",
+    minHeight: "36px",
+    padding: "8px 18px",
+    fontSize: "13px",
+    color: "#374151",
     backgroundColor: "transparent",
-    border: "1px solid #e5e7eb",
-    borderRadius: "16px",
+    border: "1px solid #d1d5db",
+    borderRadius: "18px",
     cursor: "pointer"
   },
   empty: {
@@ -1903,22 +2031,38 @@ var styles6 = {
     alignItems: "center",
     justifyContent: "center",
     padding: "48px 16px",
-    color: "#9ca3af"
+    color: "#6b7280"
   },
   emptyTitle: {
-    fontSize: "15px",
-    fontWeight: 500,
+    fontSize: "16px",
+    fontWeight: 600,
+    color: "#374151",
     margin: "0 0 4px"
   },
   emptySubtitle: {
-    fontSize: "13px",
+    fontSize: "14px",
     margin: 0
   },
   typingIndicator: {
     padding: "4px 16px 8px",
-    fontSize: "12px",
-    color: "#9ca3af",
+    fontSize: "13px",
+    color: "#6b7280",
     fontStyle: "italic"
+  },
+  dayDivider: {
+    display: "flex",
+    justifyContent: "center",
+    margin: "12px 0 8px"
+  },
+  dayDividerPill: {
+    display: "inline-block",
+    padding: "5px 14px",
+    fontSize: "13px",
+    fontWeight: 500,
+    color: "#334155",
+    backgroundColor: "#e2e8f0",
+    borderRadius: "12px",
+    letterSpacing: "0.2px"
   }
 };
 function ReplyPreview({ message, onCancel, className }) {
@@ -2013,6 +2157,48 @@ var styles7 = {
     flexShrink: 0
   }
 };
+function AttachIcon({ size = 20, color = "currentColor" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: color,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z" })
+    }
+  );
+}
+function SendIcon({ size = 20, color = "currentColor" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: color,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" })
+    }
+  );
+}
+function CloseIcon({ size = 18, color = "currentColor" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: color,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })
+    }
+  );
+}
 function MessageInput({
   onSendText,
   // MIC DISABLED — onSendAudio still accepted but unused.
@@ -2025,14 +2211,14 @@ function MessageInput({
   placeholder = "Type a message...",
   className
 }) {
-  const [text, setText] = react.useState("");
-  const [isSending, setIsSending] = react.useState(false);
-  const [fileError, setFileError] = react.useState(null);
-  const fileInputRef = react.useRef(null);
-  const typingTimeoutRef = react.useRef(null);
-  const isTypingRef = react.useRef(false);
-  const sendingRef = react.useRef(false);
-  const handleTyping = react.useCallback(() => {
+  const [text, setText] = React4.useState("");
+  const [isSending, setIsSending] = React4.useState(false);
+  const [fileError, setFileError] = React4.useState(null);
+  const fileInputRef = React4.useRef(null);
+  const typingTimeoutRef = React4.useRef(null);
+  const isTypingRef = React4.useRef(false);
+  const sendingRef = React4.useRef(false);
+  const handleTyping = React4.useCallback(() => {
     if (!isTypingRef.current) {
       isTypingRef.current = true;
       onTyping(true);
@@ -2045,12 +2231,12 @@ function MessageInput({
       onTyping(false);
     }, 2e3);
   }, [onTyping]);
-  react.useEffect(() => {
+  React4.useEffect(() => {
     return () => {
       if (typingTimeoutRef.current) clearTimeout(typingTimeoutRef.current);
     };
   }, []);
-  const handleSendText = react.useCallback(async () => {
+  const handleSendText = React4.useCallback(async () => {
     const trimmed = text.trim();
     if (!trimmed || sendingRef.current) return;
     sendingRef.current = true;
@@ -2071,7 +2257,7 @@ function MessageInput({
       setIsSending(false);
     }
   }, [text, onSendText, onTyping]);
-  const handleKeyDown = react.useCallback(
+  const handleKeyDown = React4.useCallback(
     (e) => {
       if (e.key === "Enter" && !e.shiftKey) {
         e.preventDefault();
@@ -2080,7 +2266,7 @@ function MessageInput({
     },
     [handleSendText]
   );
-  const handleFileSelect = react.useCallback(
+  const handleFileSelect = React4.useCallback(
     async (e) => {
       const file = e.target.files?.[0];
       if (!file) return;
@@ -2101,7 +2287,19 @@ function MessageInput({
   );
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: styles8.container, children: [
     replyTo && onCancelReply && /* @__PURE__ */ jsxRuntime.jsx(ReplyPreview, { message: replyTo, onCancel: onCancelReply }),
-    fileError && /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles8.error, children: fileError }),
+    fileError && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles8.error, role: "alert", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles8.errorText, children: fileError }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setFileError(null),
+          "aria-label": "Dismiss error",
+          style: styles8.errorDismiss,
+          children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, { size: 16 })
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles8.inputBar, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
@@ -2109,9 +2307,10 @@ function MessageInput({
           onClick: () => fileInputRef.current?.click(),
           disabled: disabled || isSending,
           style: styles8.iconButton,
+          "aria-label": "Attach file",
           title: "Attach file",
           type: "button",
-          children: "\u{1F4CE}"
+          children: /* @__PURE__ */ jsxRuntime.jsx(AttachIcon, { size: 22, color: "#374151" })
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -2144,12 +2343,14 @@ function MessageInput({
         {
           onClick: handleSendText,
           disabled: disabled || isSending || !text.trim(),
+          "aria-label": "Send message",
+          title: "Send message",
           style: {
             ...styles8.sendButton,
             opacity: text.trim() ? 1 : 0.4
           },
           type: "button",
-          children: "\u27A4"
+          children: /* @__PURE__ */ jsxRuntime.jsx(SendIcon, { size: 20, color: "#ffffff" })
         }
       )
     ] })
@@ -2161,24 +2362,45 @@ var styles8 = {
     backgroundColor: "#ffffff"
   },
   error: {
-    padding: "6px 16px",
-    fontSize: "12px",
-    color: "#dc2626",
-    backgroundColor: "#fef2f2"
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "8px",
+    padding: "8px 12px 8px 16px",
+    fontSize: "13px",
+    color: "#b91c1c",
+    backgroundColor: "#fef2f2",
+    borderTop: "1px solid #fecaca"
+  },
+  errorText: {
+    flex: 1,
+    minWidth: 0
+  },
+  errorDismiss: {
+    width: "28px",
+    height: "28px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "transparent",
+    border: "none",
+    color: "#b91c1c",
+    borderRadius: "4px",
+    cursor: "pointer",
+    flexShrink: 0
   },
   inputBar: {
     display: "flex",
     alignItems: "flex-end",
-    gap: "4px",
-    padding: "8px 12px"
+    gap: "6px",
+    padding: "10px 12px"
   },
   iconButton: {
-    width: "36px",
-    height: "36px",
+    width: "44px",
+    height: "44px",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    fontSize: "18px",
     backgroundColor: "transparent",
     border: "none",
     borderRadius: "50%",
@@ -2187,23 +2409,23 @@ var styles8 = {
   },
   textarea: {
     flex: 1,
-    padding: "8px 12px",
-    fontSize: "14px",
-    lineHeight: "1.4",
-    border: "1px solid #e5e7eb",
-    borderRadius: "20px",
+    padding: "10px 14px",
+    fontSize: "15px",
+    lineHeight: "1.45",
+    border: "1px solid #d1d5db",
+    borderRadius: "22px",
     resize: "none",
     outline: "none",
     fontFamily: "inherit",
-    maxHeight: "120px"
+    maxHeight: "120px",
+    minHeight: "44px"
   },
   sendButton: {
-    width: "36px",
-    height: "36px",
+    width: "44px",
+    height: "44px",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    fontSize: "18px",
     backgroundColor: "#2563eb",
     color: "#ffffff",
     border: "none",
@@ -2376,13 +2598,13 @@ function ChannelSettings({
   onClose,
   className
 }) {
-  const [editingName, setEditingName] = react.useState(false);
-  const [nameValue, setNameValue] = react.useState(channelName);
-  const [showInvite, setShowInvite] = react.useState(false);
-  const [inviteId, setInviteId] = react.useState("");
-  const [inviteName, setInviteName] = react.useState("");
-  const [inviteRole, setInviteRole] = react.useState("radiologist");
-  const [confirmDelete, setConfirmDelete] = react.useState(false);
+  const [editingName, setEditingName] = React4.useState(false);
+  const [nameValue, setNameValue] = React4.useState(channelName);
+  const [showInvite, setShowInvite] = React4.useState(false);
+  const [inviteId, setInviteId] = React4.useState("");
+  const [inviteName, setInviteName] = React4.useState("");
+  const [inviteRole, setInviteRole] = React4.useState("radiologist");
+  const [confirmDelete, setConfirmDelete] = React4.useState(false);
   const handleSaveName = async () => {
     if (nameValue.trim() && nameValue !== channelName) {
       await onUpdateChannel({ name: nameValue.trim() });
@@ -2673,7 +2895,7 @@ function PinnedMessagesBar({
   onUnpin,
   className
 }) {
-  const [index, setIndex] = react.useState(0);
+  const [index, setIndex] = React4.useState(0);
   if (pinnedMessages.length === 0) return null;
   const safeIndex = Math.min(index, pinnedMessages.length - 1);
   const current = pinnedMessages[safeIndex];
@@ -2832,8 +3054,8 @@ function CollabPanel({
   style
 }) {
   const { config } = useCollab();
-  const [showSettings, setShowSettings] = react.useState(false);
-  const messageListRef = react.useRef(null);
+  const [showSettings, setShowSettings] = React4.useState(false);
+  const messageListRef = React4.useRef(null);
   const {
     conversation,
     messages,
@@ -2994,6 +3216,34 @@ var panelStyles = {
     margin: 0
   }
 };
+function MinimizeIcon({ size = 18, color = "currentColor" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: color,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 19h12v2H6z" })
+    }
+  );
+}
+function ExpandIcon({ size = 18, color = "currentColor" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: color,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 4h16v16H4V4zm2 4v10h12V8H6z" })
+    }
+  );
+}
 function CollabPopup({
   orderId,
   patientData,
@@ -3005,17 +3255,17 @@ function CollabPopup({
   height = 520,
   className
 }) {
-  const [position, setPosition] = react.useState(
+  const [position, setPosition] = React4.useState(
     initialPosition || {
       x: window.innerWidth - width - 24,
       y: Math.max(24, window.innerHeight - height - 104)
     }
   );
-  const [isDragging, setIsDragging] = react.useState(false);
-  const [isMinimized, setIsMinimized] = react.useState(false);
-  const dragOffset = react.useRef({ x: 0, y: 0 });
-  const containerRef = react.useRef(null);
-  const handleMouseDown = react.useCallback(
+  const [isDragging, setIsDragging] = React4.useState(false);
+  const [isMinimized, setIsMinimized] = React4.useState(false);
+  const dragOffset = React4.useRef({ x: 0, y: 0 });
+  const containerRef = React4.useRef(null);
+  const handleMouseDown = React4.useCallback(
     (e) => {
       if (!e.target.closest("[data-drag-handle]")) return;
       setIsDragging(true);
@@ -3027,7 +3277,7 @@ function CollabPopup({
     },
     [position]
   );
-  react.useEffect(() => {
+  React4.useEffect(() => {
     if (!isOpen) return;
     const handleKey = (e) => {
       if (e.key === "Escape") {
@@ -3037,12 +3287,12 @@ function CollabPopup({
     window.addEventListener("keydown", handleKey);
     return () => window.removeEventListener("keydown", handleKey);
   }, [isOpen, onClose]);
-  react.useEffect(() => {
+  React4.useEffect(() => {
     if (!isDragging) return;
     const handleMouseMove = (e) => {
       setPosition({
         x: Math.max(0, Math.min(e.clientX - dragOffset.current.x, window.innerWidth - width)),
-        y: Math.max(0, Math.min(e.clientY - dragOffset.current.y, window.innerHeight - (isMinimized ? 48 : height)))
+        y: Math.max(0, Math.min(e.clientY - dragOffset.current.y, window.innerHeight - (isMinimized ? 52 : height)))
       });
     };
     const handleMouseUp = () => {
@@ -3066,7 +3316,7 @@ function CollabPopup({
         left: position.x,
         top: position.y,
         width,
-        height: isMinimized ? 48 : height,
+        height: isMinimized ? 52 : height,
         cursor: isDragging ? "grabbing" : "default"
       },
       onMouseDown: handleMouseDown,
@@ -3079,12 +3329,23 @@ function CollabPopup({
               {
                 onClick: () => setIsMinimized(!isMinimized),
                 style: styles12.titleButton,
+                "aria-label": isMinimized ? "Expand chat" : "Minimize chat",
                 title: isMinimized ? "Expand" : "Minimize",
                 type: "button",
-                children: isMinimized ? "\u25A2" : "\u2014"
+                children: isMinimized ? /* @__PURE__ */ jsxRuntime.jsx(ExpandIcon, { size: 16, color: "#cbd5e1" }) : /* @__PURE__ */ jsxRuntime.jsx(MinimizeIcon, { size: 16, color: "#cbd5e1" })
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: onClose, style: styles12.titleButton, title: "Close", type: "button", children: "\u2715" })
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: onClose,
+                style: styles12.titleButton,
+                "aria-label": "Close chat",
+                title: "Close",
+                type: "button",
+                children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, { size: 16, color: "#cbd5e1" })
+              }
+            )
           ] })
         ] }),
         !isMinimized && /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles12.panelWrapper, children: /* @__PURE__ */ jsxRuntime.jsx(CollabPanel, { orderId, patientData, participantIds }) })
@@ -3109,15 +3370,15 @@ var styles12 = {
     display: "flex",
     justifyContent: "space-between",
     alignItems: "center",
-    padding: "0 12px",
-    height: "48px",
+    padding: "0 8px 0 14px",
+    height: "52px",
     backgroundColor: "#1e293b",
     cursor: "grab",
     userSelect: "none",
     flexShrink: 0
   },
   titleText: {
-    fontSize: "13px",
+    fontSize: "15px",
     fontWeight: 500,
     color: "#ffffff",
     overflow: "hidden",
@@ -3130,17 +3391,16 @@ var styles12 = {
     flexShrink: 0
   },
   titleButton: {
-    width: "28px",
-    height: "28px",
+    width: "40px",
+    height: "40px",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
     backgroundColor: "transparent",
     border: "none",
-    borderRadius: "4px",
+    borderRadius: "6px",
     cursor: "pointer",
-    fontSize: "13px",
-    color: "#94a3b8"
+    color: "#cbd5e1"
   },
   panelWrapper: {
     flex: 1,
@@ -3160,25 +3420,25 @@ function useInlineCollab({
     invalidatePreview,
     createConversationWithMessage
   } = useCollab();
-  const [preview, setPreview] = react.useState(null);
-  const [messages, setMessages] = react.useState([]);
-  const [participants, setParticipants] = react.useState([]);
-  const [unreadCount, setUnreadCount] = react.useState(0);
-  const [isLoading, setIsLoading] = react.useState(true);
-  const [isSubscribed, setIsSubscribed] = react.useState(false);
-  const [error, setError] = react.useState(null);
-  const elementRef = react.useRef(null);
-  const observerRef = react.useRef(null);
-  const subscribedConversationIdRef = react.useRef(null);
-  const trimToLimit = react.useCallback(
+  const [preview, setPreview] = React4.useState(null);
+  const [messages, setMessages] = React4.useState([]);
+  const [participants, setParticipants] = React4.useState([]);
+  const [unreadCount, setUnreadCount] = React4.useState(0);
+  const [isLoading, setIsLoading] = React4.useState(true);
+  const [isSubscribed, setIsSubscribed] = React4.useState(false);
+  const [error, setError] = React4.useState(null);
+  const elementRef = React4.useRef(null);
+  const observerRef = React4.useRef(null);
+  const subscribedConversationIdRef = React4.useRef(null);
+  const trimToLimit = React4.useCallback(
     (msgs) => msgs.length > messageLimit ? msgs.slice(msgs.length - messageLimit) : msgs,
     [messageLimit]
   );
-  const buildName = react.useCallback(
+  const buildName = React4.useCallback(
     () => buildChannelName(patientData),
     [patientData]
   );
-  react.useEffect(() => {
+  React4.useEffect(() => {
     let cancelled = false;
     const load = async () => {
       setIsLoading(true);
@@ -3204,7 +3464,7 @@ function useInlineCollab({
       cancelled = true;
     };
   }, [orderId, requestPreview, trimToLimit]);
-  const subscribe = react.useCallback(
+  const subscribe = React4.useCallback(
     (conversationId) => {
       if (subscribedConversationIdRef.current === conversationId) return;
       socket.joinConversation(conversationId, {
@@ -3228,7 +3488,7 @@ function useInlineCollab({
     },
     [socket, trimToLimit, config.userId]
   );
-  const unsubscribe = react.useCallback(() => {
+  const unsubscribe = React4.useCallback(() => {
     const convId = subscribedConversationIdRef.current;
     if (convId) {
       socket.leaveConversation(convId);
@@ -3236,7 +3496,7 @@ function useInlineCollab({
       setIsSubscribed(false);
     }
   }, [socket]);
-  const containerRef = react.useCallback(
+  const containerRef = React4.useCallback(
     (element) => {
       if (observerRef.current) {
         observerRef.current.disconnect();
@@ -3262,18 +3522,18 @@ function useInlineCollab({
     },
     [preview, subscribe, unsubscribe]
   );
-  react.useEffect(() => {
+  React4.useEffect(() => {
     return () => {
       if (observerRef.current) observerRef.current.disconnect();
       unsubscribe();
     };
   }, [unsubscribe]);
-  react.useEffect(() => {
+  React4.useEffect(() => {
     if (preview?.conversationId && elementRef.current && !observerRef.current) {
       containerRef(elementRef.current);
     }
   }, [preview, containerRef]);
-  const dispatchSend = react.useCallback(
+  const dispatchSend = React4.useCallback(
     async (payload) => {
       if (!preview) {
         try {
@@ -3330,7 +3590,7 @@ function useInlineCollab({
       config
     ]
   );
-  const sendMessage = react.useCallback(
+  const sendMessage = React4.useCallback(
     async (body) => {
       const trimmed = body.trim();
       if (!trimmed) return;
@@ -3338,7 +3598,7 @@ function useInlineCollab({
     },
     [dispatchSend]
   );
-  const sendAudioMessage = react.useCallback(
+  const sendAudioMessage = React4.useCallback(
     async (audioBlob, duration) => {
       if (!config.onUploadFile) {
         setError("File upload is not configured");
@@ -3451,10 +3711,10 @@ function RoleDot({ role }) {
   return /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...styles13.roleDot, backgroundColor: colors[role] } });
 }
 function InlineAudioPlayer({ url, duration }) {
-  const audioRef = react.useRef(null);
-  const [isPlaying, setIsPlaying] = react.useState(false);
-  const [currentTime, setCurrentTime] = react.useState(0);
-  const toggle = react.useCallback(
+  const audioRef = React4.useRef(null);
+  const [isPlaying, setIsPlaying] = React4.useState(false);
+  const [currentTime, setCurrentTime] = React4.useState(0);
+  const toggle = React4.useCallback(
     (e) => {
       e.stopPropagation();
       const audio = audioRef.current;
@@ -3468,7 +3728,7 @@ function InlineAudioPlayer({ url, duration }) {
     },
     [isPlaying]
   );
-  react.useEffect(() => {
+  React4.useEffect(() => {
     const audio = audioRef.current;
     if (!audio) return;
     const onPlay = () => setIsPlaying(true);
@@ -3544,10 +3804,10 @@ function InlineInputBar({
   showExpand,
   onExpand
 }) {
-  const [text, setText] = react.useState("");
-  const [isSending, setIsSending] = react.useState(false);
-  const inputRef = react.useRef(null);
-  const handleSend = react.useCallback(async () => {
+  const [text, setText] = React4.useState("");
+  const [isSending, setIsSending] = React4.useState(false);
+  const inputRef = React4.useRef(null);
+  const handleSend = React4.useCallback(async () => {
     const trimmed = text.trim();
     if (!trimmed || isSending) return;
     setIsSending(true);
@@ -3559,7 +3819,7 @@ function InlineInputBar({
       setIsSending(false);
     }
   }, [text, isSending, onSend]);
-  const handleKeyDown = react.useCallback(
+  const handleKeyDown = React4.useCallback(
     (e) => {
       if (e.key === "Enter" && !e.shiftKey) {
         e.preventDefault();
@@ -3792,10 +4052,10 @@ var styles13 = {
 function useConversationList(options) {
   const enabled = options?.enabled ?? true;
   const { fetchConversationList, config, totalUnread: serverTotalUnread } = useCollab();
-  const [conversations, setConversations] = react.useState([]);
-  const [isLoading, setIsLoading] = react.useState(enabled);
-  const [error, setError] = react.useState(null);
-  const silentRefresh = react.useCallback(async () => {
+  const [conversations, setConversations] = React4.useState([]);
+  const [isLoading, setIsLoading] = React4.useState(enabled);
+  const [error, setError] = React4.useState(null);
+  const silentRefresh = React4.useCallback(async () => {
     try {
       const list = await fetchConversationList();
       setConversations(list);
@@ -3807,7 +4067,7 @@ function useConversationList(options) {
       });
     }
   }, [fetchConversationList, config]);
-  const refresh = react.useCallback(async () => {
+  const refresh = React4.useCallback(async () => {
     setIsLoading(true);
     setError(null);
     try {
@@ -3825,12 +4085,12 @@ function useConversationList(options) {
       setIsLoading(false);
     }
   }, [fetchConversationList, config]);
-  react.useEffect(() => {
+  React4.useEffect(() => {
     if (!enabled) return;
     refresh();
   }, [enabled, refresh]);
-  const hasHandledInitialUnreadRef = react.useRef(false);
-  react.useEffect(() => {
+  const hasHandledInitialUnreadRef = React4.useRef(false);
+  React4.useEffect(() => {
     if (!enabled) return;
     if (!hasHandledInitialUnreadRef.current) {
       hasHandledInitialUnreadRef.current = true;
@@ -3838,7 +4098,7 @@ function useConversationList(options) {
     }
     silentRefresh();
   }, [serverTotalUnread, enabled]);
-  const filter = react.useCallback(
+  const filter = React4.useCallback(
     (query) => {
       const q = query.trim().toLowerCase();
       if (!q) return conversations;
@@ -3903,7 +4163,7 @@ function ConversationListItem({
                   ...styles14.time,
                   ...hasUnread ? styles14.timeUnread : {}
                 },
-                children: formatRelativeTime(item.lastActivityAt)
+                children: formatInboxTimestamp(item.lastActivityAt)
               }
             )
           ] }),
@@ -3946,23 +4206,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",
@@ -4028,7 +4271,7 @@ var styles14 = {
     gap: "8px"
   },
   name: {
-    fontSize: "14px",
+    fontSize: "15px",
     fontWeight: 500,
     color: "#111827",
     overflow: "hidden",
@@ -4041,8 +4284,8 @@ var styles14 = {
     fontWeight: 700
   },
   time: {
-    fontSize: "11px",
-    color: "#9ca3af",
+    fontSize: "12px",
+    color: "#6b7280",
     flexShrink: 0
   },
   timeUnread: {
@@ -4056,8 +4299,8 @@ var styles14 = {
     gap: "8px"
   },
   preview: {
-    fontSize: "13px",
-    color: "#6b7280",
+    fontSize: "14px",
+    color: "#4b5563",
     overflow: "hidden",
     textOverflow: "ellipsis",
     whiteSpace: "nowrap",
@@ -4092,9 +4335,9 @@ function ConversationList({
   title = "Conversations",
   className
 }) {
-  const [query, setQuery] = react.useState("");
-  const [showUnreadOnly, setShowUnreadOnly] = react.useState(false);
-  const filtered = react.useMemo(() => {
+  const [query, setQuery] = React4.useState("");
+  const [showUnreadOnly, setShowUnreadOnly] = React4.useState(false);
+  const filtered = React4.useMemo(() => {
     let result = conversations;
     if (showUnreadOnly) {
       result = result.filter((c) => c.unreadCount > 0);
@@ -4271,7 +4514,7 @@ function CollabInbox({
   style
 }) {
   const { conversations, isLoading, error } = useConversationList();
-  const [selectedId, setSelectedId] = react.useState(initialConversationId ?? null);
+  const [selectedId, setSelectedId] = React4.useState(initialConversationId ?? null);
   const selected = conversations.find((c) => c.id === selectedId) || null;
   const handleSelect = (item) => {
     setSelectedId(item.id);
@@ -4373,12 +4616,12 @@ function useMessages({
   initialLimit = MESSAGES_PAGE_SIZE
 }) {
   const { fetchMessages, config } = useCollab();
-  const [messages, setMessages] = react.useState([]);
-  const [isLoading, setIsLoading] = react.useState(false);
-  const [hasMore, setHasMore] = react.useState(true);
-  const [error, setError] = react.useState(null);
-  const loadedRef = react.useRef(null);
-  react.useEffect(() => {
+  const [messages, setMessages] = React4.useState([]);
+  const [isLoading, setIsLoading] = React4.useState(false);
+  const [hasMore, setHasMore] = React4.useState(true);
+  const [error, setError] = React4.useState(null);
+  const loadedRef = React4.useRef(null);
+  React4.useEffect(() => {
     if (!conversationId) {
       setMessages([]);
       setHasMore(false);
@@ -4414,7 +4657,7 @@ function useMessages({
       cancelled = true;
     };
   }, [conversationId, initialLimit, fetchMessages, config]);
-  const loadMore = react.useCallback(async () => {
+  const loadMore = React4.useCallback(async () => {
     if (!conversationId || !hasMore || isLoading) return;
     const oldestId = messages[0]?.id;
     setIsLoading(true);
@@ -4435,17 +4678,17 @@ function useMessages({
       setIsLoading(false);
     }
   }, [conversationId, hasMore, isLoading, messages, initialLimit, fetchMessages, config]);
-  const addMessage = react.useCallback((message) => {
+  const addMessage = React4.useCallback((message) => {
     setMessages((prev) => [...prev, message]);
   }, []);
-  const updateMessageReadBy = react.useCallback((messageId, userId) => {
+  const updateMessageReadBy = React4.useCallback((messageId, userId) => {
     setMessages(
       (prev) => prev.map(
         (msg) => msg.id === messageId && !(msg.readBy ?? []).includes(userId) ? { ...msg, readBy: [...msg.readBy ?? [], userId] } : msg
       )
     );
   }, []);
-  const reset = react.useCallback(() => {
+  const reset = React4.useCallback(() => {
     setMessages([]);
     setHasMore(true);
     setError(null);
@@ -4463,17 +4706,17 @@ function useMessages({
   };
 }
 function useAudioRecorder() {
-  const [isRecording, setIsRecording] = react.useState(false);
-  const [duration, setDuration] = react.useState(0);
-  const [error, setError] = react.useState(null);
-  const mediaRecorderRef = react.useRef(null);
-  const chunksRef = react.useRef([]);
-  const streamRef = react.useRef(null);
-  const timerRef = react.useRef(null);
-  const startTimeRef = react.useRef(0);
-  const resolveRef = react.useRef(null);
+  const [isRecording, setIsRecording] = React4.useState(false);
+  const [duration, setDuration] = React4.useState(0);
+  const [error, setError] = React4.useState(null);
+  const mediaRecorderRef = React4.useRef(null);
+  const chunksRef = React4.useRef([]);
+  const streamRef = React4.useRef(null);
+  const timerRef = React4.useRef(null);
+  const startTimeRef = React4.useRef(0);
+  const resolveRef = React4.useRef(null);
   const isSupported = typeof window !== "undefined" && typeof navigator !== "undefined" && !!navigator.mediaDevices?.getUserMedia && !!window.MediaRecorder;
-  const cleanup = react.useCallback(() => {
+  const cleanup = React4.useCallback(() => {
     if (timerRef.current) {
       clearInterval(timerRef.current);
       timerRef.current = null;
@@ -4487,7 +4730,7 @@ function useAudioRecorder() {
     setIsRecording(false);
     setDuration(0);
   }, []);
-  const start = react.useCallback(async () => {
+  const start = React4.useCallback(async () => {
     if (!isSupported) {
       setError("Audio recording is not supported in this browser");
       return;
@@ -4534,7 +4777,7 @@ function useAudioRecorder() {
       cleanup();
     }
   }, [isSupported, cleanup]);
-  const stop = react.useCallback(async () => {
+  const stop = React4.useCallback(async () => {
     return new Promise((resolve) => {
       if (!mediaRecorderRef.current || mediaRecorderRef.current.state === "inactive") {
         resolve(null);
@@ -4544,7 +4787,7 @@ function useAudioRecorder() {
       mediaRecorderRef.current.stop();
     });
   }, []);
-  const cancel = react.useCallback(() => {
+  const cancel = React4.useCallback(() => {
     if (mediaRecorderRef.current && mediaRecorderRef.current.state !== "inactive") {
       mediaRecorderRef.current.onstop = null;
       mediaRecorderRef.current.stop();
@@ -4565,19 +4808,19 @@ function useAudioRecorder() {
 }
 function useUnreadCount() {
   const { socket, totalUnread } = useCollab();
-  const [counts, setCounts] = react.useState({});
-  react.useEffect(() => {
+  const [counts, setCounts] = React4.useState({});
+  React4.useEffect(() => {
     socket.onUnreadCountUpdate((serverCounts) => {
       setCounts(serverCounts);
     });
   }, [socket]);
-  const getCountForConversation = react.useCallback(
+  const getCountForConversation = React4.useCallback(
     (conversationId) => {
       return counts[conversationId] ?? 0;
     },
     [counts]
   );
-  const clearForConversation = react.useCallback((conversationId) => {
+  const clearForConversation = React4.useCallback((conversationId) => {
     setCounts((prev) => {
       const next = { ...prev };
       delete next[conversationId];
@@ -4595,10 +4838,10 @@ function usePinnedMessages({
   initial = []
 }) {
   const { pinMessage, unpinMessage, fetchPinnedMessages, config } = useCollab();
-  const [pinnedMessages, setPinnedMessages] = react.useState(initial);
-  const [isLoading, setIsLoading] = react.useState(false);
-  const [error, setError] = react.useState(null);
-  const refresh = react.useCallback(async () => {
+  const [pinnedMessages, setPinnedMessages] = React4.useState(initial);
+  const [isLoading, setIsLoading] = React4.useState(false);
+  const [error, setError] = React4.useState(null);
+  const refresh = React4.useCallback(async () => {
     if (!conversationId) return;
     setIsLoading(true);
     setError(null);
@@ -4612,12 +4855,12 @@ function usePinnedMessages({
       setIsLoading(false);
     }
   }, [conversationId, fetchPinnedMessages]);
-  react.useEffect(() => {
+  React4.useEffect(() => {
     if (conversationId && initial.length === 0) {
       refresh();
     }
   }, [conversationId]);
-  const pin = react.useCallback(
+  const pin = React4.useCallback(
     async (messageId) => {
       if (!conversationId) return;
       setError(null);
@@ -4635,7 +4878,7 @@ function usePinnedMessages({
     },
     [conversationId, pinMessage, config]
   );
-  const unpin = react.useCallback(
+  const unpin = React4.useCallback(
     async (messageId) => {
       if (!conversationId) return;
       setError(null);
@@ -4653,13 +4896,13 @@ function usePinnedMessages({
     },
     [conversationId, unpinMessage, config]
   );
-  const handlePinned = react.useCallback((message) => {
+  const handlePinned = React4.useCallback((message) => {
     setPinnedMessages((prev) => {
       if (prev.some((m) => m.id === message.id)) return prev;
       return [...prev, message];
     });
   }, []);
-  const handleUnpinned = react.useCallback((messageId) => {
+  const handleUnpinned = React4.useCallback((messageId) => {
     setPinnedMessages((prev) => prev.filter((m) => m.id !== messageId));
   }, []);
   return {