added chat controller component to expose chat data/methods

Author: raheeliftikhar5

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

@@ -0,0 +1,155 @@
+import { AutoHeightControl } from "@lowcoder-ee/comps/controls/autoHeightControl";
+import { BoolControl } from "@lowcoder-ee/comps/controls/boolControl";
+import { StringControl } from "@lowcoder-ee/comps/controls/codeControl";
+import { stringExposingStateControl } from "@lowcoder-ee/comps/controls/codeStateControl";
+import { dropdownControl } from "@lowcoder-ee/comps/controls/dropdownControl";
+import { clickEvent, doubleClickEvent, eventHandlerControl } from "@lowcoder-ee/comps/controls/eventHandlerControl";
+import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
+import { AnimationStyle, TextStyle } from "@lowcoder-ee/comps/controls/styleControlConstants";
+import { EditorContext } from "@lowcoder-ee/comps/editorState";
+import { withDefault } from "@lowcoder-ee/comps/generators/simpleGenerators";
+import { NewChildren } from "@lowcoder-ee/comps/generators/uiCompBuilder";
+import { hiddenPropertyView } from "@lowcoder-ee/comps/utils/propertyUtils";
+import { RecordConstructorToComp } from "lowcoder-core";
+import { ScrollBar, Section, sectionNames } from "lowcoder-design";
+import React, { useContext, useMemo } from "react";
+import { trans } from "i18n";
+
+// Event options for the chat component
+const EventOptions = [clickEvent, doubleClickEvent] as const;
+
+// Define the component's children map
+export const chatCompChildrenMap = {
+  chatName: stringExposingStateControl("chatName", "Chat Room"),
+  userId: stringExposingStateControl("userId", "user_1"),
+  userName: stringExposingStateControl("userName", "User"),
+  applicationId: stringExposingStateControl("applicationId", "lowcoder_app"),
+  roomId: stringExposingStateControl("roomId", "general"),
+  mode: dropdownControl([
+    { label: "🌐 Collaborative (Real-time)", value: "collaborative" },
+    { label: "🔀 Hybrid (Local + Real-time)", value: "hybrid" },
+    { label: "📱 Local Only", value: "local" }
+  ], "collaborative"),
+  
+  // Room Management Configuration
+  allowRoomCreation: withDefault(BoolControl, true),
+  allowRoomJoining: withDefault(BoolControl, true),
+  roomPermissionMode: dropdownControl([
+    { label: "🌐 Open (Anyone can join public rooms)", value: "open" },
+    { label: "🔐 Invite Only (Admin invitation required)", value: "invite" },
+    { label: "👤 Admin Only (Only admins can manage)", value: "admin" }
+  ], "open"),
+  showAvailableRooms: withDefault(BoolControl, true),
+  maxRoomsDisplay: withDefault(StringControl, "10"),
+  
+  // UI Configuration  
+  leftPanelWidth: withDefault(StringControl, "200px"),
+  showRooms: withDefault(BoolControl, true),
+  autoHeight: AutoHeightControl,
+  onEvent: eventHandlerControl(EventOptions),
+  style: styleControl(TextStyle, 'style'),
+  animationStyle: styleControl(AnimationStyle, 'animationStyle'),
+};
+
+export type ChatCompChildrenType = NewChildren<RecordConstructorToComp<typeof chatCompChildrenMap>>;
+
+// Property view component
+export const ChatPropertyView = React.memo((props: {
+  children: ChatCompChildrenType
+}) => {
+  const editorContext = useContext(EditorContext);
+  const editorModeStatus = useMemo(() => editorContext.editorModeStatus, [editorContext.editorModeStatus]);
+
+  const basicSection = useMemo(() => (
+    <Section name={sectionNames.basic}>
+      {props.children.chatName.propertyView({
+        label: "Chat Name",
+        tooltip: "Name displayed in the chat header"
+      })}
+      {props.children.userId.propertyView({
+        label: "User ID",
+        tooltip: "Unique identifier for the current user"
+      })}
+      {props.children.userName.propertyView({
+        label: "User Name",
+        tooltip: "Display name for the current user"
+      })}
+      {props.children.applicationId.propertyView({
+        label: "Application ID",
+        tooltip: "Unique identifier for this Lowcoder application - all chat components with the same Application ID can discover each other's rooms"
+      })}
+      {props.children.roomId.propertyView({
+        label: "Initial Room",
+        tooltip: "Default room to join when the component loads (within the application scope)"
+      })}
+      {props.children.mode.propertyView({
+        label: "Sync Mode",
+        tooltip: "Choose how messages are synchronized: Collaborative (real-time), Hybrid (local + real-time), or Local only"
+      })}
+    </Section>
+  ), [props.children]);
+
+  const roomManagementSection = useMemo(() => (
+    <Section name="Room Management">
+      {props.children.allowRoomCreation.propertyView({
+        label: "Allow Room Creation",
+        tooltip: "Allow users to create new chat rooms"
+      })}
+      {props.children.allowRoomJoining.propertyView({
+        label: "Allow Room Joining",
+        tooltip: "Allow users to join existing rooms"
+      })}
+      {props.children.roomPermissionMode.propertyView({
+        label: "Permission Mode",
+        tooltip: "Control how users can join rooms"
+      })}
+      {props.children.showAvailableRooms.propertyView({
+        label: "Show Available Rooms",
+        tooltip: "Display list of available rooms to join"
+      })}
+      {props.children.maxRoomsDisplay.propertyView({
+        label: "Max Rooms to Display",
+        tooltip: "Maximum number of rooms to show in the list"
+      })}
+    </Section>
+  ), [props.children]);
+
+  const interactionSection = useMemo(() => 
+    ["logic", "both"].includes(editorModeStatus) && (
+      <Section name={sectionNames.interaction}>
+        {hiddenPropertyView(props.children)}
+        {props.children.onEvent.getPropertyView()}
+      </Section>
+    ), [editorModeStatus, props.children]);
+
+  const layoutSection = useMemo(() => 
+    ["layout", "both"].includes(editorModeStatus) && (
+      <>
+        <Section name={sectionNames.layout}>
+          {props.children.autoHeight.getPropertyView()}
+          {props.children.leftPanelWidth.propertyView({
+            label: "Left Panel Width",
+            tooltip: "Width of the rooms/people panel (e.g., 300px, 25%)"
+          })}
+          {props.children.showRooms.propertyView({
+            label: "Show Rooms"
+          })}
+        </Section>
+        <Section name={sectionNames.style}>
+          {props.children.style.getPropertyView()}
+        </Section>
+        <Section name={sectionNames.animationStyle} hasTooltip={true}>
+          {props.children.animationStyle.getPropertyView()}
+        </Section>
+      </>
+    ), [editorModeStatus, props.children]);
+
+  return (
+    <>
+      {basicSection}
+      {roomManagementSection}
+      {interactionSection}
+      {layoutSection}
+    </>
+  );
+});

