@algenium/blocks 1.16.0 → 1.17.0

package/dist/index.cjs

@@ -6737,7 +6737,9 @@ function ChatSidebarProvider({
   const [isLoading, setIsLoading] = React7.useState(false);
   const [activeCaseId, setActiveCaseId] = React7.useState(null);
   const [activeRoomId, setActiveRoomId] = React7.useState(null);
+  const [searchQuery, setSearchQuery] = React7.useState("");
   const fetchRef = React7.useRef(fetchConversations);
+  const prevOpenRef = React7.useRef(isOpen);
   fetchRef.current = fetchConversations;
   const persistOpen = React7.useCallback((open2) => {
     setIsOpen(open2);
@@ -6759,6 +6761,32 @@ function ChatSidebarProvider({
   React7.useEffect(() => {
     void loadConversations();
   }, [loadConversations]);
+  React7.useEffect(() => {
+    if (isOpen && !prevOpenRef.current) {
+      void loadConversations();
+    }
+    prevOpenRef.current = isOpen;
+  }, [isOpen, loadConversations]);
+  const clearRoomUnread = React7.useCallback((roomId) => {
+    setConversations(
+      (prev) => prev.map((conv) => ({
+        ...conv,
+        rooms: conv.rooms.map(
+          (room) => room.id === roomId ? { ...room, unreadCount: 0 } : room
+        )
+      }))
+    );
+  }, []);
+  const totalUnreadCount = React7.useMemo(
+    () => conversations.reduce(
+      (sum, conv) => sum + conv.rooms.reduce(
+        (roomSum, room) => roomSum + (room.unreadCount ?? 0),
+        0
+      ),
+      0
+    ),
+    [conversations]
+  );
   const toggle = React7.useCallback(() => persistOpen(!isOpen), [isOpen, persistOpen]);
   const open = React7.useCallback(() => persistOpen(true), [persistOpen]);
   const close = React7.useCallback(() => {
@@ -6766,6 +6794,7 @@ function ChatSidebarProvider({
     setView("list");
     setActiveCaseId(null);
     setActiveRoomId(null);
+    setSearchQuery("");
   }, [persistOpen]);
   const openChat = React7.useCallback(
     (caseId, roomId) => {
@@ -6807,31 +6836,40 @@ function ChatSidebarProvider({
     isLoading,
     activeCaseId,
     activeRoomId,
+    searchQuery,
+    setSearchQuery,
+    totalUnreadCount,
     toggle,
     open,
     close,
     openChat,
     selectRoom,
     back,
-    refetch: loadConversations
+    refetch: loadConversations,
+    clearRoomUnread
   };
   return /* @__PURE__ */ jsxRuntime.jsx(ChatSidebarContext.Provider, { value, children });
 }
 var PING_INTERVAL = 3e4;
 var MIN_RECONNECT_DELAY = 1e3;
 var MAX_RECONNECT_DELAY = 3e4;
+var MARK_READ_DEBOUNCE_MS = 1e3;
 function useChatRoom(roomId, config, options = {}) {
   const {
     minReconnectDelay = MIN_RECONNECT_DELAY,
     maxReconnectDelay = MAX_RECONNECT_DELAY,
-    pingInterval = PING_INTERVAL
+    pingInterval = PING_INTERVAL,
+    onMarkedRead
   } = options;
   const [messages, setMessages] = React7.useState([]);
   const [isConnected, setIsConnected] = React7.useState(false);
   const [error, setError] = React7.useState(null);
   const [typingUsers, setTypingUsers] = React7.useState([]);
+  const [onlineUserIds, setOnlineUserIds] = React7.useState([]);
+  const [readReceipts, setReadReceipts] = React7.useState({});
   const [hasMoreHistory, setHasMoreHistory] = React7.useState(true);
   const [isLoadingHistory, setIsLoadingHistory] = React7.useState(false);
+  const [isInitialLoading, setIsInitialLoading] = React7.useState(false);
   const wsRef = React7.useRef(null);
   const mountedRef = React7.useRef(true);
   const reconnectDelayRef = React7.useRef(minReconnectDelay);
@@ -6844,8 +6882,13 @@ function useChatRoom(roomId, config, options = {}) {
     () => Promise.resolve()
   );
   const configRef = React7.useRef(config);
+  const onMarkedReadRef = React7.useRef(onMarkedRead);
+  const lastSentWatermarkRef = React7.useRef(null);
+  const pendingMarkRef = React7.useRef(null);
+  const markReadTimerRef = React7.useRef(null);
   roomIdRef.current = roomId;
   configRef.current = config;
+  onMarkedReadRef.current = onMarkedRead;
   const clearTimers = React7.useCallback(() => {
     if (reconnectTimerRef.current) {
       clearTimeout(reconnectTimerRef.current);
@@ -6855,7 +6898,74 @@ function useChatRoom(roomId, config, options = {}) {
       clearInterval(pingTimerRef.current);
       pingTimerRef.current = null;
     }
+    if (markReadTimerRef.current) {
+      clearTimeout(markReadTimerRef.current);
+      markReadTimerRef.current = null;
+    }
   }, []);
+  const flushMarkRead = React7.useCallback(async () => {
+    const pending = pendingMarkRef.current;
+    const currentRoomId = roomIdRef.current;
+    if (!pending || !currentRoomId) return;
+    const { lastMessageId, lastReadAt } = pending;
+    pendingMarkRef.current = null;
+    if (lastSentWatermarkRef.current && lastSentWatermarkRef.current >= lastReadAt) {
+      return;
+    }
+    const ws = wsRef.current;
+    if (ws && ws.readyState === WebSocket.OPEN) {
+      ws.send(
+        JSON.stringify({
+          type: "mark_read",
+          lastMessageId,
+          lastReadAt
+        })
+      );
+      lastSentWatermarkRef.current = lastReadAt;
+      onMarkedReadRef.current?.(currentRoomId);
+      return;
+    }
+    try {
+      const jwt = await configRef.current.getToken();
+      if (!jwt) return;
+      const res = await fetch(
+        `${configRef.current.baseUrl}/rooms/${currentRoomId}/read`,
+        {
+          method: "POST",
+          headers: {
+            Authorization: `Bearer ${jwt}`,
+            "Content-Type": "application/json"
+          },
+          body: JSON.stringify({ lastMessageId, lastReadAt })
+        }
+      );
+      if (res.ok) {
+        lastSentWatermarkRef.current = lastReadAt;
+        onMarkedReadRef.current?.(currentRoomId);
+      }
+    } catch {
+    }
+  }, []);
+  const markRead = React7.useCallback(
+    (lastMessageId, lastReadAt) => {
+      if (lastSentWatermarkRef.current && lastSentWatermarkRef.current >= lastReadAt) {
+        return;
+      }
+      const pending = pendingMarkRef.current;
+      if (pending && pending.lastReadAt >= lastReadAt) {
+        return;
+      }
+      pendingMarkRef.current = { lastMessageId, lastReadAt };
+      if (markReadTimerRef.current) {
+        clearTimeout(markReadTimerRef.current);
+      }
+      markReadTimerRef.current = setTimeout(() => {
+        markReadTimerRef.current = null;
+        void flushMarkRead();
+      }, MARK_READ_DEBOUNCE_MS);
+    },
+    [flushMarkRead]
+  );
   const loadMoreHistory = React7.useCallback(async () => {
     if (!roomIdRef.current || isLoadingHistory || !hasMoreHistory) return;
     setIsLoadingHistory(true);
@@ -6888,6 +6998,7 @@ function useChatRoom(roomId, config, options = {}) {
     } catch {
     } finally {
       setIsLoadingHistory(false);
+      setIsInitialLoading(false);
     }
   }, [isLoadingHistory, hasMoreHistory]);
   const sendMessage = React7.useCallback(
@@ -6921,6 +7032,7 @@ function useChatRoom(roomId, config, options = {}) {
     } catch {
       if (mountedRef.current) {
         setError("Failed to get authentication token");
+        setIsInitialLoading(false);
       }
       return;
     }
@@ -6936,6 +7048,7 @@ function useChatRoom(roomId, config, options = {}) {
         setError(
           err instanceof Error ? err.message : "WebSocket creation failed"
         );
+        setIsInitialLoading(false);
       }
       return;
     }
@@ -6960,9 +7073,23 @@ function useChatRoom(roomId, config, options = {}) {
       try {
         const msg = JSON.parse(event.data);
         switch (msg.type) {
-          case "server_hello":
+          case "server_hello": {
+            const readState = msg.readState;
+            if (readState) {
+              setReadReceipts((prev) => {
+                const next = { ...prev };
+                for (const entry of readState) {
+                  const existing = next[entry.userId];
+                  if (!existing || existing < entry.lastReadAt) {
+                    next[entry.userId] = entry.lastReadAt;
+                  }
+                }
+                return next;
+              });
+            }
             void loadMoreHistoryRef.current();
             break;
+          }
           case "new_message": {
             const message = msg.message;
             if (!messageIdsRef.current.has(message.id)) {
@@ -6987,6 +7114,25 @@ function useChatRoom(roomId, config, options = {}) {
             });
             break;
           }
+          case "presence_update": {
+            const ids = msg.onlineUserIds;
+            if (Array.isArray(ids)) {
+              setOnlineUserIds(ids);
+            }
+            break;
+          }
+          case "read_receipt": {
+            const userId = msg.userId;
+            const lastReadAt = msg.lastReadAt;
+            if (userId && lastReadAt) {
+              setReadReceipts((prev) => {
+                const existing = prev[userId];
+                if (existing && existing >= lastReadAt) return prev;
+                return { ...prev, [userId]: lastReadAt };
+              });
+            }
+            break;
+          }
           case "pong":
             break;
           case "error":
@@ -7023,16 +7169,27 @@ function useChatRoom(roomId, config, options = {}) {
       setIsConnected(false);
       setError(null);
       setTypingUsers([]);
+      setOnlineUserIds([]);
+      setReadReceipts({});
       setHasMoreHistory(true);
+      setIsLoadingHistory(false);
+      setIsInitialLoading(false);
       cursorRef.current = null;
       messageIdsRef.current = /* @__PURE__ */ new Set();
+      lastSentWatermarkRef.current = null;
+      pendingMarkRef.current = null;
       return;
     }
     setMessages([]);
     setTypingUsers([]);
+    setOnlineUserIds([]);
+    setReadReceipts({});
     setHasMoreHistory(true);
+    setIsInitialLoading(true);
     cursorRef.current = null;
     messageIdsRef.current = /* @__PURE__ */ new Set();
+    lastSentWatermarkRef.current = null;
+    pendingMarkRef.current = null;
     reconnectDelayRef.current = minReconnectDelay;
     void connect();
     return () => {
@@ -7048,12 +7205,16 @@ function useChatRoom(roomId, config, options = {}) {
     messages,
     sendMessage,
     sendTyping,
+    markRead,
     isConnected,
     error,
     typingUsers,
+    onlineUserIds,
+    readReceipts,
     loadMoreHistory,
     hasMoreHistory,
-    isLoadingHistory
+    isLoadingHistory,
+    isInitialLoading
   };
 }
 var roleColors = {
@@ -7068,21 +7229,27 @@ function ChatRoomView({
   currentUserId,
   config,
   roomLabel,
+  caseNumber,
   labels = {},
   roleLabel,
+  onMarkedRead,
   className
 }) {
   const {
     messages,
     sendMessage,
     sendTyping,
+    markRead,
     isConnected,
     error,
     typingUsers,
+    onlineUserIds,
+    readReceipts,
     loadMoreHistory,
     hasMoreHistory,
-    isLoadingHistory
-  } = useChatRoom(roomId, config);
+    isLoadingHistory,
+    isInitialLoading
+  } = useChatRoom(roomId, config, { onMarkedRead });
   const [newMessage, setNewMessage] = React7.useState("");
   const [pendingAttachments, setPendingAttachments] = React7.useState([]);
   const scrollRef = React7.useRef(null);
@@ -7090,6 +7257,16 @@ function ChatRoomView({
   const fileInputRef = React7.useRef(null);
   const typingTimeoutRef = React7.useRef(null);
   const prevMessageCountRef = React7.useRef(0);
+  const counterpartOnline = React7.useMemo(
+    () => onlineUserIds.some((id) => id !== currentUserId),
+    [onlineUserIds, currentUserId]
+  );
+  React7.useEffect(() => {
+    if (isInitialLoading || messages.length === 0) return;
+    const latest = messages[messages.length - 1];
+    if (!latest) return;
+    markRead(latest.id, latest.createdAt);
+  }, [messages, isInitialLoading, markRead]);
   React7.useEffect(() => {
     const el = scrollRef.current;
     if (!el) return;
@@ -7202,27 +7379,50 @@ function ChatRoomView({
   };
   const getAttachmentUrl = (attachmentId) => `${config.baseUrl}/rooms/${roomId}/attachments/${attachmentId}`;
   const getRoleLabel = (role) => roleLabel ? roleLabel(role) : role;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex h-full flex-col", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-shrink-0 flex items-center justify-between border-b px-4 py-3", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquare, { className: "h-4 w-4 text-primary", "aria-hidden": "true" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: roomLabel ?? "Chat" })
+  const isMessageSeen = (message) => {
+    if (message.senderId !== currentUserId) return false;
+    return Object.entries(readReceipts).some(
+      ([userId, lastReadAt]) => userId !== currentUserId && lastReadAt >= message.createdAt
+    );
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex h-full min-h-0 flex-col", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-shrink-0 flex items-center justify-between border-b px-4 py-2.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium truncate", children: roomLabel ?? "Chat" }),
+          caseNumber && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground truncate", children: caseNumber })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-0.5 flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            lucideReact.Circle,
+            {
+              className: cn(
+                "h-2 w-2 fill-current",
+                counterpartOnline ? "text-emerald-500" : "text-muted-foreground/40"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] text-muted-foreground", children: counterpartOnline ? labels.online ?? "Online" : labels.offline ?? "Offline" })
+        ] })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1.5", children: isConnected ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Wifi, { className: "h-3.5 w-3.5 text-green-500" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.WifiOff, { className: "h-3.5 w-3.5 text-destructive" }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1.5", children: isConnected ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Wifi, { className: "h-3.5 w-3.5 text-emerald-500" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.WifiOff, { className: "h-3.5 w-3.5 text-destructive" }) }) }),
         /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: isConnected ? "Connected" : error ?? "Reconnecting..." })
       ] }) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(
+      /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
           ref: scrollRef,
           onScroll: handleScroll,
           className: "flex-1 overflow-y-auto p-3",
-          children: [
+          children: isInitialLoading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col items-center justify-center py-8", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-6 w-6 animate-spin text-muted-foreground" }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-xs text-muted-foreground", children: labels.loading ?? "Loading messages..." })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             isLoadingHistory && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center py-2", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 animate-spin text-muted-foreground" }) }),
-            messages.length === 0 && !isLoadingHistory ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col items-center justify-center py-8 text-center", children: [
+            messages.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col items-center justify-center py-8 text-center", children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 lucideReact.MessageSquare,
                 {
@@ -7231,112 +7431,132 @@ function ChatRoomView({
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: labels.noMessages ?? "No messages yet" })
-            ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: Object.entries(groupedMessages).map(([date, dateMessages]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "my-3 flex items-center gap-3", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px flex-1 bg-border" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-2 text-xs text-muted-foreground", children: date }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px flex-1 bg-border" })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: dateMessages.map((message) => {
-                const isCurrentUser = message.senderId === currentUserId;
-                return /* @__PURE__ */ jsxRuntime.jsxs(
-                  "div",
-                  {
-                    className: cn(
-                      "flex gap-2",
-                      isCurrentUser ? "flex-row-reverse" : "flex-row"
-                    ),
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        "div",
-                        {
-                          className: cn(
-                            "flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full text-xs font-medium",
-                            roleColors[message.senderRole] ?? roleColors.client
-                          ),
-                          children: (message.senderName ?? message.senderId).split(" ").map((n) => n[0]).join("").slice(0, 2).toUpperCase()
-                        }
+            ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: Object.entries(groupedMessages).map(
+              ([date, dateMessages]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "my-3 flex items-center gap-3", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px flex-1 bg-border" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-2 text-xs text-muted-foreground", children: date }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px flex-1 bg-border" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: dateMessages.map((message) => {
+                  if (message.senderRole === "system") {
+                    return /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        className: "flex justify-center py-1",
+                        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex max-w-[90%] items-center gap-1.5 rounded-full border bg-muted/60 px-3 py-1 text-[11px] text-muted-foreground", children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, { className: "h-3 w-3 flex-shrink-0" }),
+                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-center", children: message.content })
+                        ] })
+                      },
+                      message.id
+                    );
+                  }
+                  const isCurrentUser = message.senderId === currentUserId;
+                  const seen = isMessageSeen(message);
+                  return /* @__PURE__ */ jsxRuntime.jsxs(
+                    "div",
+                    {
+                      className: cn(
+                        "flex gap-2",
+                        isCurrentUser ? "flex-row-reverse" : "flex-row"
                       ),
-                      /* @__PURE__ */ jsxRuntime.jsxs(
-                        "div",
-                        {
-                          className: cn(
-                            "flex max-w-[80%] flex-col",
-                            isCurrentUser ? "items-end" : "items-start"
-                          ),
-                          children: [
-                            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-0.5 flex items-center gap-1.5", children: [
-                              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-foreground", children: message.senderName ?? message.senderId.slice(0, 8) }),
-                              /* @__PURE__ */ jsxRuntime.jsx(
-                                "span",
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "div",
+                          {
+                            className: cn(
+                              "flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full text-xs font-medium",
+                              roleColors[message.senderRole] ?? roleColors.client
+                            ),
+                            children: (message.senderName ?? message.senderId).split(" ").map((n) => n[0]).join("").slice(0, 2).toUpperCase()
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsxs(
+                          "div",
+                          {
+                            className: cn(
+                              "flex max-w-[80%] flex-col",
+                              isCurrentUser ? "items-end" : "items-start"
+                            ),
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-0.5 flex items-center gap-1.5", children: [
+                                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-foreground", children: message.senderName ?? message.senderId.slice(0, 8) }),
+                                /* @__PURE__ */ jsxRuntime.jsx(
+                                  "span",
+                                  {
+                                    className: cn(
+                                      "rounded px-1 py-0.5 text-[10px] font-medium",
+                                      roleColors[message.senderRole] ?? ""
+                                    ),
+                                    children: getRoleLabel(message.senderRole)
+                                  }
+                                ),
+                                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-muted-foreground", children: formatTime2(message.createdAt) })
+                              ] }),
+                              message.content && /* @__PURE__ */ jsxRuntime.jsx(
+                                "div",
                                 {
                                   className: cn(
-                                    "rounded px-1 py-0.5 text-[10px] font-medium",
-                                    roleColors[message.senderRole] ?? ""
+                                    "rounded-2xl px-3 py-2 text-sm shadow-sm",
+                                    isCurrentUser ? "rounded-br-md bg-primary text-primary-foreground" : "rounded-bl-md bg-muted text-foreground"
                                   ),
-                                  children: getRoleLabel(message.senderRole)
+                                  children: message.content
                                 }
                               ),
-                              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-muted-foreground", children: formatTime2(message.createdAt) })
-                            ] }),
-                            message.content && /* @__PURE__ */ jsxRuntime.jsx(
-                              "div",
-                              {
-                                className: cn(
-                                  "rounded-xl px-3 py-2 text-sm",
-                                  isCurrentUser ? "rounded-br-sm bg-primary text-primary-foreground" : "rounded-bl-sm bg-muted text-foreground"
-                                ),
-                                children: message.content
-                              }
-                            ),
-                            message.attachments.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 flex flex-col gap-1", children: message.attachments.map(
-                              (att) => att.mimeType.startsWith("image/") ? /* @__PURE__ */ jsxRuntime.jsx(
-                                "a",
-                                {
-                                  href: getAttachmentUrl(att.id),
-                                  target: "_blank",
-                                  rel: "noopener noreferrer",
-                                  className: "block max-w-[200px] overflow-hidden rounded-lg border",
-                                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                                    "img",
-                                    {
-                                      src: getAttachmentUrl(att.id),
-                                      alt: att.fileName,
-                                      className: "h-auto w-full object-cover",
-                                      loading: "lazy"
-                                    }
-                                  )
-                                },
-                                att.id
-                              ) : /* @__PURE__ */ jsxRuntime.jsxs(
-                                "a",
-                                {
-                                  href: getAttachmentUrl(att.id),
-                                  target: "_blank",
-                                  rel: "noopener noreferrer",
-                                  className: "flex items-center gap-2 rounded-lg border bg-muted/50 px-2 py-1.5 text-xs transition-colors hover:bg-muted",
-                                  children: [
-                                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileIcon, { className: "h-3.5 w-3.5 flex-shrink-0 text-muted-foreground" }),
-                                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
-                                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate font-medium", children: att.fileName }),
-                                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] text-muted-foreground", children: formatFileSize(att.fileSize) })
-                                    ] }),
-                                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { className: "h-3.5 w-3.5 flex-shrink-0 text-muted-foreground" })
-                                  ]
-                                },
-                                att.id
-                              )
-                            ) })
-                          ]
-                        }
-                      )
-                    ]
-                  },
-                  message.id
-                );
-              }) })
-            ] }, date)) })
-          ]
+                              message.attachments.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 flex flex-col gap-1", children: message.attachments.map(
+                                (att) => att.mimeType.startsWith("image/") ? /* @__PURE__ */ jsxRuntime.jsx(
+                                  "a",
+                                  {
+                                    href: getAttachmentUrl(att.id),
+                                    target: "_blank",
+                                    rel: "noopener noreferrer",
+                                    className: "block max-w-[200px] overflow-hidden rounded-lg border",
+                                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                                      "img",
+                                      {
+                                        src: getAttachmentUrl(att.id),
+                                        alt: att.fileName,
+                                        className: "h-auto w-full object-cover",
+                                        loading: "lazy"
+                                      }
+                                    )
+                                  },
+                                  att.id
+                                ) : /* @__PURE__ */ jsxRuntime.jsxs(
+                                  "a",
+                                  {
+                                    href: getAttachmentUrl(att.id),
+                                    target: "_blank",
+                                    rel: "noopener noreferrer",
+                                    className: "flex items-center gap-2 rounded-lg border bg-muted/50 px-2 py-1.5 text-xs transition-colors hover:bg-muted",
+                                    children: [
+                                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileIcon, { className: "h-3.5 w-3.5 flex-shrink-0 text-muted-foreground" }),
+                                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+                                        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate font-medium", children: att.fileName }),
+                                        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] text-muted-foreground", children: formatFileSize(att.fileSize) })
+                                      ] }),
+                                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { className: "h-3.5 w-3.5 flex-shrink-0 text-muted-foreground" })
+                                    ]
+                                  },
+                                  att.id
+                                )
+                              ) }),
+                              isCurrentUser && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-0.5 flex items-center gap-0.5 text-[10px] text-muted-foreground", children: seen ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCheck, { className: "h-3 w-3 text-primary" }),
+                                /* @__PURE__ */ jsxRuntime.jsx("span", { children: labels.seen ?? "Seen" })
+                              ] }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-3 w-3" }) })
+                            ]
+                          }
+                        )
+                      ]
+                    },
+                    message.id
+                  );
+                }) })
+              ] }, date)
+            ) })
+          ] })
         }
       ),
       typingUsers.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 px-3 py-1", children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-muted-foreground italic", children: [
@@ -7431,16 +7651,41 @@ function ChatRoomView({
     ] })
   ] });
 }
