@natoe/colab 0.1.0

package/dist/index.mjs

@@ -0,0 +1,4893 @@
+import { createContext, forwardRef, useRef, useImperativeHandle, useEffect, useCallback, useState, useContext, useMemo } from 'react';
+import { Socket, Presence } from 'phoenix';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+// src/components/CollabPanel.tsx
+
+// src/core/constants.ts
+var EVENTS = {
+  MESSAGE_NEW: "message:new",
+  MESSAGE_READ: "message:read",
+  MESSAGE_PINNED: "message:pinned",
+  MESSAGE_UNPINNED: "message:unpinned",
+  USER_TYPING: "user:typing",
+  USER_JOINED: "user:joined",
+  USER_LEFT: "user:left",
+  CHANNEL_UPDATED: "channel:updated",
+  CHANNEL_DELETED: "channel:deleted",
+  PRESENCE_STATE: "presence_state",
+  PRESENCE_DIFF: "presence_diff"
+};
+var MAX_PINNED_MESSAGES = 3;
+var MESSAGE_TYPES = {
+  TEXT: "text",
+  AUDIO: "audio",
+  IMAGE: "image",
+  FILE: "file",
+  SYSTEM: "system",
+  DEEP_LINK: "deep_link"
+};
+var DEEP_LINK_PREFIX = "natoe://";
+var TYPING_DEBOUNCE_MS = 2e3;
+var MESSAGES_PAGE_SIZE = 30;
+var AUDIO_MIME_TYPE = "audio/webm;codecs=opus";
+var SUPPORTED_IMAGE_TYPES = ["image/jpeg", "image/png", "image/gif", "image/webp"];
+var MAX_FILE_SIZE = 20 * 1024 * 1024;
+
+// src/core/caseConvert.ts
+function snakeToCamel(input) {
+  if (Array.isArray(input)) {
+    return input.map((item) => snakeToCamel(item));
+  }
+  if (input !== null && typeof input === "object") {
+    const source = input;
+    const out = {};
+    for (const key of Object.keys(source)) {
+      const camelKey = toCamelKey(key);
+      out[camelKey] = snakeToCamel(source[key]);
+    }
+    return out;
+  }
+  return input;
+}
+function toCamelKey(key) {
+  if (!key.includes("_")) return key;
+  return key.replace(/_([a-zA-Z0-9])/g, (_, c) => c.toUpperCase());
+}
+
+// src/core/socket.ts
+var CollabSocket = class {
+  constructor() {
+    this.socket = null;
+    this.channels = /* @__PURE__ */ new Map();
+    this.presences = /* @__PURE__ */ new Map();
+    this.userChannel = null;
+    this.config = null;
+    this.onUnreadUpdate = null;
+  }
+  /** Connect to Phoenix WebSocket server. Idempotent — safe to call when
+   * the token becomes available later (e.g. after async login) without
+   * stacking up multiple open sockets. */
+  connect(config) {
+    this.config = config;
+    if (!config.getToken()) {
+      return;
+    }
+    if (this.socket) {
+      if (this.socket.isConnected()) return;
+      try {
+        this.socket.disconnect();
+      } catch {
+      }
+      this.channels.clear();
+      this.presences.clear();
+      this.userChannel = null;
+    }
+    this.socket = new Socket(config.socketUrl, {
+      params: () => ({ token: config.getToken() })
+    });
+    this.socket.onError((err) => {
+      const closeEvent = err;
+      config.onError?.({
+        code: "SOCKET_ERROR",
+        message: "WebSocket connection error",
+        details: closeEvent ? {
+          type: closeEvent.type,
+          code: closeEvent.code,
+          reason: closeEvent.reason,
+          wasClean: closeEvent.wasClean
+        } : err
+      });
+    });
+    this.socket.onClose((event) => {
+      config.onError?.({
+        code: "SOCKET_CLOSED",
+        message: `Socket closed (code ${event?.code ?? "unknown"})`,
+        details: event ? { code: event.code, reason: event.reason, wasClean: event.wasClean } : void 0
+      });
+    });
+    this.socket.connect();
+    this.joinUserChannel();
+  }
+  /** Subscribe to user-level events (unread counts, notifications) */
+  joinUserChannel() {
+    if (!this.socket || !this.config) return;
+    this.userChannel = this.socket.channel("user_notifications", {});
+    this.userChannel.on("unread_update", (payload) => {
+      this.onUnreadUpdate?.(payload);
+    });
+    this.userChannel.join().receive("ok", () => {
+    }).receive("error", (reason) => {
+      this.config?.onError?.({
+        code: "USER_CHANNEL_ERROR",
+        message: "Failed to join user channel",
+        details: reason
+      });
+    });
+  }
+  /** Register callback for unread count changes */
+  onUnreadCountUpdate(callback) {
+    this.onUnreadUpdate = callback;
+  }
+  /** Join a conversation channel and subscribe to events */
+  joinConversation(conversationId, callbacks) {
+    if (!this.socket) return null;
+    if (this.channels.has(conversationId)) {
+      return this.channels.get(conversationId);
+    }
+    const channel = this.socket.channel(`conversation:${conversationId}`, {});
+    if (callbacks.onMessage) {
+      channel.on(EVENTS.MESSAGE_NEW, (payload) => {
+        callbacks.onMessage(snakeToCamel(payload));
+      });
+    }
+    if (callbacks.onTyping) {
+      channel.on(EVENTS.USER_TYPING, (payload) => {
+        callbacks.onTyping(snakeToCamel(payload));
+      });
+    }
+    if (callbacks.onUserJoined) {
+      channel.on(EVENTS.USER_JOINED, (payload) => {
+        callbacks.onUserJoined(snakeToCamel(payload));
+      });
+    }
+    if (callbacks.onUserLeft) {
+      channel.on(EVENTS.USER_LEFT, (payload) => {
+        callbacks.onUserLeft(snakeToCamel(payload));
+      });
+    }
+    if (callbacks.onChannelUpdated) {
+      channel.on(EVENTS.CHANNEL_UPDATED, (payload) => {
+        callbacks.onChannelUpdated(snakeToCamel(payload));
+      });
+    }
+    if (callbacks.onChannelDeleted) {
+      channel.on(EVENTS.CHANNEL_DELETED, () => {
+        callbacks.onChannelDeleted();
+      });
+    }
+    if (callbacks.onMessageRead) {
+      channel.on(EVENTS.MESSAGE_READ, (payload) => {
+        callbacks.onMessageRead(snakeToCamel(payload));
+      });
+    }
+    if (callbacks.onMessagePinned) {
+      channel.on(EVENTS.MESSAGE_PINNED, (payload) => {
+        callbacks.onMessagePinned(snakeToCamel(payload));
+      });
+    }
+    if (callbacks.onMessageUnpinned) {
+      channel.on(EVENTS.MESSAGE_UNPINNED, (payload) => {
+        callbacks.onMessageUnpinned(snakeToCamel(payload));
+      });
+    }
+    if (callbacks.onPresence) {
+      const presence = new Presence(channel);
+      presence.onSync(() => {
+        const online = {};
+        presence.list((id) => {
+          online[id] = { userId: id, isOnline: true };
+        });
+        callbacks.onPresence(online);
+      });
+      this.presences.set(conversationId, presence);
+    }
+    channel.join().receive("ok", () => {
+    }).receive("error", (reason) => {
+      this.config?.onError?.({
+        code: "CHANNEL_JOIN_ERROR",
+        message: `Failed to join conversation ${conversationId}`,
+        details: reason
+      });
+    });
+    this.channels.set(conversationId, channel);
+    return channel;
+  }
+  /** Leave a conversation channel */
+  leaveConversation(conversationId) {
+    const channel = this.channels.get(conversationId);
+    if (channel) {
+      channel.leave();
+      this.channels.delete(conversationId);
+      this.presences.delete(conversationId);
+    }
+  }
+  /** Send a message to a conversation.
+   *
+   * Phoenix buffers pushes fired while a channel is still joining and
+   * replays them on successful join. The default per-push timeout is 10s,
+   * which is tight on slow dev backends — we bump to 30s so a late join
+   * doesn't surface as a "timed out" error to a message that ultimately
+   * persists. The caller still gets 'ok' once the server acks.
+   */
+  sendMessage(conversationId, payload) {
+    return new Promise((resolve, reject) => {
+      const channel = this.channels.get(conversationId);
+      if (!channel) {
+        reject({ code: "NOT_JOINED", message: "Not joined to this conversation" });
+        return;
+      }
+      if (!this.socket?.isConnected()) {
+        reject({
+          code: "SOCKET_DISCONNECTED",
+          message: "Cannot send \u2014 chat server not connected"
+        });
+        return;
+      }
+      channel.push(EVENTS.MESSAGE_NEW, payload, 3e4).receive("ok", (response) => resolve(response)).receive(
+        "error",
+        (reason) => reject({ code: "SEND_ERROR", message: "Failed to send message", details: reason })
+      ).receive(
+        "timeout",
+        () => reject({ code: "TIMEOUT", message: "Message send timed out" })
+      );
+    });
+  }
+  /** Broadcast typing indicator */
+  sendTyping(conversationId, isTyping) {
+    const channel = this.channels.get(conversationId);
+    channel?.push(EVENTS.USER_TYPING, {
+      userId: this.config?.userId,
+      userName: this.config?.userName,
+      isTyping
+    });
+  }
+  /** Mark messages as read */
+  markAsRead(conversationId, messageId) {
+    const channel = this.channels.get(conversationId);
+    channel?.push(EVENTS.MESSAGE_READ, {
+      messageId,
+      userId: this.config?.userId
+    });
+  }
+  // ── Channel Management ──
+  /** Add a user to the conversation */
+  inviteUser(conversationId, payload) {
+    return this.channelPush(conversationId, "invite_user", payload);
+  }
+  /** Remove a user from the conversation */
+  removeUser(conversationId, userId) {
+    return this.channelPush(conversationId, "remove_user", { userId });
+  }
+  /** Update channel name/picture */
+  updateChannel(conversationId, payload) {
+    return this.channelPush(conversationId, "update_channel", payload);
+  }
+  /** Delete channel (admin only) */
+  deleteChannel(conversationId) {
+    return this.channelPush(conversationId, "delete_channel", {});
+  }
+  /** Pin a message in the conversation (max MAX_PINNED_MESSAGES) */
+  pinMessage(conversationId, messageId) {
+    return this.channelPush(conversationId, "pin_message", { messageId });
+  }
+  /** Unpin a message in the conversation */
+  unpinMessage(conversationId, messageId) {
+    return this.channelPush(conversationId, "unpin_message", { messageId });
+  }
+  /** Generic push with promise wrapper */
+  channelPush(conversationId, event, payload) {
+    return new Promise((resolve, reject) => {
+      const channel = this.channels.get(conversationId);
+      if (!channel) {
+        reject({ code: "NOT_JOINED", message: "Not joined to this conversation" });
+        return;
+      }
+      channel.push(event, payload).receive("ok", (response) => resolve(response)).receive(
+        "error",
+        (reason) => reject({ code: "CHANNEL_ERROR", message: `Failed: ${event}`, details: reason })
+      );
+    });
+  }
+  /** Check if connected */
+  isConnected() {
+    return this.socket?.isConnected() ?? false;
+  }
+  /** Disconnect socket and leave all channels */
+  disconnect() {
+    this.channels.forEach((channel) => channel.leave());
+    this.channels.clear();
+    this.presences.clear();
+    this.userChannel?.leave();
+    this.socket?.disconnect();
+    this.socket = null;
+    this.config = null;
+  }
+};
+var CollabContext = createContext(null);
+function useCollab() {
+  const context = useContext(CollabContext);
+  if (!context) {
+    throw new Error("useCollab must be used within a <CollabProvider>");
+  }
+  return context;
+}
+function CollabProvider({ config, apiBaseUrl, children }) {
+  const [socket, setSocket] = useState(() => {
+    if (typeof window === "undefined") return null;
+    return new CollabSocket();
+  });
+  const [unreadCounts, setUnreadCounts] = useState({});
+  const pendingOrderIds = useRef(/* @__PURE__ */ new Set());
+  const pendingResolvers = useRef(/* @__PURE__ */ new Map());
+  const previewCache = useRef(/* @__PURE__ */ new Map());
+  const batchScheduled = useRef(false);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    let s = socket;
+    if (!s) {
+      s = new CollabSocket();
+      setSocket(s);
+    }
+    s.onUnreadCountUpdate((counts) => {
+      setUnreadCounts(counts);
+      previewCache.current.clear();
+    });
+    if (!s.isConnected()) {
+      s.connect(config);
+    }
+  }, [config.socketUrl, config.userId]);
+  const authHeaders = useCallback(
+    () => ({
+      Authorization: `Bearer ${config.getToken()}`,
+      "Content-Type": "application/json"
+    }),
+    [config]
+  );
+  const flushPreviewBatch = useCallback(async () => {
+    const orderIds = Array.from(pendingOrderIds.current);
+    const resolvers = new Map(pendingResolvers.current);
+    pendingOrderIds.current.clear();
+    pendingResolvers.current.clear();
+    batchScheduled.current = false;
+    if (orderIds.length === 0) return;
+    try {
+      const query = orderIds.map((id) => `order_ids[]=${encodeURIComponent(id)}`).join("&");
+      const response = await fetch(`${apiBaseUrl}/api/natoe-colab/conversations/previews?${query}`, {
+        headers: authHeaders()
+      });
+      if (!response.ok) throw new Error(`Preview batch failed: ${response.status}`);
+      const data = snakeToCamel(await response.json());
+      orderIds.forEach((orderId) => {
+        const preview = data.previews[orderId] ?? null;
+        previewCache.current.set(orderId, preview);
+        resolvers.get(orderId)?.forEach((resolve) => resolve(preview));
+      });
+    } catch (error) {
+      config.onError?.({
+        code: "PREVIEW_BATCH_ERROR",
+        message: "Failed to fetch conversation previews",
+        details: error
+      });
+      orderIds.forEach((orderId) => {
+        resolvers.get(orderId)?.forEach((resolve) => resolve(null));
+      });
+    }
+  }, [apiBaseUrl, authHeaders, config]);
+  const requestPreview = useCallback(
+    (orderId) => {
+      if (previewCache.current.has(orderId)) {
+        return Promise.resolve(previewCache.current.get(orderId) ?? null);
+      }
+      return new Promise((resolve) => {
+        pendingOrderIds.current.add(orderId);
+        const existing = pendingResolvers.current.get(orderId) || [];
+        existing.push(resolve);
+        pendingResolvers.current.set(orderId, existing);
+        if (!batchScheduled.current) {
+          batchScheduled.current = true;
+          queueMicrotask(flushPreviewBatch);
+        }
+      });
+    },
+    [flushPreviewBatch]
+  );
+  const invalidatePreview = useCallback((orderId) => {
+    previewCache.current.delete(orderId);
+  }, []);
+  const fetchMessages = useCallback(
+    async (conversationId, options = {}) => {
+      const limit = options.limit ?? MESSAGES_PAGE_SIZE;
+      const params = new URLSearchParams({ limit: String(limit) });
+      if (options.before) params.set("before", options.before);
+      const response = await fetch(
+        `${apiBaseUrl}/api/natoe-colab/conversations/${conversationId}/messages?${params.toString()}`,
+        { headers: authHeaders() }
+      );
+      if (!response.ok) {
+        throw { code: "FETCH_ERROR", message: "Failed to fetch messages", status: response.status };
+      }
+      return snakeToCamel(await response.json());
+    },
+    [apiBaseUrl, authHeaders]
+  );
+  const createConversationWithMessage = useCallback(
+    async (orderId, message, options) => {
+      if (!orderId || !orderId.trim()) {
+        throw {
+          code: "INVALID_ORDER_ID",
+          message: "Cannot create conversation: orderId is empty. Host app passed an order with no orderId/mainOrderId set."
+        };
+      }
+      const response = await fetch(`${apiBaseUrl}/api/natoe-colab/orders/${orderId}/messages`, {
+        method: "POST",
+        headers: authHeaders(),
+        body: JSON.stringify({
+          message,
+          conversation: {
+            name: options.name,
+            participant_ids: options.participantIds ?? []
+          }
+        })
+      });
+      if (!response.ok) {
+        const error = await response.json().catch(() => ({}));
+        throw { code: "CREATE_ERROR", message: "Failed to create conversation", details: error };
+      }
+      const data = snakeToCamel(await response.json());
+      previewCache.current.delete(orderId);
+      return data;
+    },
+    [apiBaseUrl, authHeaders]
+  );
+  const addParticipant = useCallback(
+    async (conversationId, userId) => {
+      const response = await fetch(
+        `${apiBaseUrl}/api/natoe-colab/conversations/${conversationId}/participants`,
+        {
+          method: "POST",
+          headers: authHeaders(),
+          body: JSON.stringify({ user_id: userId })
+        }
+      );
+      if (!response.ok) {
+        throw { code: "ADD_PARTICIPANT_ERROR", message: "Failed to add participant" };
+      }
+    },
+    [apiBaseUrl, authHeaders]
+  );
+  const removeParticipant = useCallback(
+    async (conversationId, userId) => {
+      const response = await fetch(
+        `${apiBaseUrl}/api/natoe-colab/conversations/${conversationId}/participants/${userId}`,
+        {
+          method: "DELETE",
+          headers: authHeaders()
+        }
+      );
+      if (!response.ok) {
+        throw { code: "REMOVE_PARTICIPANT_ERROR", message: "Failed to remove participant" };
+      }
+    },
+    [apiBaseUrl, authHeaders]
+  );
+  const fetchConversationList = useCallback(async () => {
+    const response = await fetch(`${apiBaseUrl}/api/natoe-colab/conversations`, {
+      headers: authHeaders()
+    });
+    if (!response.ok) {
+      throw { code: "LIST_ERROR", message: "Failed to fetch conversation list" };
+    }
+    return snakeToCamel(await response.json());
+  }, [apiBaseUrl, authHeaders]);
+  const pinMessage = useCallback(
+    async (conversationId, messageId) => {
+      const response = await fetch(
+        `${apiBaseUrl}/api/natoe-colab/conversations/${conversationId}/messages/${messageId}/pin`,
+        {
+          method: "POST",
+          headers: authHeaders()
+        }
+      );
+      if (!response.ok) {
+        const error = await response.json().catch(() => ({}));
+        throw { code: "PIN_ERROR", message: "Failed to pin message", details: error };
+      }
+    },
+    [apiBaseUrl, authHeaders]
+  );
+  const unpinMessage = useCallback(
+    async (conversationId, messageId) => {
+      const response = await fetch(
+        `${apiBaseUrl}/api/natoe-colab/conversations/${conversationId}/messages/${messageId}/pin`,
+        {
+          method: "DELETE",
+          headers: authHeaders()
+        }
+      );
+      if (!response.ok) {
+        throw { code: "UNPIN_ERROR", message: "Failed to unpin message" };
+      }
+    },
+    [apiBaseUrl, authHeaders]
+  );
+  const fetchPinnedMessages = useCallback(
+    async (conversationId) => {
+      const response = await fetch(
+        `${apiBaseUrl}/api/natoe-colab/conversations/${conversationId}/pinned`,
+        { headers: authHeaders() }
+      );
+      if (!response.ok) {
+        throw { code: "FETCH_PINNED_ERROR", message: "Failed to fetch pinned messages" };
+      }
+      return snakeToCamel(await response.json());
+    },
+    [apiBaseUrl, authHeaders]
+  );
+  const totalUnread = Object.values(unreadCounts).reduce((sum, count) => sum + count, 0);
+  if (!socket) return null;
+  return /* @__PURE__ */ jsx(
+    CollabContext.Provider,
+    {
+      value: {
+        socket,
+        config,
+        apiBaseUrl,
+        totalUnread,
+        requestPreview,
+        invalidatePreview,
+        fetchMessages,
+        createConversationWithMessage,
+        addParticipant,
+        removeParticipant,
+        fetchConversationList,
+        pinMessage,
+        unpinMessage,
+        fetchPinnedMessages
+      },
+      children
+    }
+  );
+}
+
+// src/core/channelName.ts
+function buildChannelName(patientData) {
+  const patientPart = patientData.patientName?.trim() || "Unknown";
+  const labPart = patientData.labName?.trim()?.slice(0, 24) || "";
+  const last4 = (patientData.displayOrderId ?? "").trim().slice(-4) || "0000";
+  return `${patientPart} - ${labPart} - ${last4}`;
+}
+
+// src/hooks/useConversation.ts
+function useConversation({
+  orderId,
+  patientData,
+  participantIds = [],
+  loadHistory = true
+}) {
+  const {
+    socket,
+    config,
+    requestPreview,
+    invalidatePreview,
+    fetchMessages,
+    createConversationWithMessage,
+    pinMessage: pinMessageApi,
+    unpinMessage: unpinMessageApi
+  } = useCollab();
+  const [conversation, setConversation] = useState(null);
+  const [messages, setMessages] = useState([]);
+  const [pinnedMessages, setPinnedMessages] = useState([]);
+  const [participants, setParticipants] = useState([]);
+  const [typingUsers, setTypingUsers] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [hasMore, setHasMore] = useState(true);
+  const [error, setError] = useState(null);
+  const [isConnected, setIsConnected] = useState(false);
+  const [replyTo, setReplyTo] = useState(null);
+  const joinedConversationId = useRef(null);
+  const typingTimers = useRef(/* @__PURE__ */ new Map());
+  const ensureConversationInFlight = useRef(null);
+  const markedReadIdsRef = useRef(/* @__PURE__ */ new Set());
+  const buildName = useCallback(
+    () => buildChannelName(patientData),
+    [patientData]
+  );
+  const joinChannel = useCallback(
+    (conv) => {
+      if (joinedConversationId.current === conv.id) return;
+      socket.joinConversation(conv.id, {
+        // Dedupe by id so an optimistic message (added client-side on send)
+        // doesn't double up when the server's broadcast arrives.
+        onMessage: (msg) => setMessages((prev) => {
+          if (prev.some((m) => m.id === msg.id)) return prev;
+          const optimisticIdx = prev.findIndex(
+            (m) => m.id.startsWith("pending-") && m.senderId === msg.senderId && m.body === msg.body
+          );
+          if (optimisticIdx >= 0) {
+            const next = prev.slice();
+            next[optimisticIdx] = msg;
+            return next;
+          }
+          return [...prev, msg];
+        }),
+        onTyping: (event) => {
+          if (event.userId === config.userId) return;
+          if (event.isTyping) {
+            setTypingUsers((prev) => {
+              const exists = prev.some((t) => t.userId === event.userId);
+              return exists ? prev : [...prev, event];
+            });
+            const existingTimer = typingTimers.current.get(event.userId);
+            if (existingTimer) clearTimeout(existingTimer);
+            const timer = setTimeout(() => {
+              setTypingUsers((prev) => prev.filter((t) => t.userId !== event.userId));
+              typingTimers.current.delete(event.userId);
+            }, 3e3);
+            typingTimers.current.set(event.userId, timer);
+          } else {
+            setTypingUsers((prev) => prev.filter((t) => t.userId !== event.userId));
+            const timer = typingTimers.current.get(event.userId);
+            if (timer) clearTimeout(timer);
+            typingTimers.current.delete(event.userId);
+          }
+        },
+        onUserJoined: (participant) => {
+          setParticipants(
+            (prev) => prev.some((p) => p.userId === participant.userId) ? prev : [...prev, participant]
+          );
+        },
+        onUserLeft: (participant) => {
+          setParticipants((prev) => prev.filter((p) => p.userId !== participant.userId));
+        },
+        onChannelUpdated: (updates) => {
+          setConversation((prev) => prev ? { ...prev, ...updates } : prev);
+        },
+        onChannelDeleted: () => {
+          setConversation(null);
+          setMessages([]);
+          joinedConversationId.current = null;
+          setIsConnected(false);
+        },
+        onMessageRead: ({ messageId, userId }) => {
+          setMessages(
+            (prev) => prev.map(
+              (msg) => msg.id === messageId && !(msg.readBy ?? []).includes(userId) ? { ...msg, readBy: [...msg.readBy ?? [], userId] } : msg
+            )
+          );
+        },
+        onMessagePinned: (message) => {
+          setPinnedMessages(
+            (prev) => prev.some((m) => m.id === message.id) ? prev : [...prev, message]
+          );
+          setMessages(
+            (prev) => prev.map((m) => m.id === message.id ? { ...m, isPinned: true } : m)
+          );
+        },
+        onMessageUnpinned: ({ messageId }) => {
+          setPinnedMessages((prev) => prev.filter((m) => m.id !== messageId));
+          setMessages(
+            (prev) => prev.map((m) => m.id === messageId ? { ...m, isPinned: false } : m)
+          );
+        }
+      });
+      joinedConversationId.current = conv.id;
+      setIsConnected(true);
+    },
+    [socket, config.userId]
+  );
+  useEffect(() => {
+    let cancelled = false;
+    const init = async () => {
+      setIsLoading(true);
+      setError(null);
+      try {
+        const preview = await requestPreview(orderId);
+        if (cancelled) return;
+        if (!preview) {
+          setConversation(null);
+          setMessages([]);
+          setParticipants([]);
+          setHasMore(false);
+          setIsLoading(false);
+          return;
+        }
+        const existingConv = {
+          id: preview.conversationId,
+          orderId: preview.orderId,
+          name: preview.name,
+          participants: preview.participants,
+          unreadCount: preview.unreadCount,
+          createdAt: "",
+          updatedAt: ""
+        };
+        setConversation(existingConv);
+        setParticipants(preview.participants);
+        joinChannel(existingConv);
+        setMessages(preview.lastMessages);
+        setHasMore(preview.messageCount > preview.lastMessages.length);
+        setPinnedMessages(preview.lastMessages.filter((m) => m.isPinned));
+        setIsLoading(false);
+        if (loadHistory) {
+          fetchMessages(preview.conversationId).then((history) => {
+            if (cancelled) return;
+            setMessages((prev) => {
+              const seen = new Set(prev.map((m) => m.id));
+              const older = history.filter((m) => !seen.has(m.id));
+              return [...older, ...prev];
+            });
+            setHasMore(history.length > 0);
+            setPinnedMessages((prev) => {
+              const fromHistory = history.filter((m) => m.isPinned);
+              const seen = new Set(prev.map((m) => m.id));
+              return [...fromHistory.filter((m) => !seen.has(m.id)), ...prev];
+            });
+          }).catch(() => {
+          });
+        }
+      } catch (err) {
+        if (cancelled) return;
+        const msg = err instanceof Error ? err.message : "Failed to load conversation";
+        setError(msg);
+        setIsLoading(false);
+      }
+    };
+    init();
+    return () => {
+      cancelled = true;
+      if (joinedConversationId.current) {
+        socket.leaveConversation(joinedConversationId.current);
+        joinedConversationId.current = null;
+      }
+      typingTimers.current.forEach((timer) => clearTimeout(timer));
+      typingTimers.current.clear();
+      markedReadIdsRef.current.clear();
+      setIsConnected(false);
+    };
+  }, [orderId]);
+  const ensureConversation = useCallback(
+    async (payload) => {
+      if (conversation) return { conv: conversation, persistedByCreate: false };
+      if (ensureConversationInFlight.current) {
+        const conv = await ensureConversationInFlight.current;
+        return { conv, persistedByCreate: false };
+      }
+      const inflight = (async () => {
+        const result = await createConversationWithMessage(orderId, payload, {
+          name: buildName(),
+          participantIds
+        });
+        setConversation(result.conversation);
+        setParticipants(result.conversation.participants);
+        setMessages([result.message]);
+        joinChannel(result.conversation);
+        invalidatePreview(orderId);
+        if (loadHistory) {
+          fetchMessages(result.conversation.id).then((history) => {
+            setMessages((prev) => {
+              const seen = new Set(prev.map((m) => m.id));
+              const older = history.filter((m) => !seen.has(m.id));
+              return [...older, ...prev];
+            });
+            setPinnedMessages((prev) => {
+              const fromHistory = history.filter((m) => m.isPinned);
+              const seen = new Set(prev.map((m) => m.id));
+              return [...fromHistory.filter((m) => !seen.has(m.id)), ...prev];
+            });
+          }).catch(() => {
+          });
+        }
+        return result.conversation;
+      })();
+      ensureConversationInFlight.current = inflight;
+      try {
+        const conv = await inflight;
+        return { conv, persistedByCreate: true };
+      } finally {
+        ensureConversationInFlight.current = null;
+      }
+    },
+    [
+      conversation,
+      createConversationWithMessage,
+      orderId,
+      buildName,
+      participantIds,
+      joinChannel,
+      invalidatePreview,
+      loadHistory,
+      fetchMessages
+    ]
+  );
+  const sendMessage = useCallback(
+    async (body) => {
+      const payload = {
+        body,
+        type: "text",
+        ...replyTo ? { replyToId: replyTo.id } : {}
+      };
+      const { conv, persistedByCreate } = await ensureConversation(payload);
+      setReplyTo(null);
+      if (persistedByCreate) return;
+      const optimistic = {
+        id: `pending-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+        conversationId: conv.id,
+        senderId: config.userId,
+        senderName: config.userName,
+        senderRole: config.userRole,
+        body,
+        type: "text",
+        insertedAt: (/* @__PURE__ */ new Date()).toISOString(),
+        ...replyTo ? {
+          replyToId: replyTo.id,
+          replyToSnapshot: {
+            messageId: replyTo.id,
+            senderId: replyTo.senderId,
+            senderName: replyTo.senderName,
+            body: replyTo.body,
+            type: replyTo.type
+          }
+        } : {}
+      };
+      setMessages((prev) => [...prev, optimistic]);
+      try {
+        await socket.sendMessage(conv.id, payload);
+      } catch (err) {
+        setMessages((prev) => prev.filter((m) => m.id !== optimistic.id));
+        config.onError?.({
+          code: "SEND_FAILED",
+          message: "Failed to send message",
+          details: err
+        });
+      }
+    },
+    [ensureConversation, socket, replyTo, config]
+  );
+  const sendAudioMessage = useCallback(
+    async (audioBlob, duration) => {
+      if (!config.onUploadFile) return;
+      const url = await config.onUploadFile(audioBlob, "voice-message.webm");
+      const payload = {
+        body: "Voice message",
+        type: "audio",
+        mediaUrl: url,
+        mediaDuration: duration
+      };
+      const { conv, persistedByCreate } = await ensureConversation(payload);
+      if (persistedByCreate) return;
+      await socket.sendMessage(conv.id, payload);
+    },
+    [config, ensureConversation, socket]
+  );
+  const sendFileMessage = useCallback(
+    async (file) => {
+      if (!config.onUploadFile) return;
+      const url = await config.onUploadFile(file, file.name);
+      const isImage = file.type.startsWith("image/");
+      const payload = {
+        body: file.name,
+        type: isImage ? "image" : "file",
+        mediaUrl: url,
+        fileName: file.name
+      };
+      const { conv, persistedByCreate } = await ensureConversation(payload);
+      if (persistedByCreate) return;
+      await socket.sendMessage(conv.id, payload);
+    },
+    [config, ensureConversation, socket]
+  );
+  const sendDeepLink = useCallback(
+    async (path, label) => {
+      const payload = {
+        body: label,
+        type: "deep_link",
+        metadata: { path }
+      };
+      const { conv, persistedByCreate } = await ensureConversation(payload);
+      if (persistedByCreate) return;
+      await socket.sendMessage(conv.id, payload);
+    },
+    [ensureConversation, socket]
+  );
+  const sendTypingIndicator = useCallback(
+    (isTyping) => {
+      if (!conversation || !isConnected) return;
+      socket.sendTyping(conversation.id, isTyping);
+    },
+    [conversation, isConnected, socket]
+  );
+  const markAsRead = useCallback(
+    (messageId) => {
+      if (!conversation || !isConnected) return;
+      if (markedReadIdsRef.current.has(messageId)) return;
+      markedReadIdsRef.current.add(messageId);
+      socket.markAsRead(conversation.id, messageId);
+    },
+    [conversation, isConnected, socket]
+  );
+  const loadMoreMessages = useCallback(async () => {
+    if (!conversation || !hasMore || isLoading) return;
+    const oldestMessage = messages[0];
+    const before = oldestMessage?.id;
+    setIsLoading(true);
+    try {
+      const older = await fetchMessages(conversation.id, { before });
+      setMessages((prev) => [...older, ...prev]);
+      setHasMore(older.length > 0);
+    } catch (err) {
+      config.onError?.({
+        code: "LOAD_ERROR",
+        message: "Failed to load older messages",
+        details: err
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  }, [conversation, hasMore, isLoading, messages, fetchMessages, config]);
+  const pinMessage = useCallback(
+    async (messageId) => {
+      if (!conversation) return;
+      try {
+        await pinMessageApi(conversation.id, messageId);
+      } catch (err) {
+        config.onError?.({
+          code: "PIN_ERROR",
+          message: "Failed to pin message",
+          details: err
+        });
+      }
+    },
+    [conversation, pinMessageApi, config]
+  );
+  const unpinMessage = useCallback(
+    async (messageId) => {
+      if (!conversation) return;
+      try {
+        await unpinMessageApi(conversation.id, messageId);
+      } catch (err) {
+        config.onError?.({
+          code: "UNPIN_ERROR",
+          message: "Failed to unpin message",
+          details: err
+        });
+      }
+    },
+    [conversation, unpinMessageApi, config]
+  );
+  return {
+    conversation,
+    messages,
+    pinnedMessages,
+    participants,
+    typingUsers,
+    isLoading,
+    hasMore,
+    error,
+    isConnected,
+    replyTo,
+    setReplyTo,
+    sendMessage,
+    sendAudioMessage,
+    sendFileMessage,
+    sendDeepLink,
+    sendTyping: sendTypingIndicator,
+    markAsRead,
+    loadMoreMessages,
+    pinMessage,
+    unpinMessage
+  };
+}
+function useChannelSettings({ conversationId }) {
+  const { socket, config } = useCollab();
+  const [isUpdating, setIsUpdating] = useState(false);
+  const [error, setError] = useState(null);
+  const isAdmin = config.userRole === "admin";
+  const withLoading = useCallback(
+    async (operation) => {
+      if (!conversationId) return;
+      setIsUpdating(true);
+      setError(null);
+      try {
+        const result = await operation();
+        setIsUpdating(false);
+        return result;
+      } catch (err) {
+        const collabError = typeof err === "object" && err !== null && "code" in err ? err : { code: "UNKNOWN", message: "Operation failed" };
+        setError(collabError);
+        setIsUpdating(false);
+        config.onError?.(collabError);
+        return void 0;
+      }
+    },
+    [conversationId, config]
+  );
+  const inviteUser = useCallback(
+    async (payload) => {
+      await withLoading(() => socket.inviteUser(conversationId, payload));
+    },
+    [conversationId, socket, withLoading]
+  );
+  const removeUser = useCallback(
+    async (userId) => {
+      await withLoading(() => socket.removeUser(conversationId, userId));
+    },
+    [conversationId, socket, withLoading]
+  );
+  const leaveChannel = useCallback(async () => {
+    await withLoading(async () => {
+      await socket.removeUser(conversationId, config.userId);
+      socket.leaveConversation(conversationId);
+    });
+  }, [conversationId, socket, config.userId, withLoading]);
+  const deleteChannel = useCallback(async () => {
+    if (!isAdmin) {
+      const err = {
+        code: "FORBIDDEN",
+        message: "Only admins can delete channels"
+      };
+      setError(err);
+      config.onError?.(err);
+      return;
+    }
+    await withLoading(() => socket.deleteChannel(conversationId));
+  }, [conversationId, socket, isAdmin, config, withLoading]);
+  const updateChannel = useCallback(
+    async (payload) => {
+      await withLoading(() => socket.updateChannel(conversationId, payload));
+    },
+    [conversationId, socket, withLoading]
+  );
+  return {
+    inviteUser,
+    removeUser,
+    leaveChannel,
+    deleteChannel,
+    updateChannel,
+    isUpdating,
+    error,
+    isAdmin
+  };
+}
+function useDeepLinks() {
+  const { config } = useCollab();
+  const parseDeepLink = useCallback((link) => {
+    if (!link.startsWith(DEEP_LINK_PREFIX)) return null;
+    const path = link.slice(DEEP_LINK_PREFIX.length);
+    const parts = path.split("/").filter(Boolean);
+    if (parts.length < 2) return null;
+    return {
+      raw: link,
+      path,
+      resource: parts[0],
+      id: parts[1]
+    };
+  }, []);
+  const handleDeepLink = useCallback(
+    (link) => {
+      const parsed = parseDeepLink(link);
+      if (!parsed) return;
+      if (parsed.resource === "dicom" && config.onOpenDicom) {
+        config.onOpenDicom(parsed.id, "");
+        return;
+      }
+      if (config.onDeepLink) {
+        config.onDeepLink(parsed.path);
+      }
+    },
+    [parseDeepLink, config]
+  );
+  const containsDeepLink = useCallback((text) => {
+    return text.includes(DEEP_LINK_PREFIX);
+  }, []);
+  const extractDeepLinks = useCallback(
+    (text) => {
+      const regex = new RegExp(`${escapeRegex(DEEP_LINK_PREFIX)}[\\w/.-]+`, "g");
+      const matches = text.match(regex) || [];
+      return matches.map(parseDeepLink).filter((link) => link !== null);
+    },
+    [parseDeepLink]
+  );
+  return {
+    parseDeepLink,
+    handleDeepLink,
+    containsDeepLink,
+    extractDeepLinks
+  };
+}
+function escapeRegex(string) {
+  return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function PatientHeader({
+  patientData,
+  onOpenDicom,
+  onOpenSettings,
+  className
+}) {
+  const hasDicom = !!(patientData.studyId && patientData.storageId);
+  return /* @__PURE__ */ jsxs("div", { className, style: styles.container, children: [
+    /* @__PURE__ */ jsx("div", { style: styles.infoRow, children: /* @__PURE__ */ jsx("div", { style: styles.patientInfo, children: /* @__PURE__ */ jsx("span", { style: styles.patientName, children: buildChannelName(patientData) }) }) }),
+    /* @__PURE__ */ jsxs("div", { style: styles.secondaryRow, children: [
+      patientData.patientAge && /* @__PURE__ */ jsxs("span", { style: styles.secondary, children: [
+        patientData.patientAge,
+        patientData.patientSex ? `/${patientData.patientSex}` : ""
+      ] }),
+      patientData.studyType && /* @__PURE__ */ jsx("span", { style: styles.secondary, children: patientData.studyType }),
+      patientData.bodyParts && patientData.bodyParts.length > 0 && /* @__PURE__ */ jsx("span", { style: styles.secondary, children: patientData.bodyParts.join(", ") }),
+      patientData.referringPhysician && /* @__PURE__ */ jsxs("span", { style: styles.secondary, children: [
+        "Ref: ",
+        patientData.referringPhysician
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: styles.actions, children: [
+      hasDicom && onOpenDicom && /* @__PURE__ */ jsx("button", { onClick: onOpenDicom, style: styles.dicomButton, type: "button", children: "View DICOM" }),
+      onOpenSettings && /* @__PURE__ */ jsx("button", { onClick: onOpenSettings, style: styles.settingsButton, type: "button", children: "Settings" })
+    ] })
+  ] });
+}
+var styles = {
+  container: {
+    padding: "12px 16px",
+    borderBottom: "1px solid #e5e7eb",
+    backgroundColor: "#f9fafb"
+  },
+  infoRow: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center"
+  },
+  patientInfo: {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    flexWrap: "wrap"
+  },
+  patientName: {
+    fontWeight: 600,
+    fontSize: "15px",
+    color: "#111827"
+  },
+  secondaryRow: {
+    display: "flex",
+    gap: "12px",
+    marginTop: "4px",
+    alignItems: "center"
+  },
+  secondary: {
+    fontSize: "12px",
+    color: "#6b7280"
+  },
+  actions: {
+    display: "flex",
+    gap: "8px",
+    marginTop: "8px"
+  },
+  dicomButton: {
+    padding: "6px 12px",
+    fontSize: "13px",
+    fontWeight: 500,
+    color: "#ffffff",
+    backgroundColor: "#2563eb",
+    border: "none",
+    borderRadius: "6px",
+    cursor: "pointer"
+  },
+  settingsButton: {
+    padding: "6px 12px",
+    fontSize: "13px",
+    fontWeight: 500,
+    color: "#374151",
+    backgroundColor: "#ffffff",
+    border: "1px solid #d1d5db",
+    borderRadius: "6px",
+    cursor: "pointer"
+  }
+};
+function ReplyQuoteBlock({
+  snapshot,
+  inOwnBubble = false,
+  onClick,
+  className
+}) {
+  const baseBg = inOwnBubble ? "rgba(255,255,255,0.18)" : "#f3f4f6";
+  const barColor = inOwnBubble ? "#ffffff" : "#2563eb";
+  const nameColor = inOwnBubble ? "#ffffff" : "#2563eb";
+  const bodyColor = inOwnBubble ? "rgba(255,255,255,0.85)" : "#4b5563";
+  const preview = renderSnapshotPreview(snapshot);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className,
+      style: { ...styles2.container, backgroundColor: baseBg },
+      onClick: () => onClick?.(snapshot.messageId),
+      role: onClick ? "button" : void 0,
+      tabIndex: onClick ? 0 : void 0,
+      children: [
+        /* @__PURE__ */ jsx("div", { style: { ...styles2.bar, backgroundColor: barColor } }),
+        /* @__PURE__ */ jsxs("div", { style: styles2.content, children: [
+          /* @__PURE__ */ jsx("span", { style: { ...styles2.senderName, color: nameColor }, children: snapshot.senderName }),
+          /* @__PURE__ */ jsx("span", { style: { ...styles2.body, color: bodyColor }, children: preview })
+        ] })
+      ]
+    }
+  );
+}
+function renderSnapshotPreview(snapshot) {
+  switch (snapshot.type) {
+    case "audio":
+      return "\u{1F3A4} Voice message";
+    case "image":
+      return "\u{1F4F7} Image";
+    case "file":
+      return "\u{1F4CE} File";
+    case "deep_link":
+      return `\u{1F517} ${snapshot.body}`;
+    default: {
+      const body = snapshot.body || "";
+      return body.length > 80 ? `${body.slice(0, 80)}\u2026` : body;
+    }
+  }
+}
+var styles2 = {
+  container: {
+    display: "flex",
+    gap: "6px",
+    padding: "4px 8px",
+    marginBottom: "4px",
+    borderRadius: "6px",
+    cursor: "pointer",
+    maxWidth: "100%"
+  },
+  bar: {
+    width: "3px",
+    borderRadius: "2px",
+    flexShrink: 0
+  },
+  content: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "1px",
+    minWidth: 0,
+    overflow: "hidden"
+  },
+  senderName: {
+    fontSize: "11px",
+    fontWeight: 600,
+    lineHeight: "1.2"
+  },
+  body: {
+    fontSize: "11px",
+    lineHeight: "1.3",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  }
+};
+function SeenByIndicator({
+  readBy,
+  participants,
+  currentUserId,
+  senderId,
+  className
+}) {
+  const [expanded, setExpanded] = 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;
+  const displayCount = expanded ? seenByOthers.length : Math.min(3, seenByOthers.length);
+  const shown = seenByOthers.slice(0, displayCount);
+  const remainder = seenByOthers.length - displayCount;
+  return /* @__PURE__ */ jsxs("div", { className, style: styles3.container, children: [
+    /* @__PURE__ */ jsx("span", { style: styles3.checkmark, children: "\u2713\u2713" }),
+    /* @__PURE__ */ jsxs("span", { style: styles3.label, children: [
+      "Seen by ",
+      shown.map((p) => p.userName ?? "User").join(", ")
+    ] }),
+    remainder > 0 && /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: (e) => {
+          e.stopPropagation();
+          setExpanded(true);
+        },
+        style: styles3.moreButton,
+        type: "button",
+        children: [
+          "+",
+          remainder
+        ]
+      }
+    )
+  ] });
+}
+var styles3 = {
+  container: {
+    display: "flex",
+    alignItems: "center",
+    gap: "4px",
+    marginTop: "2px",
+    fontSize: "10px",
+    opacity: 0.75
+  },
+  checkmark: {
+    fontSize: "10px",
+    color: "#60a5fa"
+  },
+  label: {
+    fontSize: "10px",
+    color: "inherit"
+  },
+  moreButton: {
+    fontSize: "10px",
+    fontWeight: 600,
+    color: "inherit",
+    backgroundColor: "transparent",
+    border: "none",
+    padding: 0,
+    cursor: "pointer",
+    textDecoration: "underline"
+  }
+};
+function MessageActionsMenu({
+  message,
+  onReply,
+  onPin,
+  onUnpin,
+  onCopy,
+  visible,
+  pinDisabled = false,
+  className
+}) {
+  if (!visible) return null;
+  const isPinned = !!message.isPinned;
+  const canCopy = message.type === "text" && !!message.body;
+  const handleCopy = () => {
+    if (!onCopy) return;
+    onCopy(message.body);
+  };
+  return /* @__PURE__ */ jsxs("div", { className, style: styles4.container, children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => onReply(message),
+        style: styles4.button,
+        title: "Reply",
+        type: "button",
+        children: "\u21A9"
+      }
+    ),
+    isPinned ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => onUnpin(message.id),
+        style: styles4.button,
+        title: "Unpin",
+        type: "button",
+        children: "\u{1F4CC}"
+      }
+    ) : /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => onPin(message.id),
+        style: {
+          ...styles4.button,
+          opacity: pinDisabled ? 0.4 : 1,
+          cursor: pinDisabled ? "not-allowed" : "pointer"
+        },
+        disabled: pinDisabled,
+        title: pinDisabled ? "Pin limit reached (max 3)" : "Pin",
+        type: "button",
+        children: "\u{1F4CC}"
+      }
+    ),
+    canCopy && onCopy && /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: handleCopy,
+        style: styles4.button,
+        title: "Copy text",
+        type: "button",
+        children: "\u2398"
+      }
+    )
+  ] });
+}
+var styles4 = {
+  container: {
+    display: "flex",
+    gap: "2px",
+    padding: "2px",
+    backgroundColor: "#ffffff",
+    border: "1px solid #e5e7eb",
+    borderRadius: "20px",
+    boxShadow: "0 2px 8px rgba(0, 0, 0, 0.08)"
+  },
+  button: {
+    width: "24px",
+    height: "24px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "12px",
+    backgroundColor: "transparent",
+    border: "none",
+    borderRadius: "50%",
+    cursor: "pointer"
+  }
+};
+function MessageBubble({
+  message,
+  isOwn,
+  participants = [],
+  currentUserId = "",
+  showSeenBy = true,
+  onDeepLinkClick,
+  onReply,
+  onPin,
+  onUnpin,
+  onCopy,
+  onReplyJumpTo,
+  pinDisabled = false,
+  className
+}) {
+  const [isHovered, setIsHovered] = useState(false);
+  if (message.type === "system") {
+    return /* @__PURE__ */ jsx(SystemBubble, { message });
+  }
+  const hasActions = !!(onReply || onPin || onUnpin || onCopy);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className,
+      style: {
+        ...styles5.wrapper,
+        justifyContent: isOwn ? "flex-end" : "flex-start"
+      },
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      children: /* @__PURE__ */ jsxs("div", { style: styles5.bubbleWrapper, children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              ...styles5.bubble,
+              ...isOwn ? styles5.ownBubble : styles5.otherBubble
+            },
+            children: [
+              message.isPinned && /* @__PURE__ */ jsx("div", { style: styles5.pinnedBadge, children: "\u{1F4CC} Pinned" }),
+              message.replyToSnapshot && /* @__PURE__ */ jsx(
+                ReplyQuoteBlock,
+                {
+                  snapshot: message.replyToSnapshot,
+                  inOwnBubble: isOwn,
+                  onClick: onReplyJumpTo
+                }
+              ),
+              !isOwn && /* @__PURE__ */ jsxs("div", { style: styles5.senderRow, children: [
+                /* @__PURE__ */ jsx("span", { style: styles5.senderName, children: message.senderName }),
+                /* @__PURE__ */ jsx(RoleBadge, { role: message.senderRole })
+              ] }),
+              message.type === "text" && /* @__PURE__ */ jsx(TextContent, { body: message.body, onDeepLinkClick }),
+              message.type === "audio" && /* @__PURE__ */ jsx(AudioContent, { mediaUrl: message.mediaUrl, duration: message.mediaDuration }),
+              message.type === "image" && /* @__PURE__ */ jsx(ImageContent, { mediaUrl: message.mediaUrl, fileName: message.fileName }),
+              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(
+                SeenByIndicator,
+                {
+                  readBy: message.readBy ?? [],
+                  participants,
+                  currentUserId,
+                  senderId: message.senderId
+                }
+              )
+            ]
+          }
+        ),
+        hasActions && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              ...styles5.actionsWrapper,
+              [isOwn ? "right" : "left"]: "100%",
+              [isOwn ? "marginRight" : "marginLeft"]: "6px"
+            },
+            children: /* @__PURE__ */ jsx(
+              MessageActionsMenu,
+              {
+                message,
+                onReply: onReply ?? (() => {
+                }),
+                onPin: onPin ?? (() => {
+                }),
+                onUnpin: onUnpin ?? (() => {
+                }),
+                onCopy,
+                visible: isHovered,
+                pinDisabled
+              }
+            )
+          }
+        )
+      ] })
+    }
+  );
+}
+function TextContent({ body, onDeepLinkClick }) {
+  if (body.includes(DEEP_LINK_PREFIX)) {
+    const parts = body.split(new RegExp(`(${escapeRegex2(DEEP_LINK_PREFIX)}[\\w/.-]+)`, "g"));
+    return /* @__PURE__ */ jsx("p", { style: styles5.textBody, children: parts.map(
+      (part, i) => part.startsWith(DEEP_LINK_PREFIX) ? /* @__PURE__ */ jsx(
+        "a",
+        {
+          onClick: (e) => {
+            e.preventDefault();
+            onDeepLinkClick?.(part);
+          },
+          href: "#",
+          style: styles5.deepLink,
+          children: part
+        },
+        i
+      ) : /* @__PURE__ */ jsx("span", { children: part }, i)
+    ) });
+  }
+  return /* @__PURE__ */ jsx("p", { style: styles5.textBody, children: body });
+}
+function AudioContent({ mediaUrl, duration }) {
+  if (!mediaUrl) return null;
+  return /* @__PURE__ */ jsxs("div", { style: styles5.audioContainer, children: [
+    /* @__PURE__ */ jsx("audio", { controls: true, preload: "metadata", style: styles5.audioPlayer, children: /* @__PURE__ */ jsx("source", { src: mediaUrl }) }),
+    duration != null && /* @__PURE__ */ jsx("span", { style: styles5.audioDuration, children: formatDuration(duration) })
+  ] });
+}
+function ImageContent({ mediaUrl, fileName }) {
+  if (!mediaUrl) return null;
+  return /* @__PURE__ */ jsx("a", { href: mediaUrl, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsx("img", { src: mediaUrl, alt: fileName || "Image", style: styles5.imagePreview }) });
+}
+function FileContent({ mediaUrl, fileName }) {
+  if (!mediaUrl) return null;
+  return /* @__PURE__ */ jsxs("a", { href: mediaUrl, target: "_blank", rel: "noopener noreferrer", style: styles5.fileLink, children: [
+    /* @__PURE__ */ jsx("span", { style: styles5.fileIcon, children: "\u{1F4C4}" }),
+    /* @__PURE__ */ jsx("span", { style: styles5.fileName, children: fileName || "Download file" })
+  ] });
+}
+function DeepLinkContent({
+  body,
+  metadata,
+  onDeepLinkClick
+}) {
+  const path = metadata?.path;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: styles5.deepLinkCard,
+      onClick: () => path && onDeepLinkClick?.(`${DEEP_LINK_PREFIX}${path}`),
+      children: [
+        /* @__PURE__ */ jsx("span", { style: styles5.deepLinkLabel, children: body }),
+        path && /* @__PURE__ */ jsxs("span", { style: styles5.deepLinkPath, children: [
+          DEEP_LINK_PREFIX,
+          path
+        ] })
+      ]
+    }
+  );
+}
+function SystemBubble({ message }) {
+  return /* @__PURE__ */ jsxs("div", { style: styles5.systemMessage, children: [
+    /* @__PURE__ */ jsx("span", { children: message.body }),
+    /* @__PURE__ */ jsx("span", { style: styles5.systemTime, children: formatTime(message.insertedAt) })
+  ] });
+}
+function RoleBadge({ role }) {
+  const colors = {
+    radiologist: "#7c3aed",
+    lab: "#2563eb",
+    physician: "#059669",
+    admin: "#dc2626"
+  };
+  return /* @__PURE__ */ jsx("span", { style: { ...styles5.roleBadge, backgroundColor: `${colors[role]}15`, color: colors[role] }, children: role });
+}
+function formatTime(iso) {
+  try {
+    return new Date(iso).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+  } catch {
+    return "";
+  }
+}
+function formatDuration(seconds) {
+  const m = Math.floor(seconds / 60);
+  const s = seconds % 60;
+  return `${m}:${s.toString().padStart(2, "0")}`;
+}
+function escapeRegex2(string) {
+  return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+var styles5 = {
+  wrapper: {
+    display: "flex",
+    marginBottom: "8px",
+    paddingLeft: "16px",
+    paddingRight: "16px"
+  },
+  bubbleWrapper: {
+    position: "relative",
+    maxWidth: "75%"
+  },
+  bubble: {
+    padding: "8px 12px",
+    borderRadius: "12px",
+    wordBreak: "break-word"
+  },
+  ownBubble: {
+    backgroundColor: "#2563eb",
+    color: "#ffffff",
+    borderBottomRightRadius: "4px"
+  },
+  otherBubble: {
+    backgroundColor: "#f3f4f6",
+    color: "#111827",
+    borderBottomLeftRadius: "4px"
+  },
+  pinnedBadge: {
+    display: "inline-block",
+    fontSize: "10px",
+    fontWeight: 600,
+    marginBottom: "4px",
+    opacity: 0.7
+  },
+  senderRow: {
+    display: "flex",
+    alignItems: "center",
+    gap: "6px",
+    marginBottom: "4px"
+  },
+  senderName: {
+    fontSize: "12px",
+    fontWeight: 600,
+    color: "#374151"
+  },
+  roleBadge: {
+    fontSize: "10px",
+    fontWeight: 500,
+    padding: "1px 6px",
+    borderRadius: "4px"
+  },
+  textBody: {
+    margin: 0,
+    fontSize: "14px",
+    lineHeight: "1.4"
+  },
+  timestamp: {
+    fontSize: "10px",
+    opacity: 0.7,
+    marginTop: "4px",
+    textAlign: "right"
+  },
+  actionsWrapper: {
+    position: "absolute",
+    top: "50%",
+    transform: "translateY(-50%)",
+    zIndex: 10
+  },
+  audioContainer: {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px"
+  },
+  audioPlayer: {
+    height: "32px",
+    maxWidth: "220px"
+  },
+  audioDuration: {
+    fontSize: "12px",
+    opacity: 0.7,
+    whiteSpace: "nowrap"
+  },
+  imagePreview: {
+    maxWidth: "240px",
+    maxHeight: "180px",
+    borderRadius: "8px",
+    objectFit: "cover",
+    cursor: "pointer"
+  },
+  fileLink: {
+    display: "flex",
+    alignItems: "center",
+    gap: "6px",
+    textDecoration: "none",
+    color: "inherit",
+    padding: "6px 0"
+  },
+  fileIcon: {
+    fontSize: "18px"
+  },
+  fileName: {
+    fontSize: "13px",
+    textDecoration: "underline"
+  },
+  deepLink: {
+    color: "#3b82f6",
+    textDecoration: "underline",
+    cursor: "pointer"
+  },
+  deepLinkCard: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "2px",
+    padding: "8px",
+    backgroundColor: "#eff6ff",
+    borderRadius: "8px",
+    border: "1px solid #bfdbfe",
+    cursor: "pointer"
+  },
+  deepLinkLabel: {
+    fontSize: "13px",
+    fontWeight: 500,
+    color: "#1d4ed8"
+  },
+  deepLinkPath: {
+    fontSize: "11px",
+    color: "#6b7280",
+    fontFamily: "monospace"
+  },
+  systemMessage: {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: "8px",
+    padding: "4px 16px",
+    fontSize: "12px",
+    color: "#9ca3af"
+  },
+  systemTime: {
+    fontSize: "10px",
+    color: "#d1d5db"
+  }
+};
+var MessageList = forwardRef(function MessageList2({
+  messages,
+  currentUserId,
+  participants = [],
+  showSeenBy = true,
+  typingUsers,
+  hasMore,
+  isLoading,
+  onLoadMore,
+  onDeepLinkClick,
+  onMessageVisible,
+  onReply,
+  onPin,
+  onUnpin,
+  onCopy,
+  pinDisabled,
+  className
+}, ref) {
+  const containerRef = useRef(null);
+  const bottomRef = useRef(null);
+  const prevMessageCount = useRef(messages.length);
+  useImperativeHandle(
+    ref,
+    () => ({
+      scrollToMessage: (messageId) => {
+        const element = containerRef.current?.querySelector(`[data-message-id="${messageId}"]`);
+        if (element) {
+          element.scrollIntoView({ behavior: "smooth", block: "center" });
+          element.style.transition = "background-color 200ms";
+          element.style.backgroundColor = "#fef3c7";
+          setTimeout(() => {
+            element.style.backgroundColor = "";
+          }, 800);
+        }
+      }
+    }),
+    []
+  );
+  useEffect(() => {
+    if (messages.length > prevMessageCount.current) {
+      const lastMessage = messages[messages.length - 1];
+      const isOwnMessage = lastMessage?.senderId === currentUserId;
+      if (isOwnMessage || isNearBottom(containerRef.current)) {
+        bottomRef.current?.scrollIntoView({ behavior: "smooth" });
+      }
+    }
+    prevMessageCount.current = messages.length;
+  }, [messages, currentUserId]);
+  useEffect(() => {
+    if (!onMessageVisible || !containerRef.current) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            const messageId = entry.target.dataset.messageId;
+            if (messageId) onMessageVisible(messageId);
+          }
+        });
+      },
+      { root: containerRef.current, threshold: 0.5 }
+    );
+    const messageElements = containerRef.current.querySelectorAll("[data-message-id]");
+    messageElements.forEach((el) => observer.observe(el));
+    return () => observer.disconnect();
+  }, [messages, onMessageVisible]);
+  const handleScroll = useCallback(() => {
+    if (!containerRef.current || !hasMore || isLoading) return;
+    if (containerRef.current.scrollTop < 50) {
+      onLoadMore();
+    }
+  }, [hasMore, isLoading, onLoadMore]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className,
+      style: styles6.container,
+      onScroll: handleScroll,
+      children: [
+        isLoading && /* @__PURE__ */ jsx("div", { style: styles6.loadingMore, children: "Loading earlier messages..." }),
+        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("p", { style: styles6.emptyTitle, children: "No messages yet" }),
+          /* @__PURE__ */ jsx("p", { style: styles6.emptySubtitle, children: "Start the conversation about this study" })
+        ] }),
+        messages.map((message) => /* @__PURE__ */ jsx("div", { "data-message-id": message.id, children: /* @__PURE__ */ jsx(
+          MessageBubble,
+          {
+            message,
+            isOwn: message.senderId === currentUserId,
+            participants,
+            currentUserId,
+            showSeenBy,
+            onDeepLinkClick,
+            onReply,
+            onPin,
+            onUnpin,
+            onCopy,
+            pinDisabled
+          }
+        ) }, message.id)),
+        typingUsers.length > 0 && /* @__PURE__ */ jsxs("div", { style: styles6.typingIndicator, children: [
+          typingUsers.map((t) => t.userName ?? "Someone").join(", "),
+          typingUsers.length === 1 ? " is " : " are ",
+          "typing..."
+        ] }),
+        /* @__PURE__ */ jsx("div", { ref: bottomRef })
+      ]
+    }
+  );
+});
+function isNearBottom(container) {
+  if (!container) return true;
+  const threshold = 150;
+  return container.scrollHeight - container.scrollTop - container.clientHeight < threshold;
+}
+var styles6 = {
+  container: {
+    flex: 1,
+    overflowY: "auto",
+    paddingTop: "12px",
+    paddingBottom: "8px"
+  },
+  loadingMore: {
+    textAlign: "center",
+    padding: "12px",
+    fontSize: "13px",
+    color: "#9ca3af"
+  },
+  loadMoreButton: {
+    display: "block",
+    margin: "0 auto 12px",
+    padding: "6px 16px",
+    fontSize: "12px",
+    color: "#6b7280",
+    backgroundColor: "transparent",
+    border: "1px solid #e5e7eb",
+    borderRadius: "16px",
+    cursor: "pointer"
+  },
+  empty: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: "48px 16px",
+    color: "#9ca3af"
+  },
+  emptyTitle: {
+    fontSize: "15px",
+    fontWeight: 500,
+    margin: "0 0 4px"
+  },
+  emptySubtitle: {
+    fontSize: "13px",
+    margin: 0
+  },
+  typingIndicator: {
+    padding: "4px 16px 8px",
+    fontSize: "12px",
+    color: "#9ca3af",
+    fontStyle: "italic"
+  }
+};
+function useAudioRecorder() {
+  const [isRecording, setIsRecording] = useState(false);
+  const [duration, setDuration] = useState(0);
+  const [error, setError] = useState(null);
+  const mediaRecorderRef = useRef(null);
+  const chunksRef = useRef([]);
+  const streamRef = useRef(null);
+  const timerRef = useRef(null);
+  const startTimeRef = useRef(0);
+  const resolveRef = useRef(null);
+  const isSupported = typeof window !== "undefined" && typeof navigator !== "undefined" && !!navigator.mediaDevices?.getUserMedia && !!window.MediaRecorder;
+  const cleanup = useCallback(() => {
+    if (timerRef.current) {
+      clearInterval(timerRef.current);
+      timerRef.current = null;
+    }
+    if (streamRef.current) {
+      streamRef.current.getTracks().forEach((track) => track.stop());
+      streamRef.current = null;
+    }
+    mediaRecorderRef.current = null;
+    chunksRef.current = [];
+    setIsRecording(false);
+    setDuration(0);
+  }, []);
+  const start = useCallback(async () => {
+    if (!isSupported) {
+      setError("Audio recording is not supported in this browser");
+      return;
+    }
+    try {
+      setError(null);
+      chunksRef.current = [];
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      streamRef.current = stream;
+      const mimeType = MediaRecorder.isTypeSupported(AUDIO_MIME_TYPE) ? AUDIO_MIME_TYPE : MediaRecorder.isTypeSupported("audio/webm") ? "audio/webm" : "audio/mp4";
+      const recorder = new MediaRecorder(stream, { mimeType });
+      mediaRecorderRef.current = recorder;
+      recorder.ondataavailable = (event) => {
+        if (event.data.size > 0) {
+          chunksRef.current.push(event.data);
+        }
+      };
+      recorder.onerror = () => {
+        setError("Recording failed");
+        cleanup();
+        resolveRef.current?.(null);
+        resolveRef.current = null;
+      };
+      recorder.onstop = () => {
+        const finalDuration = Math.round((Date.now() - startTimeRef.current) / 1e3);
+        const blob = new Blob(chunksRef.current, { type: mimeType });
+        cleanup();
+        resolveRef.current?.({ blob, duration: finalDuration });
+        resolveRef.current = null;
+      };
+      recorder.start(250);
+      startTimeRef.current = Date.now();
+      setIsRecording(true);
+      timerRef.current = setInterval(() => {
+        const elapsed = Math.round((Date.now() - startTimeRef.current) / 1e3);
+        setDuration(elapsed);
+      }, 1e3);
+    } catch (err) {
+      if (err instanceof DOMException && err.name === "NotAllowedError") {
+        setError("Microphone access denied. Please allow microphone permissions.");
+      } else {
+        setError("Failed to start recording");
+      }
+      cleanup();
+    }
+  }, [isSupported, cleanup]);
+  const stop = useCallback(async () => {
+    return new Promise((resolve) => {
+      if (!mediaRecorderRef.current || mediaRecorderRef.current.state === "inactive") {
+        resolve(null);
+        return;
+      }
+      resolveRef.current = resolve;
+      mediaRecorderRef.current.stop();
+    });
+  }, []);
+  const cancel = useCallback(() => {
+    if (mediaRecorderRef.current && mediaRecorderRef.current.state !== "inactive") {
+      mediaRecorderRef.current.onstop = null;
+      mediaRecorderRef.current.stop();
+    }
+    cleanup();
+    resolveRef.current?.(null);
+    resolveRef.current = null;
+  }, [cleanup]);
+  return {
+    isRecording,
+    duration,
+    start,
+    stop,
+    cancel,
+    isSupported,
+    error
+  };
+}
+function ReplyPreview({ message, onCancel, className }) {
+  const preview = renderQuotedPreview(message);
+  return /* @__PURE__ */ jsxs("div", { className, style: styles7.container, children: [
+    /* @__PURE__ */ jsx("div", { style: styles7.bar }),
+    /* @__PURE__ */ jsxs("div", { style: styles7.content, children: [
+      /* @__PURE__ */ jsxs("div", { style: styles7.senderLine, children: [
+        /* @__PURE__ */ jsx("span", { style: styles7.senderIcon, children: "\u21A9" }),
+        /* @__PURE__ */ jsxs("span", { style: styles7.senderName, children: [
+          "Replying to ",
+          message.senderName
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { style: styles7.preview, children: preview })
+    ] }),
+    /* @__PURE__ */ jsx("button", { onClick: onCancel, style: styles7.cancelButton, title: "Cancel reply", type: "button", children: "\u2715" })
+  ] });
+}
+function renderQuotedPreview(message) {
+  switch (message.type) {
+    case "audio":
+      return "\u{1F3A4} Voice message";
+    case "image":
+      return `\u{1F4F7} ${message.fileName || "Image"}`;
+    case "file":
+      return `\u{1F4CE} ${message.fileName || "File"}`;
+    case "deep_link":
+      return `\u{1F517} ${message.body}`;
+    default: {
+      const body = message.body || "";
+      return body.length > 120 ? `${body.slice(0, 120)}\u2026` : body;
+    }
+  }
+}
+var styles7 = {
+  container: {
+    display: "flex",
+    alignItems: "stretch",
+    gap: "8px",
+    padding: "8px 12px",
+    backgroundColor: "#f9fafb",
+    borderTop: "1px solid #e5e7eb"
+  },
+  bar: {
+    width: "3px",
+    backgroundColor: "#2563eb",
+    borderRadius: "2px",
+    flexShrink: 0
+  },
+  content: {
+    flex: 1,
+    display: "flex",
+    flexDirection: "column",
+    gap: "2px",
+    minWidth: 0
+  },
+  senderLine: {
+    display: "flex",
+    alignItems: "center",
+    gap: "4px"
+  },
+  senderIcon: {
+    fontSize: "11px",
+    color: "#2563eb"
+  },
+  senderName: {
+    fontSize: "12px",
+    fontWeight: 600,
+    color: "#2563eb"
+  },
+  preview: {
+    fontSize: "12px",
+    color: "#6b7280",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  },
+  cancelButton: {
+    alignSelf: "center",
+    width: "24px",
+    height: "24px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    color: "#6b7280",
+    backgroundColor: "transparent",
+    border: "none",
+    borderRadius: "4px",
+    cursor: "pointer",
+    fontSize: "12px",
+    flexShrink: 0
+  }
+};
+function MicIcon({ size = 20, 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: "M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z" })
+    }
+  );
+}
+function MessageInput({
+  onSendText,
+  onSendAudio,
+  onSendFile,
+  onTyping,
+  replyTo,
+  onCancelReply,
+  disabled = false,
+  placeholder = "Type a message...",
+  className
+}) {
+  const [text, setText] = useState("");
+  const [isSending, setIsSending] = useState(false);
+  const [fileError, setFileError] = useState(null);
+  const fileInputRef = useRef(null);
+  const typingTimeoutRef = useRef(null);
+  const isTypingRef = useRef(false);
+  const sendingRef = useRef(false);
+  const { isRecording, duration, start: startRecording, stop: stopRecording, cancel: cancelRecording, isSupported: micSupported, error: micError } = useAudioRecorder();
+  const handleTyping = useCallback(() => {
+    if (!isTypingRef.current) {
+      isTypingRef.current = true;
+      onTyping(true);
+    }
+    if (typingTimeoutRef.current) {
+      clearTimeout(typingTimeoutRef.current);
+    }
+    typingTimeoutRef.current = setTimeout(() => {
+      isTypingRef.current = false;
+      onTyping(false);
+    }, 2e3);
+  }, [onTyping]);
+  useEffect(() => {
+    return () => {
+      if (typingTimeoutRef.current) clearTimeout(typingTimeoutRef.current);
+    };
+  }, []);
+  const handleSendText = useCallback(async () => {
+    const trimmed = text.trim();
+    if (!trimmed || sendingRef.current) return;
+    sendingRef.current = true;
+    setIsSending(true);
+    if (isTypingRef.current) {
+      isTypingRef.current = false;
+      onTyping(false);
+    }
+    if (typingTimeoutRef.current) {
+      clearTimeout(typingTimeoutRef.current);
+      typingTimeoutRef.current = null;
+    }
+    try {
+      await onSendText(trimmed);
+      setText("");
+    } finally {
+      sendingRef.current = false;
+      setIsSending(false);
+    }
+  }, [text, onSendText, onTyping]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        handleSendText();
+      }
+    },
+    [handleSendText]
+  );
+  const handleAudioStop = useCallback(async () => {
+    const result = await stopRecording();
+    if (result) {
+      setIsSending(true);
+      try {
+        await onSendAudio(result.blob, result.duration);
+      } finally {
+        setIsSending(false);
+      }
+    }
+  }, [stopRecording, onSendAudio]);
+  const handleFileSelect = useCallback(
+    async (e) => {
+      const file = e.target.files?.[0];
+      if (!file) return;
+      setFileError(null);
+      if (file.size > MAX_FILE_SIZE) {
+        setFileError(`File too large. Maximum size is ${MAX_FILE_SIZE / (1024 * 1024)}MB.`);
+        return;
+      }
+      setIsSending(true);
+      try {
+        await onSendFile(file);
+      } finally {
+        setIsSending(false);
+        if (fileInputRef.current) fileInputRef.current.value = "";
+      }
+    },
+    [onSendFile]
+  );
+  return /* @__PURE__ */ jsxs("div", { className, style: styles8.container, children: [
+    replyTo && onCancelReply && /* @__PURE__ */ jsx(ReplyPreview, { message: replyTo, onCancel: onCancelReply }),
+    (fileError || micError) && /* @__PURE__ */ jsx("div", { style: styles8.error, children: fileError || micError }),
+    isRecording ? /* @__PURE__ */ jsxs("div", { style: styles8.recordingBar, children: [
+      /* @__PURE__ */ jsxs("div", { style: styles8.recordingIndicator, children: [
+        /* @__PURE__ */ jsx("span", { style: styles8.recordingDot }),
+        "Recording ",
+        formatDuration2(duration)
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: styles8.recordingActions, children: [
+        /* @__PURE__ */ jsx("button", { onClick: cancelRecording, style: styles8.cancelButton, type: "button", children: "Cancel" }),
+        /* @__PURE__ */ jsx("button", { onClick: handleAudioStop, style: styles8.stopButton, type: "button", children: "Send" })
+      ] })
+    ] }) : /* @__PURE__ */ jsxs("div", { style: styles8.inputBar, children: [
+      micSupported && /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: startRecording,
+          disabled: disabled || isSending,
+          style: styles8.iconButton,
+          title: "Record voice message",
+          type: "button",
+          children: /* @__PURE__ */ jsx(MicIcon, { size: 20, color: "#374151" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => fileInputRef.current?.click(),
+          disabled: disabled || isSending,
+          style: styles8.iconButton,
+          title: "Attach file",
+          type: "button",
+          children: "\u{1F4CE}"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: fileInputRef,
+          type: "file",
+          onChange: handleFileSelect,
+          style: { display: "none" },
+          accept: [...SUPPORTED_IMAGE_TYPES, "application/pdf", ".doc", ".docx"].join(",")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          value: text,
+          onChange: (e) => {
+            setText(e.target.value);
+            handleTyping();
+          },
+          onKeyDown: handleKeyDown,
+          placeholder,
+          disabled: disabled || isSending,
+          rows: 1,
+          style: styles8.textarea
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleSendText,
+          disabled: disabled || isSending || !text.trim(),
+          style: {
+            ...styles8.sendButton,
+            opacity: text.trim() ? 1 : 0.4
+          },
+          type: "button",
+          children: "\u27A4"
+        }
+      )
+    ] })
+  ] });
+}
+function formatDuration2(seconds) {
+  const m = Math.floor(seconds / 60);
+  const s = seconds % 60;
+  return `${m}:${s.toString().padStart(2, "0")}`;
+}
+var styles8 = {
+  container: {
+    borderTop: "1px solid #e5e7eb",
+    backgroundColor: "#ffffff"
+  },
+  error: {
+    padding: "6px 16px",
+    fontSize: "12px",
+    color: "#dc2626",
+    backgroundColor: "#fef2f2"
+  },
+  inputBar: {
+    display: "flex",
+    alignItems: "flex-end",
+    gap: "4px",
+    padding: "8px 12px"
+  },
+  iconButton: {
+    width: "36px",
+    height: "36px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "18px",
+    backgroundColor: "transparent",
+    border: "none",
+    borderRadius: "50%",
+    cursor: "pointer",
+    flexShrink: 0
+  },
+  textarea: {
+    flex: 1,
+    padding: "8px 12px",
+    fontSize: "14px",
+    lineHeight: "1.4",
+    border: "1px solid #e5e7eb",
+    borderRadius: "20px",
+    resize: "none",
+    outline: "none",
+    fontFamily: "inherit",
+    maxHeight: "120px"
+  },
+  sendButton: {
+    width: "36px",
+    height: "36px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "18px",
+    backgroundColor: "#2563eb",
+    color: "#ffffff",
+    border: "none",
+    borderRadius: "50%",
+    cursor: "pointer",
+    flexShrink: 0
+  },
+  recordingBar: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: "12px 16px",
+    backgroundColor: "#fef2f2"
+  },
+  recordingIndicator: {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    fontSize: "14px",
+    color: "#dc2626",
+    fontWeight: 500
+  },
+  recordingDot: {
+    width: "8px",
+    height: "8px",
+    borderRadius: "50%",
+    backgroundColor: "#dc2626",
+    animation: "pulse 1.5s infinite"
+  },
+  recordingActions: {
+    display: "flex",
+    gap: "8px"
+  },
+  cancelButton: {
+    padding: "6px 14px",
+    fontSize: "13px",
+    color: "#6b7280",
+    backgroundColor: "#ffffff",
+    border: "1px solid #d1d5db",
+    borderRadius: "6px",
+    cursor: "pointer"
+  },
+  stopButton: {
+    padding: "6px 14px",
+    fontSize: "13px",
+    fontWeight: 500,
+    color: "#ffffff",
+    backgroundColor: "#dc2626",
+    border: "none",
+    borderRadius: "6px",
+    cursor: "pointer"
+  }
+};
+function ParticipantsList({
+  participants,
+  currentUserId,
+  isAdmin,
+  onRemoveUser,
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className, style: styles9.list, children: participants.map((participant) => /* @__PURE__ */ jsxs("div", { style: styles9.item, children: [
+    /* @__PURE__ */ jsxs("div", { style: styles9.avatar, children: [
+      participant.avatar ? /* @__PURE__ */ jsx("img", { src: participant.avatar, alt: "", style: styles9.avatarImg }) : /* @__PURE__ */ jsx("span", { style: styles9.avatarFallback, children: (participant.userName ?? "?").charAt(0).toUpperCase() }),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: {
+            ...styles9.statusDot,
+            backgroundColor: participant.isOnline ? "#22c55e" : "#d1d5db"
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: styles9.info, children: [
+      /* @__PURE__ */ jsxs("span", { style: styles9.name, children: [
+        participant.userName ?? fallbackName(participant.userRole),
+        participant.userId === currentUserId && /* @__PURE__ */ jsx("span", { style: styles9.youBadge, children: " (you)" })
+      ] }),
+      /* @__PURE__ */ jsx(RoleBadge2, { role: participant.userRole })
+    ] }),
+    isAdmin && participant.userId !== currentUserId && /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => onRemoveUser(participant.userId),
+        style: styles9.removeButton,
+        title: `Remove ${participant.userName ?? fallbackName(participant.userRole)}`,
+        type: "button",
+        children: "\u2715"
+      }
+    )
+  ] }, participant.userId)) });
+}
+function fallbackName(role) {
+  switch (role) {
+    case "lab":
+      return "Imaging Center";
+    case "radiologist":
+      return "Radiologist";
+    case "physician":
+      return "Physician";
+    case "admin":
+      return "Natoe Admin";
+    default:
+      return "User";
+  }
+}
+function RoleBadge2({ role }) {
+  const colors = {
+    radiologist: { bg: "#f5f3ff", text: "#7c3aed" },
+    lab: { bg: "#eff6ff", text: "#2563eb" },
+    physician: { bg: "#ecfdf5", text: "#059669" },
+    admin: { bg: "#fef2f2", text: "#dc2626" }
+  };
+  const color = colors[role];
+  return /* @__PURE__ */ jsx("span", { style: { ...styles9.roleBadge, backgroundColor: color.bg, color: color.text }, children: role });
+}
+var styles9 = {
+  list: {
+    display: "flex",
+    flexDirection: "column"
+  },
+  item: {
+    display: "flex",
+    alignItems: "center",
+    gap: "10px",
+    padding: "8px 0",
+    borderBottom: "1px solid #f9fafb"
+  },
+  avatar: {
+    position: "relative",
+    width: "32px",
+    height: "32px",
+    flexShrink: 0
+  },
+  avatarImg: {
+    width: "32px",
+    height: "32px",
+    borderRadius: "50%",
+    objectFit: "cover"
+  },
+  avatarFallback: {
+    width: "32px",
+    height: "32px",
+    borderRadius: "50%",
+    backgroundColor: "#e5e7eb",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "13px",
+    fontWeight: 600,
+    color: "#6b7280"
+  },
+  statusDot: {
+    position: "absolute",
+    bottom: "0",
+    right: "0",
+    width: "8px",
+    height: "8px",
+    borderRadius: "50%",
+    border: "2px solid #ffffff"
+  },
+  info: {
+    display: "flex",
+    alignItems: "center",
+    gap: "6px",
+    flex: 1,
+    minWidth: 0
+  },
+  name: {
+    fontSize: "13px",
+    fontWeight: 500,
+    color: "#111827",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  },
+  youBadge: {
+    fontSize: "11px",
+    fontWeight: 400,
+    color: "#9ca3af"
+  },
+  roleBadge: {
+    fontSize: "10px",
+    fontWeight: 500,
+    padding: "1px 6px",
+    borderRadius: "4px",
+    whiteSpace: "nowrap"
+  },
+  removeButton: {
+    width: "24px",
+    height: "24px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "transparent",
+    border: "none",
+    borderRadius: "4px",
+    cursor: "pointer",
+    fontSize: "11px",
+    color: "#9ca3af",
+    flexShrink: 0
+  }
+};
+function ChannelSettings({
+  channelName,
+  participants,
+  currentUserId,
+  isAdmin,
+  isUpdating,
+  error,
+  onUpdateChannel,
+  onInviteUser,
+  onRemoveUser,
+  onLeaveChannel,
+  onDeleteChannel,
+  onClose,
+  className
+}) {
+  const [editingName, setEditingName] = useState(false);
+  const [nameValue, setNameValue] = useState(channelName);
+  const [showInvite, setShowInvite] = useState(false);
+  const [inviteId, setInviteId] = useState("");
+  const [inviteName, setInviteName] = useState("");
+  const [inviteRole, setInviteRole] = useState("radiologist");
+  const [confirmDelete, setConfirmDelete] = useState(false);
+  const handleSaveName = async () => {
+    if (nameValue.trim() && nameValue !== channelName) {
+      await onUpdateChannel({ name: nameValue.trim() });
+    }
+    setEditingName(false);
+  };
+  const handleInvite = async () => {
+    if (!inviteId.trim() || !inviteName.trim()) return;
+    await onInviteUser({
+      userId: inviteId.trim(),
+      userName: inviteName.trim(),
+      userRole: inviteRole
+    });
+    setInviteId("");
+    setInviteName("");
+    setShowInvite(false);
+  };
+  const handleDelete = async () => {
+    if (!confirmDelete) {
+      setConfirmDelete(true);
+      return;
+    }
+    await onDeleteChannel();
+  };
+  return /* @__PURE__ */ jsxs("div", { className, style: styles10.container, children: [
+    /* @__PURE__ */ jsxs("div", { style: styles10.header, children: [
+      /* @__PURE__ */ jsx("h3", { style: styles10.title, children: "Channel Settings" }),
+      /* @__PURE__ */ jsx("button", { onClick: onClose, style: styles10.closeButton, type: "button", children: "\u2715" })
+    ] }),
+    error && /* @__PURE__ */ jsx("div", { style: styles10.error, children: error.message }),
+    /* @__PURE__ */ jsxs("div", { style: styles10.section, children: [
+      /* @__PURE__ */ jsx("label", { style: styles10.label, children: "Channel Name" }),
+      editingName ? /* @__PURE__ */ jsxs("div", { style: styles10.editRow, children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            value: nameValue,
+            onChange: (e) => setNameValue(e.target.value),
+            style: styles10.input,
+            autoFocus: true
+          }
+        ),
+        /* @__PURE__ */ jsx("button", { onClick: handleSaveName, disabled: isUpdating, style: styles10.saveButton, type: "button", children: "Save" }),
+        /* @__PURE__ */ jsx("button", { onClick: () => setEditingName(false), style: styles10.cancelButton, type: "button", children: "Cancel" })
+      ] }) : /* @__PURE__ */ jsxs("div", { style: styles10.editRow, children: [
+        /* @__PURE__ */ jsx("span", { style: styles10.channelName, children: channelName }),
+        /* @__PURE__ */ jsx("button", { onClick: () => setEditingName(true), style: styles10.editButton, type: "button", children: "Edit" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: styles10.section, children: [
+      /* @__PURE__ */ jsxs("div", { style: styles10.sectionHeader, children: [
+        /* @__PURE__ */ jsxs("label", { style: styles10.label, children: [
+          "Participants (",
+          participants.length,
+          ")"
+        ] }),
+        /* @__PURE__ */ jsx("button", { onClick: () => setShowInvite(!showInvite), style: styles10.addButton, type: "button", children: "+ Add" })
+      ] }),
+      showInvite && /* @__PURE__ */ jsxs("div", { style: styles10.inviteForm, children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            value: inviteId,
+            onChange: (e) => setInviteId(e.target.value),
+            placeholder: "User ID",
+            style: styles10.input
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            value: inviteName,
+            onChange: (e) => setInviteName(e.target.value),
+            placeholder: "User Name",
+            style: styles10.input
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            value: inviteRole,
+            onChange: (e) => setInviteRole(e.target.value),
+            style: styles10.input,
+            children: [
+              /* @__PURE__ */ jsx("option", { value: "radiologist", children: "Radiologist" }),
+              /* @__PURE__ */ jsx("option", { value: "lab", children: "Lab" }),
+              /* @__PURE__ */ jsx("option", { value: "physician", children: "Physician" }),
+              /* @__PURE__ */ jsx("option", { value: "admin", children: "Admin" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { style: styles10.inviteActions, children: [
+          /* @__PURE__ */ jsx("button", { onClick: handleInvite, disabled: isUpdating, style: styles10.saveButton, type: "button", children: "Invite" }),
+          /* @__PURE__ */ jsx("button", { onClick: () => setShowInvite(false), style: styles10.cancelButton, type: "button", children: "Cancel" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        ParticipantsList,
+        {
+          participants,
+          currentUserId,
+          isAdmin,
+          onRemoveUser
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: styles10.dangerZone, children: [
+      /* @__PURE__ */ jsx("button", { onClick: onLeaveChannel, disabled: isUpdating, style: styles10.leaveButton, type: "button", children: "Leave Channel" }),
+      isAdmin && /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleDelete,
+          disabled: isUpdating,
+          style: confirmDelete ? styles10.confirmDeleteButton : styles10.deleteButton,
+          type: "button",
+          children: confirmDelete ? "Confirm Delete" : "Delete Channel"
+        }
+      )
+    ] })
+  ] });
+}
+var styles10 = {
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    height: "100%",
+    backgroundColor: "#ffffff"
+  },
+  header: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: "12px 16px",
+    borderBottom: "1px solid #e5e7eb"
+  },
+  title: {
+    margin: 0,
+    fontSize: "16px",
+    fontWeight: 600
+  },
+  closeButton: {
+    width: "28px",
+    height: "28px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "transparent",
+    border: "none",
+    borderRadius: "4px",
+    cursor: "pointer",
+    fontSize: "14px",
+    color: "#6b7280"
+  },
+  error: {
+    padding: "8px 16px",
+    fontSize: "13px",
+    color: "#dc2626",
+    backgroundColor: "#fef2f2"
+  },
+  section: {
+    padding: "16px",
+    borderBottom: "1px solid #f3f4f6"
+  },
+  sectionHeader: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: "8px"
+  },
+  label: {
+    fontSize: "12px",
+    fontWeight: 600,
+    color: "#6b7280",
+    textTransform: "uppercase",
+    letterSpacing: "0.05em"
+  },
+  channelName: {
+    fontSize: "14px",
+    color: "#111827"
+  },
+  editRow: {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    marginTop: "6px"
+  },
+  input: {
+    padding: "6px 10px",
+    fontSize: "13px",
+    border: "1px solid #d1d5db",
+    borderRadius: "6px",
+    outline: "none",
+    width: "100%"
+  },
+  editButton: {
+    padding: "4px 10px",
+    fontSize: "12px",
+    color: "#2563eb",
+    backgroundColor: "transparent",
+    border: "none",
+    cursor: "pointer"
+  },
+  saveButton: {
+    padding: "6px 12px",
+    fontSize: "12px",
+    fontWeight: 500,
+    color: "#ffffff",
+    backgroundColor: "#2563eb",
+    border: "none",
+    borderRadius: "6px",
+    cursor: "pointer",
+    whiteSpace: "nowrap"
+  },
+  cancelButton: {
+    padding: "6px 12px",
+    fontSize: "12px",
+    color: "#6b7280",
+    backgroundColor: "transparent",
+    border: "1px solid #d1d5db",
+    borderRadius: "6px",
+    cursor: "pointer",
+    whiteSpace: "nowrap"
+  },
+  addButton: {
+    padding: "4px 10px",
+    fontSize: "12px",
+    fontWeight: 500,
+    color: "#2563eb",
+    backgroundColor: "#eff6ff",
+    border: "none",
+    borderRadius: "4px",
+    cursor: "pointer"
+  },
+  inviteForm: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "8px",
+    padding: "12px",
+    marginBottom: "12px",
+    backgroundColor: "#f9fafb",
+    borderRadius: "8px"
+  },
+  inviteActions: {
+    display: "flex",
+    gap: "8px"
+  },
+  dangerZone: {
+    padding: "16px",
+    marginTop: "auto",
+    display: "flex",
+    flexDirection: "column",
+    gap: "8px"
+  },
+  leaveButton: {
+    padding: "8px",
+    fontSize: "13px",
+    fontWeight: 500,
+    color: "#b45309",
+    backgroundColor: "#fffbeb",
+    border: "1px solid #fde68a",
+    borderRadius: "6px",
+    cursor: "pointer"
+  },
+  deleteButton: {
+    padding: "8px",
+    fontSize: "13px",
+    fontWeight: 500,
+    color: "#dc2626",
+    backgroundColor: "#fef2f2",
+    border: "1px solid #fecaca",
+    borderRadius: "6px",
+    cursor: "pointer"
+  },
+  confirmDeleteButton: {
+    padding: "8px",
+    fontSize: "13px",
+    fontWeight: 600,
+    color: "#ffffff",
+    backgroundColor: "#dc2626",
+    border: "none",
+    borderRadius: "6px",
+    cursor: "pointer"
+  }
+};
+function PinnedMessagesBar({
+  pinnedMessages,
+  onJumpTo,
+  onUnpin,
+  className
+}) {
+  const [index, setIndex] = useState(0);
+  if (pinnedMessages.length === 0) return null;
+  const safeIndex = Math.min(index, pinnedMessages.length - 1);
+  const current = pinnedMessages[safeIndex];
+  const preview = renderPinPreview(current);
+  const handleClick = () => {
+    onJumpTo(current.id);
+    if (pinnedMessages.length > 1) {
+      setIndex((prev) => (prev + 1) % pinnedMessages.length);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className, style: styles11.container, children: [
+    /* @__PURE__ */ jsxs("div", { style: styles11.indicator, children: [
+      /* @__PURE__ */ jsx("span", { style: styles11.pinIcon, children: "\u{1F4CC}" }),
+      pinnedMessages.length > 1 && /* @__PURE__ */ jsx("div", { style: styles11.segments, children: pinnedMessages.map((_, i) => /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: {
+            ...styles11.segment,
+            backgroundColor: i === safeIndex ? "#2563eb" : "#d1d5db"
+          }
+        },
+        i
+      )) })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: handleClick,
+        style: styles11.contentButton,
+        type: "button",
+        title: "Click to jump to message",
+        children: [
+          /* @__PURE__ */ jsxs("div", { style: styles11.label, children: [
+            "Pinned ",
+            pinnedMessages.length > 1 ? `(${safeIndex + 1}/${pinnedMessages.length})` : ""
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: styles11.preview, children: [
+            /* @__PURE__ */ jsxs("span", { style: styles11.sender, children: [
+              current.senderName,
+              ":"
+            ] }),
+            " ",
+            preview
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: (e) => {
+          e.stopPropagation();
+          onUnpin(current.id);
+        },
+        style: styles11.unpinButton,
+        title: "Unpin this message",
+        type: "button",
+        children: "\u2715"
+      }
+    )
+  ] });
+}
+function renderPinPreview(message) {
+  switch (message.type) {
+    case "audio":
+      return "\u{1F3A4} Voice message";
+    case "image":
+      return `\u{1F4F7} ${message.fileName || "Image"}`;
+    case "file":
+      return `\u{1F4CE} ${message.fileName || "File"}`;
+    case "deep_link":
+      return `\u{1F517} ${message.body}`;
+    default: {
+      const body = message.body || "";
+      return body.length > 100 ? `${body.slice(0, 100)}\u2026` : body;
+    }
+  }
+}
+var styles11 = {
+  container: {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    padding: "6px 12px",
+    backgroundColor: "#eff6ff",
+    borderBottom: "1px solid #dbeafe"
+  },
+  indicator: {
+    display: "flex",
+    alignItems: "center",
+    gap: "4px",
+    flexShrink: 0
+  },
+  pinIcon: {
+    fontSize: "13px"
+  },
+  segments: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "2px"
+  },
+  segment: {
+    width: "3px",
+    height: "6px",
+    borderRadius: "1px"
+  },
+  contentButton: {
+    flex: 1,
+    display: "flex",
+    flexDirection: "column",
+    gap: "2px",
+    padding: "2px 0",
+    backgroundColor: "transparent",
+    border: "none",
+    textAlign: "left",
+    cursor: "pointer",
+    minWidth: 0,
+    overflow: "hidden"
+  },
+  label: {
+    fontSize: "11px",
+    fontWeight: 600,
+    color: "#2563eb"
+  },
+  preview: {
+    fontSize: "12px",
+    color: "#374151",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  },
+  sender: {
+    fontWeight: 600
+  },
+  unpinButton: {
+    width: "24px",
+    height: "24px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    color: "#6b7280",
+    backgroundColor: "transparent",
+    border: "none",
+    borderRadius: "4px",
+    cursor: "pointer",
+    fontSize: "11px",
+    flexShrink: 0
+  }
+};
+function CollabPanel({
+  orderId,
+  patientData,
+  participantIds,
+  showSeenBy = true,
+  className,
+  style
+}) {
+  const { config } = useCollab();
+  const [showSettings, setShowSettings] = useState(false);
+  const messageListRef = useRef(null);
+  const {
+    conversation,
+    messages,
+    pinnedMessages,
+    participants,
+    typingUsers,
+    isLoading,
+    hasMore,
+    error,
+    replyTo,
+    setReplyTo,
+    sendMessage,
+    sendAudioMessage,
+    sendFileMessage,
+    sendTyping,
+    markAsRead,
+    loadMoreMessages,
+    pinMessage,
+    unpinMessage
+  } = useConversation({ orderId, patientData, participantIds });
+  const channelSettings = useChannelSettings({
+    conversationId: conversation?.id ?? null
+  });
+  const { handleDeepLink } = useDeepLinks();
+  const handleOpenDicom = () => {
+    if (patientData.studyId && patientData.storageId && config.onOpenDicom) {
+      config.onOpenDicom(patientData.studyId, patientData.storageId);
+    }
+  };
+  const handleJumpToMessage = (messageId) => {
+    messageListRef.current?.scrollToMessage(messageId);
+  };
+  const handleCopy = async (text) => {
+    try {
+      if (navigator.clipboard) {
+        await navigator.clipboard.writeText(text);
+      }
+    } catch {
+    }
+  };
+  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: [
+      /* @__PURE__ */ jsx("p", { style: panelStyles.errorTitle, children: "Unable to load conversation" }),
+      /* @__PURE__ */ jsx("p", { style: panelStyles.errorMessage, children: error })
+    ] }) });
+  }
+  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,
+      {
+        patientData,
+        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)
+      }
+    )
+  ] }) });
+}
+var panelStyles = {
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    height: "100%",
+    backgroundColor: "#ffffff",
+    borderRadius: "8px",
+    overflow: "hidden",
+    border: "1px solid #e5e7eb",
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
+  },
+  loadingState: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    height: "100%",
+    fontSize: "14px",
+    color: "#9ca3af"
+  },
+  errorState: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    height: "100%",
+    padding: "24px",
+    textAlign: "center"
+  },
+  errorTitle: {
+    fontSize: "15px",
+    fontWeight: 500,
+    color: "#dc2626",
+    margin: "0 0 4px"
+  },
+  errorMessage: {
+    fontSize: "13px",
+    color: "#6b7280",
+    margin: 0
+  }
+};
+function CollabPopup({
+  orderId,
+  patientData,
+  participantIds,
+  isOpen,
+  onClose,
+  initialPosition,
+  width = 380,
+  height = 520,
+  className
+}) {
+  const [position, setPosition] = useState(
+    initialPosition || {
+      x: window.innerWidth - width - 24,
+      y: Math.max(24, window.innerHeight - height - 104)
+    }
+  );
+  const [isDragging, setIsDragging] = useState(false);
+  const [isMinimized, setIsMinimized] = useState(false);
+  const dragOffset = useRef({ x: 0, y: 0 });
+  const containerRef = useRef(null);
+  const handleMouseDown = useCallback(
+    (e) => {
+      if (!e.target.closest("[data-drag-handle]")) return;
+      setIsDragging(true);
+      dragOffset.current = {
+        x: e.clientX - position.x,
+        y: e.clientY - position.y
+      };
+      e.preventDefault();
+    },
+    [position]
+  );
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleKey = (e) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    };
+    window.addEventListener("keydown", handleKey);
+    return () => window.removeEventListener("keydown", handleKey);
+  }, [isOpen, onClose]);
+  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)))
+      });
+    };
+    const handleMouseUp = () => {
+      setIsDragging(false);
+    };
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [isDragging, width, height, isMinimized]);
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className,
+      style: {
+        ...styles12.container,
+        left: position.x,
+        top: position.y,
+        width,
+        height: isMinimized ? 48 : height,
+        cursor: isDragging ? "grabbing" : "default"
+      },
+      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__ */ jsx(
+              "button",
+              {
+                onClick: () => setIsMinimized(!isMinimized),
+                style: styles12.titleButton,
+                title: isMinimized ? "Expand" : "Minimize",
+                type: "button",
+                children: isMinimized ? "\u25A2" : "\u2014"
+              }
+            ),
+            /* @__PURE__ */ jsx("button", { onClick: onClose, style: styles12.titleButton, title: "Close", type: "button", children: "\u2715" })
+          ] })
+        ] }),
+        !isMinimized && /* @__PURE__ */ jsx("div", { style: styles12.panelWrapper, children: /* @__PURE__ */ jsx(CollabPanel, { orderId, patientData, participantIds }) })
+      ]
+    }
+  );
+}
+var styles12 = {
+  container: {
+    position: "fixed",
+    zIndex: 9999,
+    borderRadius: "12px",
+    boxShadow: "0 8px 30px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08)",
+    overflow: "hidden",
+    display: "flex",
+    flexDirection: "column",
+    backgroundColor: "#ffffff",
+    border: "1px solid #e5e7eb",
+    transition: "height 0.2s ease"
+  },
+  titleBar: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: "0 12px",
+    height: "48px",
+    backgroundColor: "#1e293b",
+    cursor: "grab",
+    userSelect: "none",
+    flexShrink: 0
+  },
+  titleText: {
+    fontSize: "13px",
+    fontWeight: 500,
+    color: "#ffffff",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  },
+  titleActions: {
+    display: "flex",
+    gap: "4px",
+    flexShrink: 0
+  },
+  titleButton: {
+    width: "28px",
+    height: "28px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "transparent",
+    border: "none",
+    borderRadius: "4px",
+    cursor: "pointer",
+    fontSize: "13px",
+    color: "#94a3b8"
+  },
+  panelWrapper: {
+    flex: 1,
+    overflow: "hidden"
+  }
+};
+function useInlineCollab({
+  orderId,
+  patientData,
+  participantIds = [],
+  messageLimit = 5
+}) {
+  const {
+    socket,
+    config,
+    requestPreview,
+    invalidatePreview,
+    createConversationWithMessage
+  } = useCollab();
+  const [preview, setPreview] = useState(null);
+  const [messages, setMessages] = useState([]);
+  const [participants, setParticipants] = useState([]);
+  const [unreadCount, setUnreadCount] = useState(0);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isSubscribed, setIsSubscribed] = useState(false);
+  const [error, setError] = useState(null);
+  const elementRef = useRef(null);
+  const observerRef = useRef(null);
+  const subscribedConversationIdRef = useRef(null);
+  const trimToLimit = useCallback(
+    (msgs) => msgs.length > messageLimit ? msgs.slice(msgs.length - messageLimit) : msgs,
+    [messageLimit]
+  );
+  const buildName = useCallback(
+    () => buildChannelName(patientData),
+    [patientData]
+  );
+  useEffect(() => {
+    let cancelled = false;
+    const load = async () => {
+      setIsLoading(true);
+      setError(null);
+      try {
+        const result = await requestPreview(orderId);
+        if (cancelled) return;
+        setPreview(result);
+        if (result) {
+          setMessages(trimToLimit(result.lastMessages));
+          setParticipants(result.participants);
+          setUnreadCount(result.unreadCount);
+        }
+      } catch (err) {
+        if (cancelled) return;
+        setError(err instanceof Error ? err.message : "Failed to load preview");
+      } finally {
+        if (!cancelled) setIsLoading(false);
+      }
+    };
+    load();
+    return () => {
+      cancelled = true;
+    };
+  }, [orderId, requestPreview, trimToLimit]);
+  const subscribe = useCallback(
+    (conversationId) => {
+      if (subscribedConversationIdRef.current === conversationId) return;
+      socket.joinConversation(conversationId, {
+        onMessage: (msg) => {
+          setMessages((prev) => trimToLimit([...prev, msg]));
+          if (msg.senderId !== config.userId) {
+            setUnreadCount((prev) => prev + 1);
+          }
+        },
+        onUserJoined: (participant) => {
+          setParticipants(
+            (prev) => prev.some((p) => p.userId === participant.userId) ? prev : [...prev, participant]
+          );
+        },
+        onUserLeft: (participant) => {
+          setParticipants((prev) => prev.filter((p) => p.userId !== participant.userId));
+        }
+      });
+      subscribedConversationIdRef.current = conversationId;
+      setIsSubscribed(true);
+    },
+    [socket, trimToLimit, config.userId]
+  );
+  const unsubscribe = useCallback(() => {
+    const convId = subscribedConversationIdRef.current;
+    if (convId) {
+      socket.leaveConversation(convId);
+      subscribedConversationIdRef.current = null;
+      setIsSubscribed(false);
+    }
+  }, [socket]);
+  const containerRef = useCallback(
+    (element) => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+        observerRef.current = null;
+      }
+      elementRef.current = element;
+      if (!element) return;
+      observerRef.current = new IntersectionObserver(
+        (entries) => {
+          const entry = entries[0];
+          if (!entry) return;
+          const convId = preview?.conversationId;
+          if (!convId) return;
+          if (entry.isIntersecting) {
+            subscribe(convId);
+          } else {
+            unsubscribe();
+          }
+        },
+        { threshold: 0.1 }
+      );
+      observerRef.current.observe(element);
+    },
+    [preview, subscribe, unsubscribe]
+  );
+  useEffect(() => {
+    return () => {
+      if (observerRef.current) observerRef.current.disconnect();
+      unsubscribe();
+    };
+  }, [unsubscribe]);
+  useEffect(() => {
+    if (preview?.conversationId && elementRef.current && !observerRef.current) {
+      containerRef(elementRef.current);
+    }
+  }, [preview, containerRef]);
+  const dispatchSend = useCallback(
+    async (payload) => {
+      if (!preview) {
+        try {
+          const result = await createConversationWithMessage(orderId, payload, {
+            name: buildName(),
+            participantIds
+          });
+          const newPreview = {
+            conversationId: result.conversation.id,
+            orderId,
+            messageCount: 1,
+            unreadCount: 0,
+            lastMessages: [result.message],
+            participants: result.conversation.participants,
+            name: result.conversation.name
+          };
+          setPreview(newPreview);
+          setMessages([result.message]);
+          setParticipants(result.conversation.participants);
+          invalidatePreview(orderId);
+          if (elementRef.current) {
+            subscribe(result.conversation.id);
+          }
+        } catch (err) {
+          setError(err instanceof Error ? err.message : "Failed to send message");
+          config.onError?.({
+            code: "SEND_ERROR",
+            message: "Failed to send first message",
+            details: err
+          });
+        }
+        return;
+      }
+      try {
+        await socket.sendMessage(preview.conversationId, payload);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Failed to send message");
+        config.onError?.({
+          code: "SEND_ERROR",
+          message: "Failed to send message",
+          details: err
+        });
+      }
+    },
+    [
+      preview,
+      orderId,
+      buildName,
+      participantIds,
+      createConversationWithMessage,
+      invalidatePreview,
+      subscribe,
+      socket,
+      config
+    ]
+  );
+  const sendMessage = useCallback(
+    async (body) => {
+      const trimmed = body.trim();
+      if (!trimmed) return;
+      await dispatchSend({ body: trimmed, type: "text" });
+    },
+    [dispatchSend]
+  );
+  const sendAudioMessage = useCallback(
+    async (audioBlob, duration) => {
+      if (!config.onUploadFile) {
+        setError("File upload is not configured");
+        return;
+      }
+      try {
+        const url = await config.onUploadFile(audioBlob, "voice-message.webm");
+        await dispatchSend({
+          body: "Voice message",
+          type: "audio",
+          mediaUrl: url,
+          mediaDuration: duration
+        });
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Failed to send voice message");
+        config.onError?.({
+          code: "SEND_ERROR",
+          message: "Failed to send voice message",
+          details: err
+        });
+      }
+    },
+    [config, dispatchSend]
+  );
+  return {
+    hasConversation: !!preview,
+    messages,
+    participants,
+    unreadCount,
+    isLoading,
+    isSubscribed,
+    error,
+    sendMessage,
+    sendAudioMessage,
+    containerRef
+  };
+}
+function CollabInline({
+  orderId,
+  patientData,
+  participantIds,
+  onExpand,
+  messageLimit = 5,
+  placeholder = "Type a message about this case...",
+  className,
+  style
+}) {
+  const {
+    hasConversation,
+    messages,
+    unreadCount,
+    isLoading,
+    isSubscribed,
+    error,
+    sendMessage,
+    sendAudioMessage,
+    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__ */ 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 }),
+    /* @__PURE__ */ jsx(
+      InlineInputBar,
+      {
+        onSend: sendMessage,
+        onSendAudio: sendAudioMessage,
+        placeholder,
+        unreadCount: hasConversation ? unreadCount : 0,
+        isLive: isSubscribed,
+        showExpand: hasConversation && !!onExpand,
+        onExpand
+      }
+    )
+  ] });
+}
+function InlineMessageRow({ message }) {
+  if (message.type === "system") {
+    return /* @__PURE__ */ jsx("div", { style: styles13.systemRow, children: /* @__PURE__ */ jsx("span", { style: styles13.systemText, children: message.body }) });
+  }
+  if (message.type === "audio" && message.mediaUrl) {
+    return /* @__PURE__ */ jsxs("div", { style: styles13.messageRow, children: [
+      /* @__PURE__ */ jsx(RoleDot, { role: message.senderRole }),
+      /* @__PURE__ */ jsxs("span", { style: styles13.senderName, children: [
+        message.senderName,
+        ":"
+      ] }),
+      /* @__PURE__ */ jsx(InlineAudioPlayer, { url: message.mediaUrl, duration: message.mediaDuration })
+    ] });
+  }
+  const preview = renderMessagePreview(message);
+  return /* @__PURE__ */ jsxs("div", { style: styles13.messageRow, children: [
+    /* @__PURE__ */ jsx(RoleDot, { role: message.senderRole }),
+    /* @__PURE__ */ jsxs("span", { style: styles13.senderName, children: [
+      message.senderName,
+      ":"
+    ] }),
+    /* @__PURE__ */ jsx("span", { style: styles13.messageText, children: preview })
+  ] });
+}
+function RoleDot({ role }) {
+  const colors = {
+    radiologist: "#7c3aed",
+    lab: "#2563eb",
+    physician: "#059669",
+    admin: "#dc2626"
+  };
+  return /* @__PURE__ */ jsx("span", { style: { ...styles13.roleDot, backgroundColor: colors[role] } });
+}
+function InlineAudioPlayer({ url, duration }) {
+  const audioRef = useRef(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [currentTime, setCurrentTime] = useState(0);
+  const toggle = useCallback(
+    (e) => {
+      e.stopPropagation();
+      const audio = audioRef.current;
+      if (!audio) return;
+      if (isPlaying) {
+        audio.pause();
+      } else {
+        audio.play().catch(() => {
+        });
+      }
+    },
+    [isPlaying]
+  );
+  useEffect(() => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    const onPlay = () => setIsPlaying(true);
+    const onPause = () => setIsPlaying(false);
+    const onEnded = () => {
+      setIsPlaying(false);
+      setCurrentTime(0);
+    };
+    const onTimeUpdate = () => setCurrentTime(audio.currentTime);
+    audio.addEventListener("play", onPlay);
+    audio.addEventListener("pause", onPause);
+    audio.addEventListener("ended", onEnded);
+    audio.addEventListener("timeupdate", onTimeUpdate);
+    return () => {
+      audio.removeEventListener("play", onPlay);
+      audio.removeEventListener("pause", onPause);
+      audio.removeEventListener("ended", onEnded);
+      audio.removeEventListener("timeupdate", onTimeUpdate);
+    };
+  }, []);
+  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: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: toggle,
+        style: styles13.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__ */ jsx("span", { style: styles13.audioDuration, children: formatDuration3(displayTime) }),
+    /* @__PURE__ */ jsx("audio", { ref: audioRef, src: url, preload: "metadata" })
+  ] });
+}
+function renderMessagePreview(message) {
+  switch (message.type) {
+    case "image":
+      return `\u{1F4F7} ${message.fileName || "Image"}`;
+    case "file":
+      return `\u{1F4CE} ${message.fileName || "File"}`;
+    case "deep_link":
+      return `\u{1F517} ${message.body}`;
+    default:
+      return message.body;
+  }
+}
+function formatDuration3(seconds) {
+  const safe = Math.max(0, Math.floor(seconds));
+  const m = Math.floor(safe / 60);
+  const s = safe % 60;
+  return `${m}:${s.toString().padStart(2, "0")}`;
+}
+function InlineInputBar({
+  onSend,
+  onSendAudio,
+  placeholder,
+  unreadCount,
+  isLive,
+  showExpand,
+  onExpand
+}) {
+  const [text, setText] = useState("");
+  const [isSending, setIsSending] = useState(false);
+  const inputRef = useRef(null);
+  const {
+    isRecording,
+    duration,
+    start: startRecording,
+    stop: stopRecording,
+    cancel: cancelRecording,
+    isSupported: micSupported,
+    error: micError
+  } = useAudioRecorder();
+  const handleSend = useCallback(async () => {
+    const trimmed = text.trim();
+    if (!trimmed || isSending) return;
+    setIsSending(true);
+    try {
+      await onSend(trimmed);
+      setText("");
+      inputRef.current?.focus();
+    } finally {
+      setIsSending(false);
+    }
+  }, [text, isSending, onSend]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        handleSend();
+      }
+    },
+    [handleSend]
+  );
+  const handleStopRecording = useCallback(async () => {
+    const result = await stopRecording();
+    if (result) {
+      setIsSending(true);
+      try {
+        await onSendAudio(result.blob, result.duration);
+      } finally {
+        setIsSending(false);
+      }
+    }
+  }, [stopRecording, onSendAudio]);
+  if (isRecording) {
+    return /* @__PURE__ */ jsxs("div", { style: styles13.recordingBar, children: [
+      /* @__PURE__ */ jsx("span", { style: styles13.recordingDot }),
+      /* @__PURE__ */ jsxs("span", { style: styles13.recordingLabel, children: [
+        "Recording ",
+        formatDuration3(duration)
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: cancelRecording,
+          style: styles13.recordingCancel,
+          title: "Cancel recording",
+          type: "button",
+          children: "Cancel"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleStopRecording,
+          style: styles13.recordingSend,
+          title: "Send voice message",
+          type: "button",
+          children: "Send"
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { style: styles13.inputBar, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        type: "text",
+        value: text,
+        onChange: (e) => setText(e.target.value),
+        onKeyDown: handleKeyDown,
+        placeholder: micError ?? placeholder,
+        disabled: isSending,
+        style: styles13.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" }),
+    micSupported && !text.trim() && /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: startRecording,
+        disabled: isSending,
+        style: styles13.micButton,
+        title: "Record voice message",
+        type: "button",
+        children: /* @__PURE__ */ jsx(MicIcon, { size: 16, color: "#374151" })
+      }
+    ),
+    text.trim() && /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: handleSend,
+        disabled: isSending,
+        style: styles13.sendButton,
+        title: "Send message",
+        type: "button",
+        children: "\u27A4"
+      }
+    ),
+    showExpand && onExpand && /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: onExpand,
+        style: styles13.expandButton,
+        title: "Expand to full chat",
+        type: "button",
+        children: "\u26F6"
+      }
+    )
+  ] });
+}
+var styles13 = {
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    width: "100%",
+    padding: "6px 8px",
+    backgroundColor: "#ffffff",
+    border: "1px solid #e5e7eb",
+    borderRadius: "8px",
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
+  },
+  loadingState: {
+    padding: "8px",
+    fontSize: "12px",
+    color: "#9ca3af",
+    textAlign: "center"
+  },
+  error: {
+    padding: "4px 8px",
+    marginBottom: "4px",
+    fontSize: "11px",
+    color: "#dc2626",
+    backgroundColor: "#fef2f2",
+    borderRadius: "4px"
+  },
+  preview: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "2px",
+    marginBottom: "6px",
+    paddingBottom: "6px",
+    borderBottom: "1px solid #f3f4f6"
+  },
+  messageRow: {
+    display: "flex",
+    alignItems: "center",
+    gap: "6px",
+    fontSize: "12px",
+    lineHeight: "1.4",
+    overflow: "hidden"
+  },
+  roleDot: {
+    flexShrink: 0,
+    width: "6px",
+    height: "6px",
+    borderRadius: "50%"
+  },
+  senderName: {
+    flexShrink: 0,
+    fontWeight: 600,
+    color: "#374151"
+  },
+  messageText: {
+    color: "#4b5563",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    minWidth: 0,
+    flex: 1
+  },
+  systemRow: {
+    fontSize: "11px",
+    color: "#9ca3af",
+    fontStyle: "italic",
+    textAlign: "center",
+    padding: "2px 0"
+  },
+  systemText: {
+    opacity: 0.8
+  },
+  // ── Audio player (inline) ──
+  audioPlayer: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "6px",
+    padding: "2px 8px",
+    borderRadius: "12px",
+    backgroundColor: "#eff6ff",
+    border: "1px solid #dbeafe",
+    flex: 1,
+    minWidth: 0
+  },
+  audioButton: {
+    width: "20px",
+    height: "20px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "10px",
+    color: "#ffffff",
+    backgroundColor: "#2563eb",
+    border: "none",
+    borderRadius: "50%",
+    cursor: "pointer",
+    flexShrink: 0
+  },
+  audioWaveform: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "2px",
+    height: "16px",
+    flex: 1,
+    minWidth: 0
+  },
+  waveBar: {
+    display: "inline-block",
+    width: "2px",
+    borderRadius: "1px",
+    backgroundColor: "#60a5fa"
+  },
+  audioDuration: {
+    fontSize: "11px",
+    color: "#2563eb",
+    fontVariantNumeric: "tabular-nums",
+    fontWeight: 500,
+    flexShrink: 0
+  },
+  // ── Input bar ──
+  inputBar: {
+    display: "flex",
+    alignItems: "center",
+    gap: "6px"
+  },
+  input: {
+    flex: 1,
+    padding: "6px 10px",
+    fontSize: "13px",
+    border: "1px solid #e5e7eb",
+    borderRadius: "16px",
+    outline: "none",
+    fontFamily: "inherit",
+    minWidth: 0
+  },
+  unreadBadge: {
+    flexShrink: 0,
+    minWidth: "18px",
+    height: "18px",
+    padding: "0 5px",
+    fontSize: "10px",
+    fontWeight: 600,
+    color: "#ffffff",
+    backgroundColor: "#dc2626",
+    borderRadius: "10px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  liveDot: {
+    flexShrink: 0,
+    width: "6px",
+    height: "6px",
+    borderRadius: "50%",
+    backgroundColor: "#22c55e"
+  },
+  micButton: {
+    flexShrink: 0,
+    width: "28px",
+    height: "28px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "13px",
+    backgroundColor: "#f3f4f6",
+    border: "none",
+    borderRadius: "50%",
+    cursor: "pointer"
+  },
+  sendButton: {
+    flexShrink: 0,
+    width: "28px",
+    height: "28px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "13px",
+    color: "#ffffff",
+    backgroundColor: "#2563eb",
+    border: "none",
+    borderRadius: "50%",
+    cursor: "pointer"
+  },
+  expandButton: {
+    flexShrink: 0,
+    width: "28px",
+    height: "28px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "12px",
+    color: "#6b7280",
+    backgroundColor: "transparent",
+    border: "1px solid #e5e7eb",
+    borderRadius: "50%",
+    cursor: "pointer"
+  },
+  // ── Recording mode ──
+  recordingBar: {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    padding: "6px 10px",
+    backgroundColor: "#fef2f2",
+    border: "1px solid #fecaca",
+    borderRadius: "16px"
+  },
+  recordingDot: {
+    width: "8px",
+    height: "8px",
+    borderRadius: "50%",
+    backgroundColor: "#dc2626",
+    flexShrink: 0,
+    animation: "pulse 1.5s infinite"
+  },
+  recordingLabel: {
+    flex: 1,
+    fontSize: "12px",
+    fontWeight: 500,
+    color: "#dc2626",
+    fontVariantNumeric: "tabular-nums"
+  },
+  recordingCancel: {
+    padding: "4px 10px",
+    fontSize: "11px",
+    color: "#6b7280",
+    backgroundColor: "#ffffff",
+    border: "1px solid #d1d5db",
+    borderRadius: "12px",
+    cursor: "pointer",
+    flexShrink: 0
+  },
+  recordingSend: {
+    padding: "4px 10px",
+    fontSize: "11px",
+    fontWeight: 500,
+    color: "#ffffff",
+    backgroundColor: "#dc2626",
+    border: "none",
+    borderRadius: "12px",
+    cursor: "pointer",
+    flexShrink: 0
+  }
+};
+function useConversationList(options) {
+  const enabled = options?.enabled ?? true;
+  const { fetchConversationList, config, totalUnread: serverTotalUnread } = useCollab();
+  const [conversations, setConversations] = useState([]);
+  const [isLoading, setIsLoading] = useState(enabled);
+  const [error, setError] = useState(null);
+  const silentRefresh = useCallback(async () => {
+    try {
+      const list = await fetchConversationList();
+      setConversations(list);
+    } catch (err) {
+      config.onError?.({
+        code: "LIST_ERROR",
+        message: err instanceof Error ? err.message : "Failed to load conversations",
+        details: err
+      });
+    }
+  }, [fetchConversationList, config]);
+  const refresh = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const list = await fetchConversationList();
+      setConversations(list);
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : "Failed to load conversations";
+      setError(msg);
+      config.onError?.({
+        code: "LIST_ERROR",
+        message: msg,
+        details: err
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  }, [fetchConversationList, config]);
+  useEffect(() => {
+    if (!enabled) return;
+    refresh();
+  }, [enabled, refresh]);
+  const hasHandledInitialUnreadRef = useRef(false);
+  useEffect(() => {
+    if (!enabled) return;
+    if (!hasHandledInitialUnreadRef.current) {
+      hasHandledInitialUnreadRef.current = true;
+      return;
+    }
+    silentRefresh();
+  }, [serverTotalUnread, enabled]);
+  const filter = useCallback(
+    (query) => {
+      const q = query.trim().toLowerCase();
+      if (!q) return conversations;
+      return conversations.filter((c) => {
+        const patient = c.patientSnapshot?.patientName?.toLowerCase() || "";
+        const name = c.name.toLowerCase();
+        return name.includes(q) || patient.includes(q);
+      });
+    },
+    [conversations]
+  );
+  const totalUnread = conversations.reduce((sum, c) => sum + c.unreadCount, 0);
+  return {
+    conversations,
+    isLoading,
+    error,
+    refresh,
+    filter,
+    totalUnread
+  };
+}
+function ConversationListItem({
+  item,
+  isSelected,
+  onClick,
+  className
+}) {
+  const hasUnread = item.unreadCount > 0;
+  const displayName = item.name || item.patientSnapshot?.patientName || "Unknown";
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      className,
+      onClick,
+      style: {
+        ...styles14.container,
+        ...isSelected ? styles14.selected : {},
+        ...hasUnread ? styles14.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: styles14.content, children: [
+          /* @__PURE__ */ jsxs("div", { style: styles14.topRow, children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  ...styles14.name,
+                  ...hasUnread ? styles14.nameUnread : {}
+                },
+                children: displayName
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  ...styles14.time,
+                  ...hasUnread ? styles14.timeUnread : {}
+                },
+                children: formatRelativeTime(item.lastActivityAt)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: styles14.bottomRow, children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  ...styles14.preview,
+                  ...hasUnread ? styles14.previewUnread : {}
+                },
+                children: renderLastMessagePreview(item.lastMessage)
+              }
+            ),
+            hasUnread && /* @__PURE__ */ jsx("span", { style: styles14.badge, children: item.unreadCount > 99 ? "99+" : item.unreadCount })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function renderLastMessagePreview(message) {
+  if (!message) return "No messages yet";
+  const prefix = message.senderName ? `${message.senderName}: ` : "";
+  switch (message.type) {
+    case "audio":
+      return `${prefix}\u{1F3A4} Voice message`;
+    case "image":
+      return `${prefix}\u{1F4F7} ${message.fileName || "Image"}`;
+    case "file":
+      return `${prefix}\u{1F4CE} ${message.fileName || "File"}`;
+    case "deep_link":
+      return `${prefix}\u{1F517} ${message.body}`;
+    case "system":
+      return message.body;
+    default: {
+      const body = message.body || "";
+      const preview = body.length > 60 ? `${body.slice(0, 60)}\u2026` : body;
+      return `${prefix}${preview}`;
+    }
+  }
+}
+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",
+    alignItems: "center",
+    gap: "12px",
+    padding: "10px 12px",
+    width: "100%",
+    backgroundColor: "transparent",
+    border: "none",
+    borderBottom: "1px solid #f3f4f6",
+    cursor: "pointer",
+    textAlign: "left"
+  },
+  selected: {
+    backgroundColor: "#eff6ff"
+  },
+  unread: {},
+  avatarWrapper: {
+    position: "relative",
+    width: "40px",
+    height: "40px",
+    flexShrink: 0
+  },
+  avatar: {
+    width: "40px",
+    height: "40px",
+    borderRadius: "50%",
+    objectFit: "cover"
+  },
+  avatarFallback: {
+    width: "40px",
+    height: "40px",
+    borderRadius: "50%",
+    backgroundColor: "#e5e7eb",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "15px",
+    fontWeight: 600,
+    color: "#6b7280"
+  },
+  unreadDot: {
+    position: "absolute",
+    top: "0",
+    left: "0",
+    width: "10px",
+    height: "10px",
+    borderRadius: "50%",
+    backgroundColor: "#2563eb",
+    border: "2px solid #ffffff"
+  },
+  content: {
+    flex: 1,
+    display: "flex",
+    flexDirection: "column",
+    gap: "2px",
+    minWidth: 0
+  },
+  topRow: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "baseline",
+    gap: "8px"
+  },
+  name: {
+    fontSize: "14px",
+    fontWeight: 500,
+    color: "#111827",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    flex: 1,
+    minWidth: 0
+  },
+  nameUnread: {
+    fontWeight: 700
+  },
+  time: {
+    fontSize: "11px",
+    color: "#9ca3af",
+    flexShrink: 0
+  },
+  timeUnread: {
+    color: "#2563eb",
+    fontWeight: 600
+  },
+  bottomRow: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    gap: "8px"
+  },
+  preview: {
+    fontSize: "13px",
+    color: "#6b7280",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    flex: 1,
+    minWidth: 0
+  },
+  previewUnread: {
+    color: "#111827",
+    fontWeight: 500
+  },
+  badge: {
+    minWidth: "20px",
+    height: "20px",
+    padding: "0 6px",
+    fontSize: "11px",
+    fontWeight: 600,
+    color: "#ffffff",
+    backgroundColor: "#2563eb",
+    borderRadius: "10px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0
+  }
+};
+function ConversationList({
+  conversations,
+  selectedId,
+  isLoading,
+  error,
+  onSelect,
+  title = "Conversations",
+  className
+}) {
+  const [query, setQuery] = useState("");
+  const [showUnreadOnly, setShowUnreadOnly] = useState(false);
+  const filtered = useMemo(() => {
+    let result = conversations;
+    if (showUnreadOnly) {
+      result = result.filter((c) => c.unreadCount > 0);
+    }
+    const q = query.trim().toLowerCase();
+    if (q) {
+      result = result.filter((c) => {
+        const patient = c.patientSnapshot?.patientName?.toLowerCase() || "";
+        const name = c.name.toLowerCase();
+        return name.includes(q) || patient.includes(q);
+      });
+    }
+    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 })
+      ] }),
+      /* @__PURE__ */ jsx("div", { style: styles15.searchRow, children: /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          value: query,
+          onChange: (e) => setQuery(e.target.value),
+          placeholder: "Search patients or channels...",
+          style: styles15.searchInput
+        }
+      ) }),
+      /* @__PURE__ */ jsxs("div", { style: styles15.filterRow, children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setShowUnreadOnly(false),
+            style: {
+              ...styles15.filterButton,
+              ...!showUnreadOnly ? styles15.filterButtonActive : {}
+            },
+            type: "button",
+            children: "All"
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => setShowUnreadOnly(true),
+            style: {
+              ...styles15.filterButton,
+              ...showUnreadOnly ? styles15.filterButtonActive : {}
+            },
+            type: "button",
+            children: [
+              "Unread ",
+              totalUnread > 0 && `(${totalUnread})`
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__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" }),
+      filtered.map((item) => /* @__PURE__ */ jsx(
+        ConversationListItem,
+        {
+          item,
+          isSelected: selectedId === item.id,
+          onClick: () => onSelect(item)
+        },
+        item.id
+      ))
+    ] })
+  ] });
+}
+var styles15 = {
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    height: "100%",
+    backgroundColor: "#ffffff",
+    borderRight: "1px solid #e5e7eb"
+  },
+  header: {
+    padding: "12px",
+    borderBottom: "1px solid #e5e7eb",
+    backgroundColor: "#f9fafb",
+    flexShrink: 0
+  },
+  titleRow: {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    marginBottom: "8px"
+  },
+  title: {
+    margin: 0,
+    fontSize: "15px",
+    fontWeight: 600,
+    color: "#111827"
+  },
+  totalBadge: {
+    minWidth: "20px",
+    height: "20px",
+    padding: "0 6px",
+    fontSize: "11px",
+    fontWeight: 600,
+    color: "#ffffff",
+    backgroundColor: "#2563eb",
+    borderRadius: "10px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  searchRow: {
+    marginBottom: "8px"
+  },
+  searchInput: {
+    width: "100%",
+    padding: "6px 10px",
+    fontSize: "13px",
+    border: "1px solid #e5e7eb",
+    borderRadius: "6px",
+    outline: "none",
+    fontFamily: "inherit"
+  },
+  filterRow: {
+    display: "flex",
+    gap: "4px"
+  },
+  filterButton: {
+    flex: 1,
+    padding: "5px 8px",
+    fontSize: "12px",
+    color: "#6b7280",
+    backgroundColor: "#ffffff",
+    border: "1px solid #e5e7eb",
+    borderRadius: "6px",
+    cursor: "pointer"
+  },
+  filterButtonActive: {
+    color: "#ffffff",
+    backgroundColor: "#2563eb",
+    borderColor: "#2563eb",
+    fontWeight: 500
+  },
+  list: {
+    flex: 1,
+    overflowY: "auto"
+  },
+  state: {
+    padding: "24px 16px",
+    fontSize: "13px",
+    color: "#9ca3af",
+    textAlign: "center"
+  },
+  errorState: {
+    padding: "16px",
+    fontSize: "13px",
+    color: "#dc2626",
+    backgroundColor: "#fef2f2",
+    margin: "12px",
+    borderRadius: "6px",
+    textAlign: "center"
+  }
+};
+function CollabInbox({
+  initialConversationId,
+  onSelectConversation,
+  title,
+  className,
+  style
+}) {
+  const { conversations, isLoading, error } = useConversationList();
+  const [selectedId, setSelectedId] = useState(initialConversationId ?? null);
+  const selected = conversations.find((c) => c.id === selectedId) || null;
+  const handleSelect = (item) => {
+    setSelectedId(item.id);
+    onSelectConversation?.(item);
+  };
+  return /* @__PURE__ */ jsxs("div", { className, style: { ...styles16.container, ...style }, children: [
+    /* @__PURE__ */ jsx("div", { style: styles16.sidebar, children: /* @__PURE__ */ jsx(
+      ConversationList,
+      {
+        conversations,
+        selectedId,
+        isLoading,
+        error,
+        onSelect: handleSelect,
+        title
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { style: styles16.main, children: selected ? /* @__PURE__ */ jsx(
+      CollabPanel,
+      {
+        orderId: selected.orderId,
+        patientData: buildPatientData(selected),
+        showSeenBy: true,
+        style: styles16.panel
+      },
+      selected.id
+    ) : /* @__PURE__ */ jsx(EmptyState, { hasAny: conversations.length > 0 }) })
+  ] });
+}
+function buildPatientData(item) {
+  if (item.patientSnapshot) return item.patientSnapshot;
+  return {
+    patientName: item.name,
+    orderId: item.orderId
+  };
+}
+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" })
+  ] });
+}
+var styles16 = {
+  container: {
+    display: "flex",
+    height: "100%",
+    width: "100%",
+    backgroundColor: "#ffffff",
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
+  },
+  sidebar: {
+    width: "320px",
+    minWidth: "280px",
+    flexShrink: 0,
+    display: "flex",
+    flexDirection: "column"
+  },
+  main: {
+    flex: 1,
+    display: "flex",
+    flexDirection: "column",
+    minWidth: 0,
+    padding: "12px",
+    backgroundColor: "#f3f4f6"
+  },
+  panel: {
+    height: "100%",
+    width: "100%"
+  },
+  empty: {
+    flex: 1,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: "48px 24px",
+    textAlign: "center"
+  },
+  emptyIcon: {
+    fontSize: "48px",
+    marginBottom: "12px"
+  },
+  emptyTitle: {
+    margin: "0 0 6px",
+    fontSize: "16px",
+    fontWeight: 600,
+    color: "#374151"
+  },
+  emptySubtitle: {
+    margin: 0,
+    fontSize: "13px",
+    color: "#6b7280",
+    maxWidth: "320px"
+  }
+};
+function useMessages({
+  conversationId,
+  initialLimit = MESSAGES_PAGE_SIZE
+}) {
+  const { fetchMessages, config } = useCollab();
+  const [messages, setMessages] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [hasMore, setHasMore] = useState(true);
+  const [error, setError] = useState(null);
+  const loadedRef = useRef(null);
+  useEffect(() => {
+    if (!conversationId) {
+      setMessages([]);
+      setHasMore(false);
+      loadedRef.current = null;
+      return;
+    }
+    if (loadedRef.current === conversationId) return;
+    let cancelled = false;
+    const loadInitial = async () => {
+      setIsLoading(true);
+      setError(null);
+      try {
+        const initial = await fetchMessages(conversationId, { limit: initialLimit });
+        if (cancelled) return;
+        setMessages(initial);
+        setHasMore(initial.length >= initialLimit);
+        loadedRef.current = conversationId;
+      } catch (err) {
+        if (cancelled) return;
+        const msg = err instanceof Error ? err.message : "Failed to load messages";
+        setError(msg);
+        config.onError?.({
+          code: "LOAD_ERROR",
+          message: "Failed to load messages",
+          details: err
+        });
+      } finally {
+        if (!cancelled) setIsLoading(false);
+      }
+    };
+    loadInitial();
+    return () => {
+      cancelled = true;
+    };
+  }, [conversationId, initialLimit, fetchMessages, config]);
+  const loadMore = useCallback(async () => {
+    if (!conversationId || !hasMore || isLoading) return;
+    const oldestId = messages[0]?.id;
+    setIsLoading(true);
+    try {
+      const older = await fetchMessages(conversationId, {
+        limit: initialLimit,
+        before: oldestId
+      });
+      setMessages((prev) => [...older, ...prev]);
+      setHasMore(older.length >= initialLimit);
+    } catch (err) {
+      config.onError?.({
+        code: "LOAD_ERROR",
+        message: "Failed to load older messages",
+        details: err
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  }, [conversationId, hasMore, isLoading, messages, initialLimit, fetchMessages, config]);
+  const addMessage = useCallback((message) => {
+    setMessages((prev) => [...prev, message]);
+  }, []);
+  const updateMessageReadBy = useCallback((messageId, userId) => {
+    setMessages(
+      (prev) => prev.map(
+        (msg) => msg.id === messageId && !(msg.readBy ?? []).includes(userId) ? { ...msg, readBy: [...msg.readBy ?? [], userId] } : msg
+      )
+    );
+  }, []);
+  const reset = useCallback(() => {
+    setMessages([]);
+    setHasMore(true);
+    setError(null);
+    loadedRef.current = null;
+  }, []);
+  return {
+    messages,
+    isLoading,
+    hasMore,
+    error,
+    loadMore,
+    addMessage,
+    updateMessageReadBy,
+    reset
+  };
+}
+function useUnreadCount() {
+  const { socket, totalUnread } = useCollab();
+  const [counts, setCounts] = useState({});
+  useEffect(() => {
+    socket.onUnreadCountUpdate((serverCounts) => {
+      setCounts(serverCounts);
+    });
+  }, [socket]);
+  const getCountForConversation = useCallback(
+    (conversationId) => {
+      return counts[conversationId] ?? 0;
+    },
+    [counts]
+  );
+  const clearForConversation = useCallback((conversationId) => {
+    setCounts((prev) => {
+      const next = { ...prev };
+      delete next[conversationId];
+      return next;
+    });
+  }, []);
+  return {
+    totalUnread,
+    getCountForConversation,
+    clearForConversation
+  };
+}
+function usePinnedMessages({
+  conversationId,
+  initial = []
+}) {
+  const { pinMessage, unpinMessage, fetchPinnedMessages, config } = useCollab();
+  const [pinnedMessages, setPinnedMessages] = useState(initial);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const refresh = useCallback(async () => {
+    if (!conversationId) return;
+    setIsLoading(true);
+    setError(null);
+    try {
+      const pinned = await fetchPinnedMessages(conversationId);
+      setPinnedMessages(pinned);
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : "Failed to load pinned messages";
+      setError(msg);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [conversationId, fetchPinnedMessages]);
+  useEffect(() => {
+    if (conversationId && initial.length === 0) {
+      refresh();
+    }
+  }, [conversationId]);
+  const pin = useCallback(
+    async (messageId) => {
+      if (!conversationId) return;
+      setError(null);
+      try {
+        await pinMessage(conversationId, messageId);
+      } catch (err) {
+        const msg = err instanceof Error ? err.message : "Failed to pin message";
+        setError(msg);
+        config.onError?.({
+          code: "PIN_ERROR",
+          message: msg,
+          details: err
+        });
+      }
+    },
+    [conversationId, pinMessage, config]
+  );
+  const unpin = useCallback(
+    async (messageId) => {
+      if (!conversationId) return;
+      setError(null);
+      try {
+        await unpinMessage(conversationId, messageId);
+      } catch (err) {
+        const msg = err instanceof Error ? err.message : "Failed to unpin message";
+        setError(msg);
+        config.onError?.({
+          code: "UNPIN_ERROR",
+          message: msg,
+          details: err
+        });
+      }
+    },
+    [conversationId, unpinMessage, config]
+  );
+  const handlePinned = useCallback((message) => {
+    setPinnedMessages((prev) => {
+      if (prev.some((m) => m.id === message.id)) return prev;
+      return [...prev, message];
+    });
+  }, []);
+  const handleUnpinned = useCallback((messageId) => {
+    setPinnedMessages((prev) => prev.filter((m) => m.id !== messageId));
+  }, []);
+  return {
+    pinnedMessages,
+    isLoading,
+    error,
+    pin,
+    unpin,
+    handlePinned,
+    handleUnpinned,
+    refresh
+  };
+}
+
+export { AUDIO_MIME_TYPE, ChannelSettings, CollabInbox, CollabInline, CollabPanel, CollabPopup, CollabProvider, CollabSocket, ConversationList, ConversationListItem, DEEP_LINK_PREFIX, EVENTS, MAX_FILE_SIZE, MAX_PINNED_MESSAGES, MESSAGES_PAGE_SIZE, MESSAGE_TYPES, MessageActionsMenu, MessageBubble, MessageInput, MessageList, ParticipantsList, PatientHeader, PinnedMessagesBar, ReplyPreview, ReplyQuoteBlock, SUPPORTED_IMAGE_TYPES, SeenByIndicator, TYPING_DEBOUNCE_MS, useAudioRecorder, useChannelSettings, useCollab, useConversation, useConversationList, useDeepLinks, useInlineCollab, useMessages, usePinnedMessages, useUnreadCount };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map