add online presence rooms

Author: iamfaran

client/packages/lowcoder/src/comps/comps/chatBoxComponentv2/ChatBoxContext.tsx

@@ -1,5 +1,5 @@
 import { createContext, useContext } from "react";
-import type { ChatRoom, PendingRoomInvite } from "./store";
+import type { ChatRoom, OnlineUser, PendingRoomInvite } from "./store";
 
 type ChatEventName =
   | "messageSent"
@@ -27,6 +27,7 @@ export interface ChatBoxContextValue {
   currentUserId: string;
   currentUserName: string;
   typingUsers: any[];
+  onlineUsers: OnlineUser[];
   pendingInvites: PendingRoomInvite[];
 
   // Exposed state

client/packages/lowcoder/src/comps/comps/chatBoxComponentv2/chatBoxComp.tsx

@@ -105,6 +105,7 @@ const childrenMap = {
   rooms: jsonArrayControl([]),
   currentRoomId: withDefault(StringControl, ""),
   pendingInvites: jsonArrayControl([]),
+  onlineUsers: jsonArrayControl([]),
   showRoomsPanel: withDefault(BoolControl, true),
   roomsPanelWidth: withDefault(StringControl, "240px"),
   allowRoomCreation: withDefault(BoolControl, true),
@@ -186,6 +187,11 @@ const ChatBoxPropertyView = React.memo((props: { children: any }) => {
           tooltip:
             "Array of users currently typing. Bind to {{ chatController1.typingUsers }}",
         })}
+        {children.onlineUsers.propertyView({
+          label: "Online Users",
+          tooltip:
+            "Array of online users with presence. Bind to {{ chatController1.onlineUsers }}. Shape: [{ userId, userName, currentRoomId }]",
+        })}
       </Section>
 
       <Section name="Display">
@@ -225,6 +231,7 @@ let ChatBoxV2Tmp = (function () {
     const messages = Array.isArray(props.messages) ? props.messages : [];
     const rooms = (Array.isArray(props.rooms) ? props.rooms : []) as unknown as ChatRoom[];
     const typingUsers = Array.isArray(props.typingUsers) ? props.typingUsers : [];
+    const onlineUsers = Array.isArray(props.onlineUsers) ? props.onlineUsers : [];
     const pendingInvites = (Array.isArray(props.pendingInvites)
       ? props.pendingInvites
       : []) as unknown as PendingRoomInvite[];
@@ -238,6 +245,7 @@ let ChatBoxV2Tmp = (function () {
       currentUserId: props.currentUserId,
       currentUserName: props.currentUserName,
       typingUsers,
+      onlineUsers: onlineUsers as any,
       pendingInvites,
 
       chatTitle: props.chatTitle,

client/packages/lowcoder/src/comps/comps/chatBoxComponentv2/components/ChatBoxView.tsx

@@ -1,8 +1,10 @@
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
 import {
   Wrapper,
   ChatPanelContainer,
   ChatHeaderBar,
+  OnlineCountBadge,
+  OnlineCountDot,
 } from "../styles";
 import { MessageList } from "./MessageList";
 import { InputBar } from "./InputBar";
@@ -21,6 +23,14 @@ export const ChatBoxView = React.memo(() => {
     ? ctx.currentRoom.name
     : ctx.chatTitle.value;
 
+  // Count users online in the current room (peers only, not counting self)
+  const roomOnlineCount = useMemo(() => {
+    if (!ctx.currentRoomId) return 0;
+    return ctx.onlineUsers.filter(
+      (u) => u.currentRoomId === ctx.currentRoomId && u.userId !== ctx.currentUserId,
+    ).length + 1; // +1 for self
+  }, [ctx.onlineUsers, ctx.currentRoomId, ctx.currentUserId]);
+
   return (
     <Wrapper $style={ctx.style} $anim={ctx.animationStyle}>
       {/* ── Rooms sidebar ───────────────────────────────────────── */}
@@ -39,13 +49,21 @@ export const ChatBoxView = React.memo(() => {
       <ChatPanelContainer>
         {ctx.showHeader && (
           <ChatHeaderBar>
-            <div style={{ fontWeight: 600, fontSize: 16 }}>
-              {headerTitle}
-            </div>
-            {ctx.currentRoom?.description && (
-              <div style={{ fontSize: 12, color: "#888", marginTop: 2 }}>
-                {ctx.currentRoom.description}
+            <div>
+              <div style={{ fontWeight: 600, fontSize: 16 }}>
+                {headerTitle}
               </div>
+              {ctx.currentRoom?.description && (
+                <div style={{ fontSize: 12, color: "#888", marginTop: 2 }}>
+                  {ctx.currentRoom.description}
+                </div>
+              )}
+            </div>
+            {ctx.currentRoomId && roomOnlineCount > 0 && (
+              <OnlineCountBadge>
+                <OnlineCountDot />
+                {roomOnlineCount} online
+              </OnlineCountBadge>
             )}
           </ChatHeaderBar>
         )}

client/packages/lowcoder/src/comps/comps/chatBoxComponentv2/components/RoomPanel.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
 import { Button, Input, Tooltip, Popconfirm } from "antd";
 import {
   PlusOutlined,
@@ -9,15 +9,22 @@ import {
   RobotOutlined,
   MailOutlined,
   UserAddOutlined,
+  TeamOutlined,
 } from "@ant-design/icons";
-import type { ChatRoom } from "../store";
+import type { ChatRoom, OnlineUser } from "../store";
 import {
   RoomPanelContainer,
   RoomPanelHeader,
   RoomListContainer,
   RoomItemStyled,
   SearchResultBadge,
   LlmRoomBadge,
+  OnlinePresenceSection,
+  OnlinePresenceLabel,
+  OnlineUserItem,
+  OnlineAvatar,
+  OnlineDot,
+  OnlineUserName,
 } from "../styles";
 import { useChatBox } from "../ChatBoxContext";
 
@@ -31,17 +38,33 @@ export const RoomPanel = React.memo((props: RoomPanelProps) => {
   const {
     rooms,
     currentRoomId,
+    currentUserId,
+    currentUserName,
     allowRoomCreation,
     allowRoomSearch,
     roomsPanelWidth,
     pendingInvites,
+    onlineUsers,
     onRoomSwitch,
     onRoomJoin,
     onRoomLeave,
     onInviteAccept,
     onInviteDecline,
   } = useChatBox();
 
+  // Users in the current room (from Pluv presence), plus self
+  const roomOnlineUsers = useMemo<OnlineUser[]>(() => {
+    const peers = onlineUsers.filter(
+      (u) => u.currentRoomId === currentRoomId && u.userId !== currentUserId,
+    );
+    const self: OnlineUser = {
+      userId: currentUserId,
+      userName: currentUserName,
+      currentRoomId,
+    };
+    return currentRoomId ? [self, ...peers] : peers;
+  }, [onlineUsers, currentRoomId, currentUserId, currentUserName]);
+
   const [searchQuery, setSearchQuery] = useState("");
   const [searchResults, setSearchResults] = useState<ChatRoom[]>([]);
   const [isSearchMode, setIsSearchMode] = useState(false);
@@ -308,12 +331,48 @@ export const RoomPanel = React.memo((props: RoomPanelProps) => {
             </>
           )}
       </RoomListContainer>
+
+      {/* ── Online Presence ─────────────────────────────────────── */}
+      {currentRoomId && roomOnlineUsers.length > 0 && (
+        <OnlinePresenceSection>
+          <OnlinePresenceLabel>
+            <TeamOutlined />
+            Online — {roomOnlineUsers.length}
+          </OnlinePresenceLabel>
+          {roomOnlineUsers.map((user) => (
+            <OnlineUserItem key={user.userId}>
+              <OnlineAvatar $color={avatarColor(user.userId)}>
+                {(user.userName || user.userId).slice(0, 1).toUpperCase()}
+                <OnlineDot />
+              </OnlineAvatar>
+              <OnlineUserName title={user.userName}>
+                {user.userId === currentUserId ? `${user.userName} (You)` : user.userName}
+              </OnlineUserName>
+            </OnlineUserItem>
+          ))}
+        </OnlinePresenceSection>
+      )}
     </RoomPanelContainer>
   );
 });
 
 RoomPanel.displayName = "RoomPanel";
 
+// ── Avatar color helper ───────────────────────────────────────────────────────
+
+const AVATAR_PALETTE = [
+  "#1890ff", "#52c41a", "#fa8c16", "#722ed1",
+  "#eb2f96", "#13c2c2", "#faad14", "#f5222d",
+];
+
+function avatarColor(userId: string): string {
+  let hash = 0;
+  for (let i = 0; i < userId.length; i++) {
+    hash = userId.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return AVATAR_PALETTE[Math.abs(hash) % AVATAR_PALETTE.length];
+}
+
 // ── Section label ─────────────────────────────────────────────────────────────
 
 const RoomSectionLabel = React.memo(({ label }: { label: string }) => (

client/packages/lowcoder/src/comps/comps/chatBoxComponentv2/styles.ts

@@ -346,3 +346,83 @@ export const LlmRoomBadge = styled.span`
   padding: 1px 5px;
   flex-shrink: 0;
 `;
+
+// ── Online Presence styles ──────────────────────────────────────────────────
+
+export const OnlinePresenceSection = styled.div`
+  border-top: 1px solid #eee;
+  padding: 8px;
+  flex-shrink: 0;
+`;
+
+export const OnlinePresenceLabel = styled.div`
+  font-size: 10px;
+  font-weight: 600;
+  color: #aaa;
+  letter-spacing: 0.6px;
+  text-transform: uppercase;
+  padding: 4px 2px 6px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+`;
+
+export const OnlineUserItem = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding: 4px 2px;
+  font-size: 12px;
+  color: #444;
+  overflow: hidden;
+`;
+
+export const OnlineAvatar = styled.div<{ $color: string }>`
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  background: ${(p) => p.$color};
+  color: #fff;
+  font-size: 10px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  position: relative;
+`;
+
+export const OnlineDot = styled.span`
+  position: absolute;
+  bottom: -1px;
+  right: -1px;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: #52c41a;
+  border: 1.5px solid #fafbfc;
+`;
+
+export const OnlineUserName = styled.span`
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+export const OnlineCountBadge = styled.span`
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  color: #52c41a;
+  font-weight: 500;
+`;
+
+export const OnlineCountDot = styled.span`
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: #52c41a;
+  display: inline-block;
+`;