+function Input({ className, type, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      type,
+      "data-slot": "input",
+      className: cn(
+        "h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30",
+        "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+        "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
+        className
+      ),
+      ...props
+    }
+  );
+}
 var roomTypeLabels = {
   client_agent: "Client \u2194 Agent",
   dealer_agent: "Dealer \u2194 Agent"
 };
+var statusToneClasses = {
+  success: "bg-emerald-500/10 text-emerald-700 dark:text-emerald-400 border-emerald-500/20",
+  warning: "bg-amber-500/10 text-amber-700 dark:text-amber-400 border-amber-500/20",
+  destructive: "bg-destructive/10 text-destructive border-destructive/20",
+  info: "bg-primary/10 text-primary border-primary/20",
+  neutral: "bg-muted text-muted-foreground border-border"
+};
 function ChatSidebar({
   currentUserId,
   config,
   labels = {},
   roleLabel,
   roomTypeLabel,
+  statusLabel,
+  statusTone,
   mobileTopOffset,
   className
 }) {
@@ -7451,9 +7696,12 @@ function ChatSidebar({
     isLoading,
     activeCaseId,
     activeRoomId,
+    searchQuery,
+    setSearchQuery,
     close,
     selectRoom,
-    back
+    back,
+    clearRoomUnread
   } = useChatSidebar();
   React7.useEffect(() => {
     if (!isOpen || typeof window === "undefined") return;
@@ -7469,12 +7717,24 @@ function ChatSidebar({
       document.body.style.overflow = "";
     };
   }, [isOpen]);
+  const filteredConversations = React7.useMemo(() => {
+    const q = searchQuery.trim().toLowerCase();
+    if (!q) return conversations;
+    return conversations.filter(
+      (c) => c.caseNumber.toLowerCase().includes(q) || (c.clientName?.toLowerCase().includes(q) ?? false)
+    );
+  }, [conversations, searchQuery]);
   if (!isOpen) return null;
   const getRoomTypeLabel = (type) => {
     if (roomTypeLabel) return roomTypeLabel(type);
     return roomTypeLabels[type] ?? type;
   };
+  const getStatusLabel = (status) => statusLabel ? statusLabel(status) : status;
+  const getStatusTone = (status) => statusTone?.(status) ?? "neutral";
   const activeConversation = activeCaseId ? conversations.find((c) => c.caseId === activeCaseId) : null;
+  const activeRoom = activeConversation?.rooms.find(
+    (r2) => r2.id === activeRoomId
+  );
   const cssVars = {
     "--sidebar-top": mobileTopOffset ?? "0px"
   };
@@ -7505,40 +7765,88 @@ function ChatSidebar({
             }
           )
         ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b px-3 py-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Input,
+            {
+              value: searchQuery,
+              onChange: (e) => setSearchQuery(e.target.value),
+              placeholder: labels.searchPlaceholder ?? "Search by case or client...",
+              className: "h-8 pl-8 text-sm"
+            }
+          )
+        ] }) }),
         /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { className: "flex-1", children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-5 w-5 animate-spin text-muted-foreground" }) }) : conversations.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center py-12 text-center px-4", children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquare, { className: "mb-3 h-8 w-8 text-muted-foreground/50" }),
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: labels.noConversations ?? "No conversations yet" })
-        ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-1", children: conversations.map((conv) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-2 pt-3 pb-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-semibold text-foreground", children: conv.caseNumber }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground", children: conv.caseStatus })
-            ] }),
-            conv.clientName && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground truncate", children: conv.clientName })
-          ] }),
-          conv.rooms.map((room) => /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
+        ] }) : filteredConversations.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center py-12 text-center px-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "mb-3 h-8 w-8 text-muted-foreground/50" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: labels.noResults ?? "No matching conversations" })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2 p-3", children: filteredConversations.map((conv) => {
+          const caseUnread = conv.rooms.reduce(
+            (sum, r2) => sum + (r2.unreadCount ?? 0),
+            0
+          );
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
             {
-              type: "button",
-              onClick: () => selectRoom(room.id, conv.caseId),
-              className: cn(
-                "flex w-full items-center justify-between rounded-md px-2 py-2 text-left transition-colors hover:bg-accent",
-                activeRoomId === room.id && "bg-accent"
-              ),
+              className: "rounded-lg border bg-card shadow-sm",
               children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquare, { className: "h-3.5 w-3.5 flex-shrink-0 text-muted-foreground" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm truncate", children: getRoomTypeLabel(room.type) })
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-2 border-b px-3 py-2.5", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold text-foreground truncate", children: conv.caseNumber }),
+                      caseUnread > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                        "span",
+                        {
+                          className: "h-2 w-2 flex-shrink-0 rounded-full bg-primary",
+                          "aria-label": `${caseUnread} unread`
+                        }
+                      )
+                    ] }),
+                    conv.clientName && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground truncate", children: conv.clientName })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "flex-shrink-0 rounded-full border px-2 py-0.5 text-[10px] font-medium",
+                        statusToneClasses[getStatusTone(conv.caseStatus)]
+                      ),
+                      children: getStatusLabel(conv.caseStatus)
+                    }
+                  )
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 flex-shrink-0", children: [
-                  room.lastMessageAt && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-muted-foreground", children: formatRelativeTime(room.lastMessageAt) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-3.5 w-3.5 text-muted-foreground" })
-                ] })
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "divide-y", children: conv.rooms.map((room) => {
+                  const RoomIcon = room.type === "dealer_agent" ? lucideReact.Store : lucideReact.User;
+                  const unread = room.unreadCount ?? 0;
+                  return /* @__PURE__ */ jsxRuntime.jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => selectRoom(room.id, conv.caseId),
+                      className: cn(
+                        "flex w-full items-center gap-2.5 px-3 py-2.5 text-left transition-colors hover:bg-accent/60",
+                        activeRoomId === room.id && "bg-accent"
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-muted", children: /* @__PURE__ */ jsxRuntime.jsx(RoomIcon, { className: "h-3.5 w-3.5 text-muted-foreground" }) }),
+                        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium truncate", children: getRoomTypeLabel(room.type) }),
+                          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[11px] text-muted-foreground", children: room.lastMessageAt ? formatRelativeTime(room.lastMessageAt) : labels.noMessagesShort ?? "No messages" })
+                        ] }),
+                        unread > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-5 min-w-5 flex-shrink-0 items-center justify-center rounded-full bg-primary px-1.5 text-[10px] font-semibold text-primary-foreground", children: unread > 99 ? "99+" : unread })
+                      ]
+                    },
+                    room.id
+                  );
+                }) })
               ]
             },
