@natoe/colab 0.1.3 → 0.1.4

package/dist/index.mjs

@@ -828,6 +828,7 @@ function useConversation({
         body,
         type: "text",
         insertedAt: (/* @__PURE__ */ new Date()).toISOString(),
+        status: "sending",
         ...replyTo ? {
           replyToId: replyTo.id,
           replyToSnapshot: {
@@ -843,7 +844,9 @@ function useConversation({
       try {
         await socket.sendMessage(conv.id, payload);
       } catch (err) {
-        setMessages((prev) => prev.filter((m) => m.id !== optimistic.id));
+        setMessages(
+          (prev) => prev.map((m) => m.id === optimistic.id ? { ...m, status: "failed" } : m)
+        );
         config.onError?.({
           code: "SEND_FAILED",
           message: "Failed to send message",
@@ -853,6 +856,34 @@ function useConversation({
     },
     [ensureConversation, socket, replyTo, config]
   );
+  const retryMessage = useCallback(
+    async (messageId) => {
+      if (!conversation) return;
+      const target = messages.find((m) => m.id === messageId);
+      if (!target || target.status !== "failed" || target.type !== "text") return;
+      setMessages(
+        (prev) => prev.map((m) => m.id === messageId ? { ...m, status: "sending" } : m)
+      );
+      const payload = {
+        body: target.body,
+        type: "text",
+        ...target.replyToId ? { replyToId: target.replyToId } : {}
+      };
+      try {
+        await socket.sendMessage(conversation.id, payload);
+      } catch (err) {
+        setMessages(
+          (prev) => prev.map((m) => m.id === messageId ? { ...m, status: "failed" } : m)
+        );
+        config.onError?.({
+          code: "SEND_FAILED",
+          message: "Failed to send message",
+          details: err
+        });
+      }
+    },
+    [conversation, messages, socket, config]
+  );
   const sendAudioMessage = useCallback(
     async (audioBlob, duration) => {
       if (!config.onUploadFile) return;
@@ -945,6 +976,7 @@ function useConversation({
           message: "Failed to pin message",
           details: err
         });
+        throw err;
       }
     },
     [conversation, pinMessageApi, config]
@@ -960,6 +992,7 @@ function useConversation({
           message: "Failed to unpin message",
           details: err
         });
+        throw err;
       }
     },
     [conversation, unpinMessageApi, config]
@@ -977,6 +1010,7 @@ function useConversation({
     replyTo,
     setReplyTo,
     sendMessage,
+    retryMessage,
     sendAudioMessage,
     sendFileMessage,
     sendDeepLink,
@@ -1454,6 +1488,48 @@ function PinIcon({ size = 14, color = "currentColor" }) {
     }
   );
 }
+function AlertIcon({ size = 14, color = "currentColor" }) {
+  return /* @__PURE__ */ 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__ */ jsx("path", { d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" })
+    }
+  );
+}
+function Spinner({ size = 16, color = "#6b7280", thickness = 2 }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      role: "status",
+      "aria-label": "Loading",
+      style: {
+        display: "inline-block",
+        width: size,
+        height: size,
+        border: `${thickness}px solid ${color}33`,
+        borderTopColor: color,
+        borderRadius: "50%",
+        animation: "natoe-colab-spin 800ms linear infinite",
+        verticalAlign: "middle"
+      }
+    }
+  );
+}
+if (typeof document !== "undefined") {
+  const existing = document.getElementById("natoe-colab-spin-keyframes");
+  if (!existing) {
+    const style = document.createElement("style");
+    style.id = "natoe-colab-spin-keyframes";
+    style.textContent = `@keyframes natoe-colab-spin { to { transform: rotate(360deg); } }`;
+    document.head.appendChild(style);
+  }
+}
 var ROLE_LABELS = {
   radiologist: "Radiologist",
   lab: "Imaging Center",
@@ -1472,6 +1548,7 @@ function MessageBubble({
   onUnpin,
   onCopy,
   onReplyJumpTo,
+  onRetry,
   pinDisabled = false,
   className
 }) {
@@ -1521,7 +1598,25 @@ function MessageBubble({
               message.type === "file" && /* @__PURE__ */ jsx(FileContent, { mediaUrl: message.mediaUrl, fileName: message.fileName }),
               message.type === "deep_link" && /* @__PURE__ */ jsx(DeepLinkContent, { body: message.body, metadata: message.metadata, onDeepLinkClick }),
               /* @__PURE__ */ jsx("div", { style: styles5.timestamp, children: formatTime(message.insertedAt) }),
-              showSeenBy && isOwn && /* @__PURE__ */ jsx(
+              isOwn && message.status === "sending" && /* @__PURE__ */ jsxs("div", { style: styles5.statusRow, children: [
+                /* @__PURE__ */ jsx(Spinner, { size: 12, color: "rgba(255,255,255,0.85)" }),
+                /* @__PURE__ */ jsx("span", { style: styles5.statusText, children: "Sending\u2026" })
+              ] }),
+              isOwn && message.status === "failed" && /* @__PURE__ */ jsxs("div", { style: styles5.statusRow, children: [
+                /* @__PURE__ */ jsx(AlertIcon, { size: 12, color: "#fecaca" }),
+                /* @__PURE__ */ jsx("span", { style: styles5.statusText, children: "Not sent" }),
+                onRetry && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => onRetry(message.id),
+                    style: styles5.retryButton,
+                    "aria-label": "Retry sending message",
+                    children: "Retry"
+                  }
+                )
+              ] }),
+              showSeenBy && isOwn && !message.status && /* @__PURE__ */ jsx(
                 SeenByIndicator,
                 {
                   readBy: message.readBy ?? [],
@@ -1716,6 +1811,28 @@ var styles5 = {
     marginTop: "4px",
     textAlign: "right"
   },
+  statusRow: {
+    display: "flex",
+    alignItems: "center",
+    gap: "6px",
+    marginTop: "4px",
+    fontSize: "12px",
+    justifyContent: "flex-end",
+    color: "rgba(255, 255, 255, 0.9)"
+  },
+  statusText: {
+    opacity: 0.9
+  },
+  retryButton: {
+    background: "transparent",
+    border: "none",
+    color: "#ffffff",
+    fontWeight: 600,
+    fontSize: "12px",
+    textDecoration: "underline",
+    cursor: "pointer",
+    padding: "0 2px"
+  },
   actionsWrapper: {
     position: "absolute",
     top: "50%",
@@ -1794,6 +1911,44 @@ var styles5 = {
     color: "#9ca3af"
   }
 };
+function ChatIllustration({ size = 96 }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 120 120",
+      fill: "none",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "60", cy: "60", r: "56", fill: "#eff6ff" }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M28 44a10 10 0 0 1 10-10h28a10 10 0 0 1 10 10v18a10 10 0 0 1-10 10H46l-10 8v-8h2a10 10 0 0 1-10-10V44Z",
+            fill: "#ffffff",
+            stroke: "#2563eb",
+            strokeWidth: "2.5"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M52 60a8 8 0 0 1 8-8h26a8 8 0 0 1 8 8v14a8 8 0 0 1-8 8H72l8 8v-8h6a8 8 0 0 0 0-30Z",
+            fill: "#dbeafe",
+            stroke: "#2563eb",
+            strokeWidth: "2.5"
+          }
+        ),
+        /* @__PURE__ */ jsx("circle", { cx: "48", cy: "53", r: "2.5", fill: "#2563eb" }),
+        /* @__PURE__ */ jsx("circle", { cx: "58", cy: "53", r: "2.5", fill: "#2563eb" }),
+        /* @__PURE__ */ jsx("circle", { cx: "68", cy: "68", r: "2.5", fill: "#2563eb" }),
+        /* @__PURE__ */ jsx("circle", { cx: "78", cy: "68", r: "2.5", fill: "#2563eb" })
+      ]
+    }
+  );
+}
 
 // src/core/dateLabels.ts
 var SHORT_MONTHS = [
@@ -1885,6 +2040,7 @@ var MessageList = forwardRef(function MessageList2({
   onPin,
   onUnpin,
   onCopy,
+  onRetry,
   pinDisabled,
   className
 }, ref) {
@@ -1949,12 +2105,17 @@ var MessageList = forwardRef(function MessageList2({
       style: styles6.container,
       onScroll: handleScroll,
       children: [
-        isLoading && /* @__PURE__ */ jsx("div", { style: styles6.loadingMore, children: "Loading earlier messages..." }),
+        isLoading && messages.length > 0 && /* @__PURE__ */ jsxs("div", { style: styles6.loadingMore, children: [
+          /* @__PURE__ */ jsx(Spinner, { size: 14 }),
+          /* @__PURE__ */ jsx("span", { children: "Loading earlier messages\u2026" })
+        ] }),
         hasMore && !isLoading && messages.length > 0 && /* @__PURE__ */ jsx("button", { onClick: onLoadMore, style: styles6.loadMoreButton, type: "button", children: "Load earlier messages" }),
         messages.length === 0 && !isLoading && /* @__PURE__ */ jsxs("div", { style: styles6.empty, children: [
+          /* @__PURE__ */ jsx(ChatIllustration, { size: 104 }),
           /* @__PURE__ */ jsx("p", { style: styles6.emptyTitle, children: "No messages yet" }),
-          /* @__PURE__ */ jsx("p", { style: styles6.emptySubtitle, children: "Start the conversation about this study" })
+          /* @__PURE__ */ jsx("p", { style: styles6.emptySubtitle, children: "Start the conversation \u2014 everyone on this case will see what you write." })
         ] }),
+        messages.length === 0 && isLoading && /* @__PURE__ */ jsx("div", { style: styles6.firstLoad, children: /* @__PURE__ */ jsx(Spinner, { size: 20 }) }),
         messages.map((message, index) => {
           const currentBucket = dayBucketKey(message.insertedAt);
           const prevBucket = index === 0 ? null : dayBucketKey(messages[index - 1].insertedAt);
@@ -1974,6 +2135,7 @@ var MessageList = forwardRef(function MessageList2({
                 onPin,
                 onUnpin,
                 onCopy,
+                onRetry,
                 pinDisabled
               }
             ) })
@@ -2002,11 +2164,20 @@ var styles6 = {
     paddingBottom: "8px"
   },
   loadingMore: {
-    textAlign: "center",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "8px",
     padding: "12px",
     fontSize: "14px",
     color: "#6b7280"
   },
+  firstLoad: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: "48px 16px"
+  },
   loadMoreButton: {
     display: "block",
     margin: "0 auto 12px",
@@ -2031,11 +2202,14 @@ var styles6 = {
     fontSize: "16px",
     fontWeight: 600,
     color: "#374151",
-    margin: "0 0 4px"
+    margin: "14px 0 4px"
   },
   emptySubtitle: {
     fontSize: "14px",
-    margin: 0
+    margin: 0,
+    maxWidth: "280px",
+    lineHeight: 1.45,
+    textAlign: "center"
   },
   typingIndicator: {
     padding: "4px 16px 8px",
@@ -3039,6 +3213,64 @@ var styles11 = {
     flexShrink: 0
   }
 };
+function Toast({ toast, onDismiss, durationMs = 4e3 }) {
+  useEffect(() => {
+    if (!toast) return;
+    const timer = setTimeout(onDismiss, durationMs);
+    return () => clearTimeout(timer);
+  }, [toast, onDismiss, durationMs]);
+  if (!toast) return null;
+  return /* @__PURE__ */ jsxs("div", { style: styles12.container, role: "status", "aria-live": "polite", children: [
+    /* @__PURE__ */ jsx("span", { style: styles12.message, children: toast.message }),
+    toast.actionLabel && toast.onAction && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          toast.onAction?.();
+          onDismiss();
+        },
+        style: styles12.action,
+        children: toast.actionLabel
+      }
+    )
+  ] });
+}
+var styles12 = {
+  container: {
+    position: "absolute",
+    bottom: "76px",
+    left: "50%",
+    transform: "translateX(-50%)",
+    display: "flex",
+    alignItems: "center",
+    gap: "12px",
+    padding: "10px 14px",
+    backgroundColor: "#1e293b",
+    color: "#ffffff",
+    borderRadius: "8px",
+    boxShadow: "0 4px 12px rgba(0, 0, 0, 0.18)",
+    fontSize: "14px",
+    maxWidth: "90%",
+    zIndex: 20
+  },
+  message: {
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis"
+  },
+  action: {
+    background: "transparent",
+    border: "none",
+    color: "#93c5fd",
+    fontWeight: 600,
+    fontSize: "14px",
+    cursor: "pointer",
+    padding: "4px 6px",
+    textTransform: "uppercase",
+    letterSpacing: "0.4px"
+  }
+};
 function CollabPanel({
   orderId,
   patientData,
@@ -3049,6 +3281,7 @@ function CollabPanel({
 }) {
   const { config } = useCollab();
   const [showSettings, setShowSettings] = useState(false);
+  const [toast, setToast] = useState(null);
   const messageListRef = useRef(null);
   const {
     conversation,
@@ -3062,6 +3295,7 @@ function CollabPanel({
     replyTo,
     setReplyTo,
     sendMessage,
+    retryMessage,
     sendAudioMessage,
     sendFileMessage,
     sendTyping,
@@ -3086,10 +3320,33 @@ function CollabPanel({
     try {
       if (navigator.clipboard) {
         await navigator.clipboard.writeText(text);
+        setToast({ message: "Copied to clipboard" });
       }
     } catch {
     }
   };
+  const handlePin = async (messageId) => {
+    try {
+      await pinMessage(messageId);
+      setToast({
+        message: "Pinned",
+        actionLabel: "Undo",
+        onAction: () => {
+          void unpinMessage(messageId);
+        }
+      });
+    } catch {
+      setToast({ message: "Could not pin message" });
+    }
+  };
+  const handleUnpin = async (messageId) => {
+    try {
+      await unpinMessage(messageId);
+      setToast({ message: "Unpinned" });
+    } catch {
+      setToast({ message: "Could not unpin message" });
+    }
+  };
   const pinDisabled = pinnedMessages.length >= MAX_PINNED_MESSAGES;
   if (error) {
     return /* @__PURE__ */ jsx("div", { className, style: { ...panelStyles.container, ...style }, children: /* @__PURE__ */ jsxs("div", { style: panelStyles.errorState, children: [
@@ -3100,78 +3357,83 @@ function CollabPanel({
   if (isLoading && !conversation) {
     return /* @__PURE__ */ jsx("div", { className, style: { ...panelStyles.container, ...style }, children: /* @__PURE__ */ jsx("div", { style: panelStyles.loadingState, children: "Loading conversation..." }) });
   }
-  return /* @__PURE__ */ jsx("div", { className, style: { ...panelStyles.container, ...style }, children: showSettings && conversation ? /* @__PURE__ */ jsx(
-    ChannelSettings,
-    {
-      conversationId: conversation.id,
-      channelName: conversation.name,
-      channelPicture: conversation.picture,
-      participants,
-      currentUserId: config.userId,
-      isAdmin: channelSettings.isAdmin,
-      isUpdating: channelSettings.isUpdating,
-      error: channelSettings.error,
-      onUpdateChannel: channelSettings.updateChannel,
-      onInviteUser: channelSettings.inviteUser,
-      onRemoveUser: channelSettings.removeUser,
-      onLeaveChannel: channelSettings.leaveChannel,
-      onDeleteChannel: channelSettings.deleteChannel,
-      onClose: () => setShowSettings(false)
-    }
-  ) : /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      PatientHeader,
+  return /* @__PURE__ */ jsxs("div", { className, style: { ...panelStyles.container, ...style }, children: [
+    showSettings && conversation ? /* @__PURE__ */ jsx(
+      ChannelSettings,
       {
-        patientData,
+        conversationId: conversation.id,
+        channelName: conversation.name,
+        channelPicture: conversation.picture,
         participants,
-        onOpenDicom: handleOpenDicom,
-        onOpenSettings: () => setShowSettings(true)
-      }
-    ),
-    pinnedMessages.length > 0 && /* @__PURE__ */ jsx(
-      PinnedMessagesBar,
-      {
-        pinnedMessages,
-        onJumpTo: handleJumpToMessage,
-        onUnpin: unpinMessage
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      MessageList,
-      {
-        ref: messageListRef,
-        messages,
         currentUserId: config.userId,
-        participants,
-        showSeenBy,
-        typingUsers,
-        hasMore,
-        isLoading,
-        onLoadMore: loadMoreMessages,
-        onDeepLinkClick: handleDeepLink,
-        onMessageVisible: markAsRead,
-        onReply: setReplyTo,
-        onPin: pinMessage,
-        onUnpin: unpinMessage,
-        onCopy: handleCopy,
-        pinDisabled
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      MessageInput,
-      {
-        onSendText: sendMessage,
-        onSendAudio: sendAudioMessage,
-        onSendFile: sendFileMessage,
-        onTyping: sendTyping,
-        replyTo,
-        onCancelReply: () => setReplyTo(null)
+        isAdmin: channelSettings.isAdmin,
+        isUpdating: channelSettings.isUpdating,
+        error: channelSettings.error,
+        onUpdateChannel: channelSettings.updateChannel,
+        onInviteUser: channelSettings.inviteUser,
+        onRemoveUser: channelSettings.removeUser,
+        onLeaveChannel: channelSettings.leaveChannel,
+        onDeleteChannel: channelSettings.deleteChannel,
+        onClose: () => setShowSettings(false)
       }
-    )
-  ] }) });
+    ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        PatientHeader,
+        {
+          patientData,
+          participants,
+          onOpenDicom: handleOpenDicom,
+          onOpenSettings: () => setShowSettings(true)
+        }
+      ),
+      pinnedMessages.length > 0 && /* @__PURE__ */ jsx(
+        PinnedMessagesBar,
+        {
+          pinnedMessages,
+          onJumpTo: handleJumpToMessage,
+          onUnpin: handleUnpin
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        MessageList,
+        {
+          ref: messageListRef,
+          messages,
+          currentUserId: config.userId,
+          participants,
+          showSeenBy,
+          typingUsers,
+          hasMore,
+          isLoading,
+          onLoadMore: loadMoreMessages,
+          onDeepLinkClick: handleDeepLink,
+          onMessageVisible: markAsRead,
+          onReply: setReplyTo,
+          onPin: handlePin,
+          onUnpin: handleUnpin,
+          onCopy: handleCopy,
+          onRetry: retryMessage,
+          pinDisabled
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        MessageInput,
+        {
+          onSendText: sendMessage,
+          onSendAudio: sendAudioMessage,
+          onSendFile: sendFileMessage,
+          onTyping: sendTyping,
+          replyTo,
+          onCancelReply: () => setReplyTo(null)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Toast, { toast, onDismiss: () => setToast(null) })
+  ] });
 }
 var panelStyles = {
   container: {
+    position: "relative",
     display: "flex",
     flexDirection: "column",
     height: "100%",
@@ -3306,7 +3568,7 @@ function CollabPopup({
       ref: containerRef,
       className,
       style: {
-        ...styles12.container,
+        ...styles13.container,
         left: position.x,
         top: position.y,
         width,
@@ -3315,14 +3577,14 @@ function CollabPopup({
       },
       onMouseDown: handleMouseDown,
       children: [
-        /* @__PURE__ */ jsxs("div", { "data-drag-handle": true, style: styles12.titleBar, children: [
-          /* @__PURE__ */ jsx("span", { style: styles12.titleText, children: buildChannelName(patientData) }),
-          /* @__PURE__ */ jsxs("div", { style: styles12.titleActions, children: [
+        /* @__PURE__ */ jsxs("div", { "data-drag-handle": true, style: styles13.titleBar, children: [
+          /* @__PURE__ */ jsx("span", { style: styles13.titleText, children: buildChannelName(patientData) }),
+          /* @__PURE__ */ jsxs("div", { style: styles13.titleActions, children: [
             /* @__PURE__ */ jsx(
               "button",
               {
                 onClick: () => setIsMinimized(!isMinimized),
-                style: styles12.titleButton,
+                style: styles13.titleButton,
                 "aria-label": isMinimized ? "Expand chat" : "Minimize chat",
                 title: isMinimized ? "Expand" : "Minimize",
                 type: "button",
@@ -3333,7 +3595,7 @@ function CollabPopup({
               "button",
               {
                 onClick: onClose,
-                style: styles12.titleButton,
+                style: styles13.titleButton,
                 "aria-label": "Close chat",
                 title: "Close",
                 type: "button",
@@ -3342,12 +3604,12 @@ function CollabPopup({
             )
           ] })
         ] }),
-        !isMinimized && /* @__PURE__ */ jsx("div", { style: styles12.panelWrapper, children: /* @__PURE__ */ jsx(CollabPanel, { orderId, patientData, participantIds }) })
+        !isMinimized && /* @__PURE__ */ jsx("div", { style: styles13.panelWrapper, children: /* @__PURE__ */ jsx(CollabPanel, { orderId, patientData, participantIds }) })
       ]
     }
   );
 }
-var styles12 = {
+var styles13 = {
   container: {
     position: "fixed",
     zIndex: 9999,
@@ -3652,11 +3914,11 @@ function CollabInline({
     containerRef
   } = useInlineCollab({ orderId, patientData, participantIds, messageLimit });
   if (isLoading && !hasConversation) {
-    return /* @__PURE__ */ jsx("div", { className, style: { ...styles13.container, ...style }, children: /* @__PURE__ */ jsx("div", { style: styles13.loadingState, children: "Loading..." }) });
+    return /* @__PURE__ */ jsx("div", { className, style: { ...styles14.container, ...style }, children: /* @__PURE__ */ jsx("div", { style: styles14.loadingState, children: "Loading..." }) });
   }
-  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className, style: { ...styles13.container, ...style }, children: [
-    hasConversation && messages.length > 0 && /* @__PURE__ */ jsx("div", { style: styles13.preview, children: messages.slice(-messageLimit).map((message) => /* @__PURE__ */ jsx(InlineMessageRow, { message }, message.id)) }),
-    error && /* @__PURE__ */ jsx("div", { style: styles13.error, children: error }),
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className, style: { ...styles14.container, ...style }, children: [
+    hasConversation && messages.length > 0 && /* @__PURE__ */ jsx("div", { style: styles14.preview, children: messages.slice(-messageLimit).map((message) => /* @__PURE__ */ jsx(InlineMessageRow, { message }, message.id)) }),
+    error && /* @__PURE__ */ jsx("div", { style: styles14.error, children: error }),
     /* @__PURE__ */ jsx(
       InlineInputBar,
       {
@@ -3673,12 +3935,12 @@ function CollabInline({
 }
 function InlineMessageRow({ message }) {
   if (message.type === "system") {
-    return /* @__PURE__ */ jsx("div", { style: styles13.systemRow, children: /* @__PURE__ */ jsx("span", { style: styles13.systemText, children: message.body }) });
+    return /* @__PURE__ */ jsx("div", { style: styles14.systemRow, children: /* @__PURE__ */ jsx("span", { style: styles14.systemText, children: message.body }) });
   }
   if (message.type === "audio" && message.mediaUrl) {
-    return /* @__PURE__ */ jsxs("div", { style: styles13.messageRow, children: [
+    return /* @__PURE__ */ jsxs("div", { style: styles14.messageRow, children: [
       /* @__PURE__ */ jsx(RoleDot, { role: message.senderRole }),
-      /* @__PURE__ */ jsxs("span", { style: styles13.senderName, children: [
+      /* @__PURE__ */ jsxs("span", { style: styles14.senderName, children: [
         message.senderName,
         ":"
       ] }),
@@ -3686,13 +3948,13 @@ function InlineMessageRow({ message }) {
     ] });
   }
   const preview = renderMessagePreview(message);
-  return /* @__PURE__ */ jsxs("div", { style: styles13.messageRow, children: [
+  return /* @__PURE__ */ jsxs("div", { style: styles14.messageRow, children: [
     /* @__PURE__ */ jsx(RoleDot, { role: message.senderRole }),
-    /* @__PURE__ */ jsxs("span", { style: styles13.senderName, children: [
+    /* @__PURE__ */ jsxs("span", { style: styles14.senderName, children: [
       message.senderName,
       ":"
     ] }),
-    /* @__PURE__ */ jsx("span", { style: styles13.messageText, children: preview })
+    /* @__PURE__ */ jsx("span", { style: styles14.messageText, children: preview })
   ] });
 }
 function RoleDot({ role }) {
@@ -3702,7 +3964,7 @@ function RoleDot({ role }) {
     physician: "#059669",
     admin: "#dc2626"
   };
-  return /* @__PURE__ */ jsx("span", { style: { ...styles13.roleDot, backgroundColor: colors[role] } });
+  return /* @__PURE__ */ jsx("span", { style: { ...styles14.roleDot, backgroundColor: colors[role] } });
 }
 function InlineAudioPlayer({ url, duration }) {
   const audioRef = useRef(null);
@@ -3746,27 +4008,27 @@ function InlineAudioPlayer({ url, duration }) {
   const total = duration ?? 0;
   const remaining = Math.max(0, total - Math.floor(currentTime));
   const displayTime = isPlaying ? remaining : total;
-  return /* @__PURE__ */ jsxs("span", { style: styles13.audioPlayer, children: [
+  return /* @__PURE__ */ jsxs("span", { style: styles14.audioPlayer, children: [
     /* @__PURE__ */ jsx(
       "button",
       {
         onClick: toggle,
-        style: styles13.audioButton,
+        style: styles14.audioButton,
         title: isPlaying ? "Pause" : "Play",
         type: "button",
         children: isPlaying ? "\u23F8" : "\u25B6"
       }
     ),
-    /* @__PURE__ */ jsxs("span", { style: styles13.audioWaveform, children: [
-      /* @__PURE__ */ jsx("span", { style: { ...styles13.waveBar, height: "40%" } }),
-      /* @__PURE__ */ jsx("span", { style: { ...styles13.waveBar, height: "80%" } }),
-      /* @__PURE__ */ jsx("span", { style: { ...styles13.waveBar, height: "60%" } }),
-      /* @__PURE__ */ jsx("span", { style: { ...styles13.waveBar, height: "90%" } }),
-      /* @__PURE__ */ jsx("span", { style: { ...styles13.waveBar, height: "50%" } }),
-      /* @__PURE__ */ jsx("span", { style: { ...styles13.waveBar, height: "70%" } }),
-      /* @__PURE__ */ jsx("span", { style: { ...styles13.waveBar, height: "40%" } })
+    /* @__PURE__ */ jsxs("span", { style: styles14.audioWaveform, children: [
+      /* @__PURE__ */ jsx("span", { style: { ...styles14.waveBar, height: "40%" } }),
+      /* @__PURE__ */ jsx("span", { style: { ...styles14.waveBar, height: "80%" } }),
+      /* @__PURE__ */ jsx("span", { style: { ...styles14.waveBar, height: "60%" } }),
+      /* @__PURE__ */ jsx("span", { style: { ...styles14.waveBar, height: "90%" } }),
+      /* @__PURE__ */ jsx("span", { style: { ...styles14.waveBar, height: "50%" } }),
+      /* @__PURE__ */ jsx("span", { style: { ...styles14.waveBar, height: "70%" } }),
+      /* @__PURE__ */ jsx("span", { style: { ...styles14.waveBar, height: "40%" } })
     ] }),
-    /* @__PURE__ */ jsx("span", { style: styles13.audioDuration, children: formatDuration2(displayTime) }),
+    /* @__PURE__ */ jsx("span", { style: styles14.audioDuration, children: formatDuration2(displayTime) }),
     /* @__PURE__ */ jsx("audio", { ref: audioRef, src: url, preload: "metadata" })
   ] });
 }
@@ -3822,7 +4084,7 @@ function InlineInputBar({
     },
     [handleSend]
   );
-  return /* @__PURE__ */ jsxs("div", { style: styles13.inputBar, children: [
+  return /* @__PURE__ */ jsxs("div", { style: styles14.inputBar, children: [
     /* @__PURE__ */ jsx(
       "input",
       {
@@ -3833,17 +4095,17 @@ function InlineInputBar({
         onKeyDown: handleKeyDown,
         placeholder,
         disabled: isSending,
-        style: styles13.input
+        style: styles14.input
       }
     ),
-    unreadCount > 0 && /* @__PURE__ */ jsx("span", { style: styles13.unreadBadge, title: `${unreadCount} unread`, children: unreadCount > 99 ? "99+" : unreadCount }),
-    isLive && /* @__PURE__ */ jsx("span", { style: styles13.liveDot, title: "Live updates active" }),
+    unreadCount > 0 && /* @__PURE__ */ jsx("span", { style: styles14.unreadBadge, title: `${unreadCount} unread`, children: unreadCount > 99 ? "99+" : unreadCount }),
+    isLive && /* @__PURE__ */ jsx("span", { style: styles14.liveDot, title: "Live updates active" }),
     text.trim() && /* @__PURE__ */ jsx(
       "button",
       {
         onClick: handleSend,
         disabled: isSending,
-        style: styles13.sendButton,
+        style: styles14.sendButton,
         title: "Send message",
         type: "button",
         children: "\u27A4"
@@ -3853,7 +4115,7 @@ function InlineInputBar({
       "button",
       {
         onClick: onExpand,
-        style: styles13.expandButton,
+        style: styles14.expandButton,
         title: "Expand to full chat",
         type: "button",
         children: "\u26F6"
@@ -3861,7 +4123,7 @@ function InlineInputBar({
     )
   ] });
 }
-var styles13 = {
+var styles14 = {
   container: {
     display: "flex",
     flexDirection: "column",
@@ -4128,24 +4390,24 @@ function ConversationListItem({
       className,
       onClick,
       style: {
-        ...styles14.container,
-        ...isSelected ? styles14.selected : {},
-        ...hasUnread ? styles14.unread : {}
+        ...styles15.container,
+        ...isSelected ? styles15.selected : {},
+        ...hasUnread ? styles15.unread : {}
       },
       type: "button",
       children: [
-        /* @__PURE__ */ jsxs("div", { style: styles14.avatarWrapper, children: [
-          item.picture ? /* @__PURE__ */ jsx("img", { src: item.picture, alt: "", style: styles14.avatar }) : /* @__PURE__ */ jsx("div", { style: styles14.avatarFallback, children: (displayName).charAt(0).toUpperCase() }),
-          hasUnread && /* @__PURE__ */ jsx("span", { style: styles14.unreadDot })
+        /* @__PURE__ */ jsxs("div", { style: styles15.avatarWrapper, children: [
+          item.picture ? /* @__PURE__ */ jsx("img", { src: item.picture, alt: "", style: styles15.avatar }) : /* @__PURE__ */ jsx("div", { style: styles15.avatarFallback, children: (displayName).charAt(0).toUpperCase() }),
+          hasUnread && /* @__PURE__ */ jsx("span", { style: styles15.unreadDot })
         ] }),
-        /* @__PURE__ */ jsxs("div", { style: styles14.content, children: [
-          /* @__PURE__ */ jsxs("div", { style: styles14.topRow, children: [
+        /* @__PURE__ */ jsxs("div", { style: styles15.content, children: [
+          /* @__PURE__ */ jsxs("div", { style: styles15.topRow, children: [
             /* @__PURE__ */ jsx(
               "span",
               {
                 style: {
-                  ...styles14.name,
-                  ...hasUnread ? styles14.nameUnread : {}
+                  ...styles15.name,
+                  ...hasUnread ? styles15.nameUnread : {}
                 },
                 children: displayName
               }
@@ -4154,25 +4416,25 @@ function ConversationListItem({
               "span",
               {
                 style: {
-                  ...styles14.time,
-                  ...hasUnread ? styles14.timeUnread : {}
+                  ...styles15.time,
+                  ...hasUnread ? styles15.timeUnread : {}
                 },
                 children: formatInboxTimestamp(item.lastActivityAt)
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs("div", { style: styles14.bottomRow, children: [
+          /* @__PURE__ */ jsxs("div", { style: styles15.bottomRow, children: [
             /* @__PURE__ */ jsx(
               "span",
               {
                 style: {
-                  ...styles14.preview,
-                  ...hasUnread ? styles14.previewUnread : {}
+                  ...styles15.preview,
+                  ...hasUnread ? styles15.previewUnread : {}
                 },
                 children: renderLastMessagePreview(item.lastMessage)
               }
             ),
-            hasUnread && /* @__PURE__ */ jsx("span", { style: styles14.badge, children: item.unreadCount > 99 ? "99+" : item.unreadCount })
+            hasUnread && /* @__PURE__ */ jsx("span", { style: styles15.badge, children: item.unreadCount > 99 ? "99+" : item.unreadCount })
           ] })
         ] })
       ]
@@ -4200,7 +4462,7 @@ function renderLastMessagePreview(message) {
     }
   }
 }
-var styles14 = {
+var styles15 = {
   container: {
     display: "flex",
     alignItems: "center",
@@ -4347,30 +4609,30 @@ function ConversationList({
     return result;
   }, [conversations, query, showUnreadOnly]);
   const totalUnread = conversations.reduce((sum, c) => sum + c.unreadCount, 0);
-  return /* @__PURE__ */ jsxs("div", { className, style: styles15.container, children: [
-    /* @__PURE__ */ jsxs("div", { style: styles15.header, children: [
-      /* @__PURE__ */ jsxs("div", { style: styles15.titleRow, children: [
-        /* @__PURE__ */ jsx("h3", { style: styles15.title, children: title }),
-        totalUnread > 0 && /* @__PURE__ */ jsx("span", { style: styles15.totalBadge, children: totalUnread })
+  return /* @__PURE__ */ jsxs("div", { className, style: styles16.container, children: [
+    /* @__PURE__ */ jsxs("div", { style: styles16.header, children: [
+      /* @__PURE__ */ jsxs("div", { style: styles16.titleRow, children: [
+        /* @__PURE__ */ jsx("h3", { style: styles16.title, children: title }),
+        totalUnread > 0 && /* @__PURE__ */ jsx("span", { style: styles16.totalBadge, children: totalUnread })
       ] }),
-      /* @__PURE__ */ jsx("div", { style: styles15.searchRow, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { style: styles16.searchRow, children: /* @__PURE__ */ jsx(
         "input",
         {
           type: "text",
           value: query,
           onChange: (e) => setQuery(e.target.value),
           placeholder: "Search patients or channels...",
-          style: styles15.searchInput
+          style: styles16.searchInput
         }
       ) }),
-      /* @__PURE__ */ jsxs("div", { style: styles15.filterRow, children: [
+      /* @__PURE__ */ jsxs("div", { style: styles16.filterRow, children: [
         /* @__PURE__ */ jsx(
           "button",
           {
             onClick: () => setShowUnreadOnly(false),
             style: {
-              ...styles15.filterButton,
-              ...!showUnreadOnly ? styles15.filterButtonActive : {}
+              ...styles16.filterButton,
+              ...!showUnreadOnly ? styles16.filterButtonActive : {}
             },
             type: "button",
             children: "All"
@@ -4381,8 +4643,8 @@ function ConversationList({
           {
             onClick: () => setShowUnreadOnly(true),
             style: {
-              ...styles15.filterButton,
-              ...showUnreadOnly ? styles15.filterButtonActive : {}
+              ...styles16.filterButton,
+              ...showUnreadOnly ? styles16.filterButtonActive : {}
             },
             type: "button",
             children: [
@@ -4393,10 +4655,10 @@ function ConversationList({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxs("div", { style: styles15.list, children: [
-      isLoading && /* @__PURE__ */ jsx("div", { style: styles15.state, children: "Loading conversations..." }),
-      error && /* @__PURE__ */ jsx("div", { style: styles15.errorState, children: error }),
-      !isLoading && !error && filtered.length === 0 && /* @__PURE__ */ jsx("div", { style: styles15.state, children: query ? "No matching conversations" : "No conversations yet" }),
+    /* @__PURE__ */ jsxs("div", { style: styles16.list, children: [
+      isLoading && /* @__PURE__ */ jsx("div", { style: styles16.state, children: "Loading conversations..." }),
+      error && /* @__PURE__ */ jsx("div", { style: styles16.errorState, children: error }),
+      !isLoading && !error && filtered.length === 0 && /* @__PURE__ */ jsx("div", { style: styles16.state, children: query ? "No matching conversations" : "No conversations yet" }),
       filtered.map((item) => /* @__PURE__ */ jsx(
         ConversationListItem,
         {
@@ -4409,7 +4671,7 @@ function ConversationList({
     ] })
   ] });
 }
-var styles15 = {
+var styles16 = {
   container: {
     display: "flex",
     flexDirection: "column",
@@ -4514,8 +4776,8 @@ function CollabInbox({
     setSelectedId(item.id);
     onSelectConversation?.(item);
   };
-  return /* @__PURE__ */ jsxs("div", { className, style: { ...styles16.container, ...style }, children: [
-    /* @__PURE__ */ jsx("div", { style: styles16.sidebar, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs("div", { className, style: { ...styles17.container, ...style }, children: [
+    /* @__PURE__ */ jsx("div", { style: styles17.sidebar, children: /* @__PURE__ */ jsx(
       ConversationList,
       {
         conversations,
@@ -4526,13 +4788,13 @@ function CollabInbox({
         title
       }
     ) }),
-    /* @__PURE__ */ jsx("div", { style: styles16.main, children: selected ? /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { style: styles17.main, children: selected ? /* @__PURE__ */ jsx(
       CollabPanel,
       {
         orderId: selected.orderId,
         patientData: buildPatientData(selected),
         showSeenBy: true,
-        style: styles16.panel
+        style: styles17.panel
       },
       selected.id
     ) : /* @__PURE__ */ jsx(EmptyState, { hasAny: conversations.length > 0 }) })
@@ -4546,13 +4808,13 @@ function buildPatientData(item) {
   };
 }
 function EmptyState({ hasAny }) {
-  return /* @__PURE__ */ jsxs("div", { style: styles16.empty, children: [
-    /* @__PURE__ */ jsx("div", { style: styles16.emptyIcon, children: "\u{1F4AC}" }),
-    /* @__PURE__ */ jsx("h3", { style: styles16.emptyTitle, children: hasAny ? "Select a conversation" : "No conversations yet" }),
-    /* @__PURE__ */ jsx("p", { style: styles16.emptySubtitle, children: hasAny ? "Pick a patient from the list to start collaborating" : "Conversations appear here once you start messaging about a case" })
+  return /* @__PURE__ */ jsxs("div", { style: styles17.empty, children: [
+    /* @__PURE__ */ jsx("div", { style: styles17.emptyIcon, children: "\u{1F4AC}" }),
+    /* @__PURE__ */ jsx("h3", { style: styles17.emptyTitle, children: hasAny ? "Select a conversation" : "No conversations yet" }),
+    /* @__PURE__ */ jsx("p", { style: styles17.emptySubtitle, children: hasAny ? "Pick a patient from the list to start collaborating" : "Conversations appear here once you start messaging about a case" })
   ] });
 }
-var styles16 = {
+var styles17 = {
   container: {
     display: "flex",
     height: "100%",