added events in chat component

raheeliftikhar5 · raheeliftikhar5 · commit 0eb7dd2e998e · 2025-09-15T18:15:36.000+05:00
diff --git a/client/packages/lowcoder/src/comps/comps/chatBoxComponent/chatBoxComp.tsx b/client/packages/lowcoder/src/comps/comps/chatBoxComponent/chatBoxComp.tsx
@@ -2,6 +2,7 @@ import { ScrollBar, Section, sectionNames } from "lowcoder-design";
 import styled, { css } from "styled-components";
 import { UICompBuilder } from "../../generators";
 import { NameConfig, NameConfigHidden, withExposingConfigs } from "../../generators/withExposing";
+import { withMethodExposing } from "../../generators/withMethodExposing";
 import { TextStyle, TextStyleType, AnimationStyle, AnimationStyleType } from "comps/controls/styleControlConstants";
 import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import React, { useContext, useEffect, useRef, useMemo, useState } from "react";
@@ -330,6 +331,28 @@ const ChatPropertyView = React.memo((props: {
   );
 });
 
+// Handler for joinUser method
+const handleJoinUser = async (
+  comp: any,
+  userId: string,
+  userName: string,
+) => {
+  try {
+    // Update the component's internal state with user credentials
+    comp.children.userId.getView().onChange(userId);
+    comp.children.userName.getView().onChange(userName);
+    
+    console.log('[ChatBox] 👤 User joined as:', { userId, userName });
+    
+    // The chat manager will automatically reconnect with new credentials
+    // due to the useEffect that watches for userId/userName changes
+    return true;
+  } catch (error) {
+    console.error('[ChatBox] 💥 Error joining as user:', error);
+    return false;
+  }
+};
+
 // Main view component
 const ChatBoxView = React.memo((props: ToViewReturn<ChatCompChildrenType>) => {
   const [currentMessage, setCurrentMessage] = useState<string>("");
@@ -345,18 +368,52 @@ const ChatBoxView = React.memo((props: ToViewReturn<ChatCompChildrenType>) => {
   const chatAreaRef = useRef<HTMLDivElement>(null);
   const searchTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
+  // Helper function to trigger custom events
+  const triggerEvent = (eventName: string) => {
+    if (props.onEvent) {
+      props.onEvent(eventName);
+    }
+  };
+
   // Initialize chat manager  
   const modeValue = props.mode as 'local' | 'collaborative' | 'hybrid';
   
+  // Only auto-connect if userId and userName are provided in configuration
+  const shouldAutoConnect = !!(props.userId.value && props.userName.value);
+  
   const chatManager = useChatManager({
-    userId: props.userId.value || "user_1",
-    userName: props.userName.value || "User",
+    userId: props.userId.value,
+    userName: props.userName.value,
     applicationId: props.applicationId.value || "lowcoder_app", 
     roomId: props.roomId.value || "general",
     mode: modeValue, // Use mode from props
-    autoConnect: true,
+    autoConnect: shouldAutoConnect, // Only auto-connect if credentials are provided
   });
   
+  // Handle reconnection when userId or userName changes (for public users)
+  useEffect(() => {
+    if (props.userId.value && props.userName.value) {
+      if (chatManager.isConnected) {
+        // Disconnect and let the chat manager reconnect with new credentials
+        chatManager.disconnect().then(() => {
+          console.log('[ChatBox] 🔄 Reconnecting with new user credentials');
+        });
+      } else {
+        // If not connected and we have credentials, trigger connection
+        console.log('[ChatBox] 🔌 Connecting with user credentials');
+      }
+    }
+  }, [props.userId.value, props.userName.value]);
+
+  // Chat event handlers
+  useEffect(() => {
+    if (chatManager.isConnected) {
+      triggerEvent("connected");
+    } else if (chatManager.error) {
+      triggerEvent("error");
+    }
+  }, [chatManager.isConnected, chatManager.error]);
+
   // Load joined rooms when connected
   useEffect(() => {
     const loadRooms = async () => {
@@ -515,6 +572,9 @@ const ChatBoxView = React.memo((props: ToViewReturn<ChatCompChildrenType>) => {
         setSearchQuery("");
         setShowSearchResults(false);
         
+        // Trigger room joined event
+        triggerEvent("roomJoined");
+        
         console.log('[ChatBox] 📋 Room join completed successfully');
       } else {
         console.log('[ChatBox] ❌ Failed to join room:', roomId);
@@ -535,6 +595,9 @@ const ChatBoxView = React.memo((props: ToViewReturn<ChatCompChildrenType>) => {
         const updatedJoinedRooms = joinedRooms.filter((room: any) => room.id !== roomId);
         setJoinedRooms(updatedJoinedRooms);
         
+        // Trigger room left event
+        triggerEvent("roomLeft");
+        
         // If user left the current room, switch to another joined room or clear chat
         if (currentRoom?.id === roomId) {
           if (updatedJoinedRooms.length > 0) {
@@ -652,6 +715,26 @@ const ChatBoxView = React.memo((props: ToViewReturn<ChatCompChildrenType>) => {
     stopTyping 
   } = chatManager;
 
+  // Message received event
+  useEffect(() => {
+    if (messages.length > 0) {
+      const lastMessage = messages[messages.length - 1];
+      if (lastMessage && lastMessage.authorId !== props.userId.value) {
+        triggerEvent("messageReceived");
+      }
+    }
+  }, [messages]);
+
+  // Typing events
+  useEffect(() => {
+    if (typingUsers && typingUsers.length > 0) {
+      triggerEvent("typingStarted");
+    } else {
+      triggerEvent("typingStopped");
+    }
+  }, [typingUsers]);
+
+
   useEffect(() => {
     if (chatAreaRef.current) {
       chatAreaRef.current.scrollTop = chatAreaRef.current.scrollHeight;
@@ -716,7 +799,8 @@ const ChatBoxView = React.memo((props: ToViewReturn<ChatCompChildrenType>) => {
       
       if (success) {
         setCurrentMessage("");
-        handleClickEvent(); 
+        handleClickEvent();
+        triggerEvent("messageSent");
       }
     }
   };
@@ -1332,6 +1416,29 @@ ChatBoxTmpComp = class extends ChatBoxTmpComp {
   }
 };
 
+// Add method exposing
+ChatBoxTmpComp = withMethodExposing(ChatBoxTmpComp, [
+  {
+    method: {
+      name: "joinUser",
+      description: "Allow users to join the chat server with their own credentials",
+      params: [
+        {
+          name: "userId",
+          type: "string",
+        },
+        {
+          name: "userName",
+          type: "string",
+        },
+      ],
+    },
+    execute: async (comp: any, values: any) => {
+      return await handleJoinUser(comp, values?.[0], values?.[1]);
+    },
+  },
+]);
+
 export const ChatBoxComp = withExposingConfigs(ChatBoxTmpComp, [
   new NameConfig("chatName", "Chat name displayed in header"),
   new NameConfig("userId", "Unique identifier for current user"),
diff --git a/client/packages/lowcoder/src/comps/comps/chatBoxComponent/chatControllerComp.tsx b/client/packages/lowcoder/src/comps/comps/chatBoxComponent/chatControllerComp.tsx
@@ -69,7 +69,10 @@ const handleJoinRoom = async (
   const chatManager = comp.children.chatManager.getView() as unknown as UseChatManagerReturn;
   try {
     const success = await chatManager.joinRoom(roomId);
-    if (!success) {
+    if (success) {
+      // Note: Event will be triggered by the component's useEffect hooks
+      console.log('[ChatController] ✅ Successfully joined room:', roomId);
+    } else {
       console.error('[ChatBox] ❌ Failed to join room:', roomId);
     }
   } catch (error) {
@@ -87,6 +90,10 @@ const handleLeaveRoom = async (
     console.log('[ChatBox] 🚪 Attempting to leave room:', roomId);
 
     const success = await chatManager.leaveRoom(roomId);
+    if (success) {
+      // Note: Event will be triggered by the component's useEffect hooks
+      console.log('[ChatController] ✅ Successfully left room:', roomId);
+    }
     return success;
   } catch (error) {
     console.error('[ChatBox] 💥 Error leaving room:', error);
@@ -113,6 +120,10 @@ const handleSendMessage = async (
     const chatManager = comp.children.chatManager.getView() as unknown as UseChatManagerReturn;
     if (currentMessage.trim()) {
       const success = await chatManager.sendMessage(currentMessage.trim());
+      if (success) {
+        // Note: Event will be triggered by the component's useEffect hooks
+        console.log('[ChatController] ✅ Message sent successfully');
+      }
       return success;
     }
   } catch (error) {
@@ -194,6 +205,13 @@ const ChatBoxView = React.memo((
   const [currentRoomParticipants, setCurrentRoomParticipants] = useState<Array<{ id: string; name: string }>>([]);
   const handleClickEvent = useCompClickEventHandler({onEvent: props.onEvent});
 
+  // Helper function to trigger custom events
+  const triggerEvent = (eventName: string) => {
+    if (props.onEvent) {
+      props.onEvent(eventName);
+    }
+  };
+
   // Initialize chat manager  
   const modeValue = props.mode as 'local' | 'collaborative' | 'hybrid';
   
@@ -259,6 +277,15 @@ const ChatBoxView = React.memo((
     }
   }, [props.userId.value, props.userName.value]);
 
+  // Chat event handlers
+  useEffect(() => {
+    if (chatManager.isConnected) {
+      triggerEvent("connected");
+    } else if (chatManager.error) {
+      triggerEvent("error");
+    }
+  }, [chatManager.isConnected, chatManager.error]);
+
   // Refresh joined rooms periodically
   useEffect(() => {
     if (!chatManager.isConnected) return;
@@ -324,6 +351,11 @@ const ChatBoxView = React.memo((
     dispatch(
       changeChildAction("currentRoom", currentRoom as any, false)
     );
+
+    // Trigger room joined event when currentRoom changes to a new room
+    if (currentRoom) {
+      triggerEvent("roomJoined");
+    }
   }, [currentRoom]);
 
   // Update typingUsers state
@@ -335,6 +367,31 @@ const ChatBoxView = React.memo((
     );
   }, [typingUsers]);
 
+  // Message events
+  useEffect(() => {
+    if (messages.length > 0) {
+      const lastMessage = messages[messages.length - 1];
+      if (lastMessage) {
+        if (lastMessage.authorId === props.userId.value) {
+          // Message sent by current user
+          triggerEvent("messageSent");
+        } else {
+          // Message received from another user
+          triggerEvent("messageReceived");
+        }
+      }
+    }
+  }, [messages, props.userId.value]);
+
+  // Typing events
+  useEffect(() => {
+    if (typingUsers && typingUsers.length > 0) {
+      triggerEvent("typingStarted");
+    } else {
+      triggerEvent("typingStopped");
+    }
+  }, [typingUsers]);
+
   return (
     <BackgroundColorContext.Provider value={props.style.background}>
       {/* <DrawerWrapper> */}
@@ -510,6 +567,25 @@ ChatControllerComp = withMethodExposing(ChatControllerComp, [
       handleSendMessage(comp, values?.[0]);
     },
   },
+  {
+    method: {
+      name: "getRoomParticipants",
+      description: "Get participants of a room with their ID and name",
+      params: [
+        {
+          name: "roomId",
+          type: "string",
+        },
+      ],
+    },
+    execute: async (comp: ConstructorToComp<typeof ChatControllerComp>, values: any) => {
+      const chatManager = comp.children.chatManager.getView() as any;
+      if (chatManager && chatManager.getRoomParticipants) {
+        return await chatManager.getRoomParticipants(values?.[0]);
+      }
+      return [];
+    },
+  },
   {
     method: {
       name: "joinUser",
diff --git a/client/packages/lowcoder/src/comps/comps/chatBoxComponent/chatUtils.tsx b/client/packages/lowcoder/src/comps/comps/chatBoxComponent/chatUtils.tsx
@@ -16,7 +16,21 @@ import React, { useContext, useMemo } from "react";
 import { trans } from "i18n";
 
 // Event options for the chat component
-const EventOptions = [clickEvent, doubleClickEvent] as const;
+const EventOptions = [
+  clickEvent, 
+  doubleClickEvent,
+  { label: trans("chatBox.connected"), value: "connected", description: trans("chatBox.connectedDesc") },
+  { label: trans("chatBox.disconnected"), value: "disconnected", description: trans("chatBox.disconnectedDesc") },
+  { label: trans("chatBox.messageReceived"), value: "messageReceived", description: trans("chatBox.messageReceivedDesc") },
+  { label: trans("chatBox.messageSent"), value: "messageSent", description: trans("chatBox.messageSentDesc") },
+  { label: trans("chatBox.userJoined"), value: "userJoined", description: trans("chatBox.userJoinedDesc") },
+  { label: trans("chatBox.userLeft"), value: "userLeft", description: trans("chatBox.userLeftDesc") },
+  { label: trans("chatBox.typingStarted"), value: "typingStarted", description: trans("chatBox.typingStartedDesc") },
+  { label: trans("chatBox.typingStopped"), value: "typingStopped", description: trans("chatBox.typingStoppedDesc") },
+  { label: trans("chatBox.roomJoined"), value: "roomJoined", description: trans("chatBox.roomJoinedDesc") },
+  { label: trans("chatBox.roomLeft"), value: "roomLeft", description: trans("chatBox.roomLeftDesc") },
+  { label: trans("chatBox.error"), value: "error", description: trans("chatBox.errorDesc") },
+] as const;
 
 // Define the component's children map
 export const chatCompChildrenMap = {
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -1482,6 +1482,32 @@ export const en = {
     "conversationHistory": "Full conversation history as JSON array",
     "databaseNameExposed": "Database name for SQL queries (ChatDB_<componentName>)"
   },
+
+  "chatBox": {
+    // Event Labels & Descriptions
+    "connected": "Connected",
+    "connectedDesc": "Triggered when the chat connects to the server",
+    "disconnected": "Disconnected", 
+    "disconnectedDesc": "Triggered when the chat disconnects from the server",
+    "messageReceived": "Message Received",
+    "messageReceivedDesc": "Triggered when a new message is received from another user",
+    "messageSent": "Message Sent",
+    "messageSentDesc": "Triggered when the current user sends a message",
+    "userJoined": "User Joined",
+    "userJoinedDesc": "Triggered when a new user joins the current room",
+    "userLeft": "User Left",
+    "userLeftDesc": "Triggered when a user leaves the current room",
+    "typingStarted": "Typing Started",
+    "typingStartedDesc": "Triggered when someone starts typing in the current room",
+    "typingStopped": "Typing Stopped",
+    "typingStoppedDesc": "Triggered when someone stops typing in the current room",
+    "roomJoined": "Room Joined",
+    "roomJoinedDesc": "Triggered when the current user joins a room",
+    "roomLeft": "Room Left",
+    "roomLeftDesc": "Triggered when the current user leaves a room",
+    "error": "Error",
+    "errorDesc": "Triggered when an error occurs in the chat system"
+  },
   // eighth part
 
   "comp": {