-            room.id
-          ))
-        ] }, conv.caseId)) }) })
+            conv.caseId
+          );
+        }) }) })
       ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 border-b px-3 py-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -7552,8 +7860,11 @@ function ChatSidebar({
             }
           ),
           activeConversation && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium truncate", children: activeConversation.caseNumber }),
-            activeConversation.clientName && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground truncate", children: activeConversation.clientName })
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium truncate", children: activeRoom ? getRoomTypeLabel(activeRoom.type) : activeConversation.caseNumber }),
+            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-muted-foreground truncate", children: [
+              activeConversation.caseNumber,
+              activeConversation.clientName ? ` \xB7 ${activeConversation.clientName}` : ""
+            ] })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
             Button,
@@ -7572,8 +7883,11 @@ function ChatSidebar({
             roomId: activeRoomId,
             currentUserId,
             config,
+            roomLabel: activeRoom ? getRoomTypeLabel(activeRoom.type) : void 0,
+            caseNumber: activeConversation?.caseNumber,
             labels,
             roleLabel,
+            onMarkedRead: clearRoomUnread,
             className: "flex-1"
           }
         )
@@ -10293,29 +10607,14 @@ function USAddressInput({
     ] })
   ] });
 }
-function Input({ className, type, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "input",
-    {
-      type,
-      "data-slot": "input",
-      className: cn(
-        "h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30",
-        "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
-        "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
-        className
-      ),
-      ...props
-    }
-  );
-}
+var phoneInputGroupClass = "flex h-9 w-full gap-0 overflow-hidden rounded-md border border-input bg-transparent shadow-xs transition-[color,box-shadow] [--PhoneInputCountrySelect-marginRight:0] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 dark:bg-input/30 [&_.PhoneInputCountry]:mr-0";
 var PhoneInput = React7__namespace.forwardRef(
   ({ className, onChange, value, defaultCountry = "MX", ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       RPNInput__namespace.default,
       {
         ref,
-        className: cn("flex", className),
+        className: cn(phoneInputGroupClass, className),
         flagComponent: FlagComponent,
         countrySelectComponent: CountrySelect,
         inputComponent: InputComponent,
@@ -10332,7 +10631,10 @@ PhoneInput.displayName = "PhoneInput";
 var InputComponent = React7__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   Input,
   {
-    className: cn("rounded-e-lg rounded-s-none", className),
+    className: cn(
+      "h-9 min-h-0 rounded-none border-0 bg-transparent shadow-none focus-visible:border-transparent focus-visible:ring-0 dark:bg-transparent",
+      className
+    ),
     ...props,
     ref
   }
@@ -10361,8 +10663,8 @@ var CountrySelect = ({
           Button,
           {
             type: "button",
-            variant: "outline",
-            className: "flex gap-1 rounded-e-none rounded-s-lg border-r-0 px-3 focus:z-10",
+            variant: "ghost",
+            className: "h-9 shrink-0 gap-1 rounded-none border-0 border-r border-input px-2.5 shadow-none hover:bg-muted/50 focus:z-10",
             disabled,
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(