client/packages/lowcoder/src/comps/comps/chatBoxComponent/chatControllerComp.tsx

@@ -48,6 +48,7 @@ export interface UseChatManagerReturn {
   joinRoom: (roomId: string) => Promise<boolean>;
   leaveRoom: (roomId: string) => Promise<boolean>;
   canUserJoinRoom: (roomId: string) => Promise<boolean>;
+  getRoomParticipants: (roomId: string) => Promise<Array<{ id: string; name: string }>>;
 
   // Manager access (for advanced use)
   manager: HybridChatManager | null;
@@ -95,7 +96,7 @@ export function useChatManager(config: UseChatManagerConfig): UseChatManagerRetu
         // 🧪 TEST: Add collaborative config to enable YjsPluvProvider for testing
         // This enables testing of the Yjs document structure (Step 1)
         collaborative: {
-          serverUrl: 'ws://localhost:3001', // Placeholder - not used in Step 1
+          serverUrl: 'ws://localhost:3005', // Placeholder - not used in Step 1
           roomId: config.roomId,
           authToken: undefined,
           autoConnect: true,
@@ -353,7 +354,7 @@ export function useChatManager(config: UseChatManagerConfig): UseChatManagerRetu
     }
 
     try {
-                          const result = await manager.createRoom({
+      const result = await manager.createRoom({
         name,
         type,
         participants: [config.userId],
@@ -558,6 +559,23 @@ export function useChatManager(config: UseChatManagerConfig): UseChatManagerRetu
       return false;
     }
   }, [config.userId]);
+
+  const getRoomParticipants = useCallback(async (roomId: string): Promise<Array<{ id: string; name: string }>> => {
+    const manager = managerRef.current;
+    if (!manager) return [];
+    
+    try {
+      const result = await manager.getRoomParticipants(roomId);
+      if (result.success) {
+        return result.data!;
+      }
+      setError(result.error || 'Failed to get room participants');
+      return [];
+    } catch (error) {
+      setError(error instanceof Error ? error.message : 'Failed to get room participants');
+      return [];
+    }
+  }, []);
 
   return {
     // Connection state
@@ -588,6 +606,7 @@ export function useChatManager(config: UseChatManagerConfig): UseChatManagerRetu
     joinRoom,
     leaveRoom,
     canUserJoinRoom,
+    getRoomParticipants,
 
     // Manager access
     manager: managerRef.current,

client/packages/lowcoder/src/comps/comps/chatBoxComponent/chatUtils.tsx

@@ -394,6 +394,64 @@ export class HybridChatManager {
     console.log('[HybridChatManager] 🔐 Checking if user can join room:', { roomId, userId });
     return this.getActiveProvider().canUserJoinRoom(roomId, userId);
   }
+
+  async getRoomParticipants(roomId: string): Promise<OperationResult<Array<{ id: string; name: string }>>> {
+    console.log('[HybridChatManager] 👥 Getting room participants:', { roomId });
+    
+    try {
+      // First get the room to access participants
+      const roomResult = await this.getRoom(roomId);
+      if (!roomResult.success || !roomResult.data) {
+        return {
+          success: false,
+          error: roomResult.error || 'Room not found',
+          timestamp: Date.now()
+        };
+      }
+
+      const room = roomResult.data;
+      const participants = room.participants || [];
+
+      // Get participant details by looking at recent messages to extract user names
+      const messagesResult = await this.getMessages(roomId, 100); // Get recent messages
+      if (!messagesResult.success) {
+        // If we can't get messages, return participants with just IDs
+        return {
+          success: true,
+          data: participants.map(id => ({ id, name: id })), // Fallback to ID as name
+          timestamp: Date.now()
+        };
+      }
+
+      // Create a map of userId -> userName from messages
+      const userMap = new Map<string, string>();
+      messagesResult.data?.forEach(message => {
+        if (message.authorId && message.authorName) {
+          userMap.set(message.authorId, message.authorName);
+        }
+      });
+
+      // Build participant list with names
+      const participantsWithNames = participants.map(participantId => ({
+        id: participantId,
+        name: userMap.get(participantId) || participantId // Fallback to ID if name not found
+      }));
+
+      return {
+        success: true,
+        data: participantsWithNames,
+        timestamp: Date.now()
+      };
+
+    } catch (error) {
+      console.error('[HybridChatManager] Error getting room participants:', error);
+      return {
+        success: false,
+        error: error instanceof Error ? error.message : 'Failed to get room participants',
+        timestamp: Date.now()
+      };
+    }
+  }
 
   // Message operations (delegated to active provider)
   async sendMessage(message: Omit<UnifiedMessage, 'id' | 'timestamp' | 'status'>): Promise<OperationResult<UnifiedMessage>> {

client/packages/lowcoder/src/comps/comps/chatBoxComponent/hooks/useChatManager.ts

@@ -58,7 +58,7 @@ export class YjsPluvProvider extends BaseChatDataProvider implements ChatDataPro
         ydoc = new Y.Doc();
         YjsPluvProvider.globalDocs.set(docId, ydoc);
         YjsPluvProvider.docRefCounts.set(docId, 1);
-        const wsUrl = config.realtime.serverUrl || 'ws://localhost:3001';
+        const wsUrl = config.realtime.serverUrl || 'ws://localhost:3005';
         wsProvider = new WebsocketProvider(wsUrl, docId, ydoc, {
           connect: true,
           params: { room: docId }
@@ -80,28 +80,29 @@ export class YjsPluvProvider extends BaseChatDataProvider implements ChatDataPro
       this.messagesMap.observe(this.messagesObserver);
       this.roomsMap.observe(this.roomsObserver);
       this.typingMap.observe(this.typingObserver);
+      
+      // Set connection state immediately to allow local operations
+      this.setConnectionState('connected');
+      
       if (this.wsProvider) {
         this.wsProvider.off('status', this.handleWSStatus);
         this.wsProvider.off('sync', this.handleWSSync);
         this.wsProvider.on('status', this.handleWSStatus.bind(this));
         this.wsProvider.on('sync', this.handleWSSync.bind(this));
-        const currentStatus = this.wsProvider.wsconnected ? 'connected' : 
-                            this.wsProvider.wsconnecting ? 'connecting' : 'disconnected';
-        this.setConnectionState(currentStatus as ConnectionState);
+        
+        // Update connection state based on WebSocket status
         if (this.wsProvider.wsconnected) {
           this.setConnectionState('connected');
         } else if (this.wsProvider.wsconnecting) {
           this.setConnectionState('connecting');
-        } else {
-          this.setConnectionState('connecting');
         }
       }
-      if (this.connectionState !== 'connected') {
-        this.setConnectionState('connected');
-      }
+      
+      console.log('[YjsPluvProvider] ✅ Connected successfully with docId:', docId);
       return this.createSuccessResult(undefined);
     } catch (error) {
       this.setConnectionState('failed');
+      console.error('[YjsPluvProvider] ❌ Connection failed:', error);
       return this.handleError(error, 'connect');
     }
   }
@@ -347,9 +348,16 @@ export class YjsPluvProvider extends BaseChatDataProvider implements ChatDataPro
 
   async getAvailableRooms(userId: string, filter?: RoomListFilter): Promise<OperationResult<UnifiedRoom[]>> {
     try {
+      console.log('[YjsPluvProvider] 🔍 Getting available rooms for user:', userId);
+      console.log('[YjsPluvProvider] 📊 Connection state:', this.connectionState);
+      console.log('[YjsPluvProvider] 📄 Yjs doc available:', !!this.ydoc);
+      console.log('[YjsPluvProvider] 🗺️ Rooms map available:', !!this.roomsMap);
+      
       await this.ensureConnected();
       const allRooms = Array.from(this.roomsMap!.values());
 
+      console.log('[YjsPluvProvider] 📋 Total rooms found:', allRooms.length);
+      
       let filteredRooms = allRooms.filter(room => {
         if (!room.isActive) return false;
         if (filter?.type && room.type !== filter.type) return false;
@@ -361,8 +369,10 @@ export class YjsPluvProvider extends BaseChatDataProvider implements ChatDataPro
         return true;
       });
 
+      console.log('[YjsPluvProvider] ✅ Filtered rooms:', filteredRooms.length);
       return this.createSuccessResult(filteredRooms);
     } catch (error) {
+      console.error('[YjsPluvProvider] ❌ Error in getAvailableRooms:', error);
       return this.handleError(error, 'getAvailableRooms');
     }
   }
@@ -881,8 +891,13 @@ export class YjsPluvProvider extends BaseChatDataProvider implements ChatDataPro
   }
 
   private async ensureConnected(): Promise<void> {
-    if (!this.ydoc || this.connectionState !== 'connected') {
-      throw new Error('YjsPluvProvider is not connected');
+    if (!this.ydoc) {
+      throw new Error('YjsPluvProvider is not connected - no Yjs document available');
+    }
+    
+    // Allow operations even if WebSocket is still connecting, as Yjs works locally
+    if (this.connectionState === 'failed' || this.connectionState === 'disconnected') {
+      throw new Error('YjsPluvProvider is not connected - connection state: ' + this.connectionState);
     }
   }
-} 
+}

client/packages/lowcoder/src/comps/comps/chatBoxComponent/managers/HybridChatManager.ts

@@ -37,6 +37,7 @@ import { ThemeComp } from "./themeComp";
 import UrlParamsHookComp from "./UrlParamsHookComp";
 import { UtilsComp } from "./utilsComp";
 import { ScreenInfoHookComp } from "./screenInfoComp";
+import { ChatControllerComp } from "../comps/chatBoxComponent/chatControllerComp";
 
 window._ = _;
 window.dayjs = dayjs;
@@ -118,6 +119,7 @@ const HookMap: HookCompMapRawType = {
   urlParams: UrlParamsHookComp,
   drawer: DrawerComp,
   theme: ThemeComp,
+  chatController: ChatControllerComp,
 };
 
 export const HookTmpComp = withTypeAndChildren(HookMap, "title", {
@@ -155,7 +157,8 @@ function SelectHookView(props: {
     if (
       (props.compType !== "modal" &&
         props.compType !== "drawer" &&
-        props.compType !== "meeting") ||
+        props.compType !== "meeting" &&
+        props.compType !== "chatController") ||
       !selectedComp ||
       (editorState.selectSource !== "addComp" &&
         editorState.selectSource !== "leftPanel")