add event listeners for the chat component

Author: iamfaran

client/packages/lowcoder/src/comps/comps/chatComp/chatComp.tsx

@@ -8,6 +8,7 @@ import { withDefault } from "comps/generators";
 import { BoolControl } from "comps/controls/boolControl";
 import { dropdownControl } from "comps/controls/dropdownControl";
 import QuerySelectControl from "comps/controls/querySelectControl";
+import { eventHandlerControl, EventConfigType } from "comps/controls/eventHandlerControl";
 import { ChatCore } from "./components/ChatCore";
 import { ChatPropertyView } from "./chatPropertyView";
 import { createChatStorage } from "./utils/storageFactory";
@@ -19,7 +20,58 @@ import "@assistant-ui/styles/index.css";
 import "@assistant-ui/styles/markdown.css";
 
 // ============================================================================
-// SIMPLIFIED CHILDREN MAP - ONLY ESSENTIAL PROPS
+// CHAT-SPECIFIC EVENTS
+// ============================================================================
+
+export const componentLoadEvent: EventConfigType = {
+  label: "Component Load",
+  value: "componentLoad",
+  description: "Triggered when the chat component finishes loading - Load existing data from backend",
+};
+
+export const messageSentEvent: EventConfigType = {
+  label: "Message Sent",
+  value: "messageSent",
+  description: "Triggered when a user sends a message - Auto-save user messages",
+};
+
+export const messageReceivedEvent: EventConfigType = {
+  label: "Message Received", 
+  value: "messageReceived",
+  description: "Triggered when a response is received from the AI - Auto-save AI responses",
+};
+
+export const threadCreatedEvent: EventConfigType = {
+  label: "Thread Created",
+  value: "threadCreated",
+  description: "Triggered when a new thread is created - Auto-save new threads",
+};
+
+export const threadUpdatedEvent: EventConfigType = {
+  label: "Thread Updated",
+  value: "threadUpdated",
+  description: "Triggered when a thread is updated - Auto-save thread changes",
+};
+
+export const threadDeletedEvent: EventConfigType = {
+  label: "Thread Deleted",
+  value: "threadDeleted",
+  description: "Triggered when a thread is deleted - Delete thread from backend",
+};
+
+const ChatEventOptions = [
+  componentLoadEvent,
+  messageSentEvent,
+  messageReceivedEvent,
+  threadCreatedEvent,
+  threadUpdatedEvent,
+  threadDeletedEvent,
+] as const;
+
+export const ChatEventHandlerControl = eventHandlerControl(ChatEventOptions);
+
+// ============================================================================
+// SIMPLIFIED CHILDREN MAP - WITH EVENT HANDLERS
 // ============================================================================
 
 function generateUniqueTableName(): string {
@@ -48,6 +100,9 @@ export const chatChildrenMap = {
   // Database Information (read-only)
   databaseName: withDefault(StringControl, ""),
 
+  // Event Handlers
+  onEvent: ChatEventHandlerControl,
+  
   // Exposed Variables (not shown in Property View)
   currentMessage: stringExposingStateControl("currentMessage", ""),
   conversationHistory: stringExposingStateControl("conversationHistory", "[]"),
@@ -119,6 +174,8 @@ const ChatTmpComp = new UICompBuilder(
     // Handle message updates for exposed variable
     const handleMessageUpdate = (message: string) => {
       dispatch(changeChildAction("currentMessage", message, false));
+      // Trigger messageSent event
+      props.onEvent("messageSent");
     };
 
     // Handle conversation history updates for exposed variable
@@ -130,26 +187,32 @@ const ChatTmpComp = new UICompBuilder(
         timestamp: msg.timestamp
       }));
       dispatch(changeChildAction("conversationHistory", JSON.stringify(formattedHistory), false));
+      
+      // Trigger messageReceived event when bot responds
+      const lastMessage = conversationHistory[conversationHistory.length - 1];
+      if (lastMessage && lastMessage.role === 'assistant') {
+        props.onEvent("messageReceived");
+      }
     };
 
-       // Cleanup on unmount
-       useEffect(() => {
-        console.log("cleanup on unmount");
-        return () => {
-          console.log("cleanup on unmount");
-          const tableName = uniqueTableName.current;
-          if (tableName) {
-            storage.cleanup();
-          }
-        };
-      }, []);
+    // Cleanup on unmount
+    useEffect(() => {
+      return () => {
+        const tableName = uniqueTableName.current;
+        if (tableName) {
+          storage.cleanup();
+        }
+      };
+    }, []);
 
     return (
       <ChatCore
         storage={storage}
         messageHandler={messageHandler}
+        placeholder={props.placeholder}
         onMessageUpdate={handleMessageUpdate}
         onConversationUpdate={handleConversationUpdate}
+        onEvent={props.onEvent}
       />
     );
   }

client/packages/lowcoder/src/comps/comps/chatComp/chatPropertyView.tsx

@@ -1,7 +1,8 @@
 // client/packages/lowcoder/src/comps/comps/chatComp/chatPropertyView.tsx
 
-import React from "react";
+import React, { useMemo } from "react";
 import { Section, sectionNames } from "lowcoder-design";
+import { placeholderPropertyView } from "../../utils/propertyUtils";
 
 // ============================================================================
 // CLEAN PROPERTY VIEW - FOCUSED ON ESSENTIAL CONFIGURATION
@@ -10,24 +11,8 @@ import { Section, sectionNames } from "lowcoder-design";
 export const ChatPropertyView = React.memo((props: any) => {
   const { children } = props;
 
-  return (
+  return useMemo(() => (
     <>
-      {/* Basic Configuration */}
-      <Section name={sectionNames.basic}>
-        {children.placeholder.propertyView({ 
-          label: "Placeholder Text",
-          placeholder: "Enter placeholder text..."
-        })}
-        
-        {children.databaseName.propertyView({ 
-          label: "Database Name",
-          placeholder: "Database will be auto-generated...",
-          tooltip: "Read-only: Auto-generated database name for data persistence. You can reference this in queries if needed.",
-          disabled: true
-        })}
-        
-      </Section>
-
       {/* Message Handler Configuration */}
       <Section name="Message Handler">
         {children.handlerType.propertyView({ 
@@ -64,8 +49,26 @@ export const ChatPropertyView = React.memo((props: any) => {
         })}
       </Section>
 
+      {/* UI Configuration */}
+      <Section name="UI Configuration">
+        {placeholderPropertyView(children)}
+      </Section>
+
+      {/* Database Information */}
+      <Section name="Database">
+        {children.databaseName.propertyView({ 
+          label: "Database Name",
+          tooltip: "Auto-generated database name for this chat component (read-only)"
+        })}
+      </Section>
+
+      {/* STANDARD EVENT HANDLERS SECTION */}
+      <Section name={sectionNames.interaction}>
+        {children.onEvent.getPropertyView()}
+      </Section>
+
     </>
-  );
+  ), [children]);
 });
 
 ChatPropertyView.displayName = 'ChatPropertyView';

client/packages/lowcoder/src/comps/comps/chatComp/components/ChatCore.tsx

@@ -9,13 +9,22 @@ import { ChatCoreProps } from "../types/chatTypes";
 // CHAT CORE - THE SHARED FOUNDATION
 // ============================================================================
 
-export function ChatCore({ storage, messageHandler, onMessageUpdate, onConversationUpdate }: ChatCoreProps) {
+export function ChatCore({ 
+  storage, 
+  messageHandler, 
+  placeholder,
+  onMessageUpdate, 
+  onConversationUpdate,
+  onEvent
+}: ChatCoreProps) {
   return (
     <ChatProvider storage={storage}>
       <ChatCoreMain 
         messageHandler={messageHandler}
+        placeholder={placeholder}
         onMessageUpdate={onMessageUpdate}
         onConversationUpdate={onConversationUpdate}
+        onEvent={onEvent}
       />
     </ChatProvider>
   );

client/packages/lowcoder/src/comps/comps/chatComp/components/ChatCoreMain.tsx

@@ -1,6 +1,6 @@
 // client/packages/lowcoder/src/comps/comps/chatComp/components/ChatCoreMain.tsx
 
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import {
   useExternalStoreRuntime,
   ThreadMessageLike,
@@ -59,13 +59,22 @@ const ChatContainer = styled.div`
 
 interface ChatCoreMainProps {
   messageHandler: MessageHandler;
+  placeholder?: string;
   onMessageUpdate?: (message: string) => void;
   onConversationUpdate?: (conversationHistory: ChatMessage[]) => void;
+  // STANDARD LOWCODER EVENT PATTERN - SINGLE CALLBACK (OPTIONAL)
+  onEvent?: (eventName: string) => void;
 }
 
 const generateId = () => Math.random().toString(36).substr(2, 9);
 
-export function ChatCoreMain({ messageHandler, onMessageUpdate, onConversationUpdate }: ChatCoreMainProps) {
+export function ChatCoreMain({ 
+  messageHandler, 
+  placeholder,
+  onMessageUpdate, 
+  onConversationUpdate,
+  onEvent
+}: ChatCoreMainProps) {
   const { state, actions } = useChatContext();
   const [isRunning, setIsRunning] = useState(false);
 
@@ -78,10 +87,15 @@ export function ChatCoreMain({ messageHandler, onMessageUpdate, onConversationUp
   console.log("CURRENT MESSAGES", currentMessages);
 
   // Notify parent component of conversation changes
-  React.useEffect(() => {
+  useEffect(() => {
     onConversationUpdate?.(currentMessages);
   }, [currentMessages]);
 
+  // Trigger component load event on mount
+  useEffect(() => {
+    onEvent?.("componentLoad");
+  }, [onEvent]);
+
   // Convert custom format to ThreadMessageLike (same as your current implementation)
   const convertMessage = (message: ChatMessage): ThreadMessageLike => ({
     role: message.role,
@@ -209,6 +223,7 @@ export function ChatCoreMain({ messageHandler, onMessageUpdate, onConversationUp
     onSwitchToNewThread: async () => {
       const threadId = await actions.createThread("New Chat");
       actions.setCurrentThread(threadId);
+      onEvent?.("threadCreated");
     },
 
     onSwitchToThread: (threadId) => {
@@ -217,14 +232,17 @@ export function ChatCoreMain({ messageHandler, onMessageUpdate, onConversationUp
 
     onRename: async (threadId, newTitle) => {
       await actions.updateThread(threadId, { title: newTitle });
+      onEvent?.("threadUpdated");
     },
 
     onArchive: async (threadId) => {
       await actions.updateThread(threadId, { status: "archived" });
+      onEvent?.("threadUpdated");
     },
 
     onDelete: async (threadId) => {
       await actions.deleteThread(threadId);
+      onEvent?.("threadDeleted");
     },
   };
 
@@ -250,7 +268,7 @@ export function ChatCoreMain({ messageHandler, onMessageUpdate, onConversationUp
     <AssistantRuntimeProvider runtime={runtime}>
       <ChatContainer>
         <ThreadList />
-        <Thread />
+        <Thread placeholder={placeholder} />
       </ChatContainer>
     </AssistantRuntimeProvider>
   );

client/packages/lowcoder/src/comps/comps/chatComp/components/assistant-ui/thread.tsx

@@ -22,7 +22,11 @@ import {
   import { MarkdownText } from "./markdown-text";
   import { TooltipIconButton } from "./tooltip-icon-button";
 
-  export const Thread: FC = () => {
+  interface ThreadProps {
+    placeholder?: string;
+  }
+  
+  export const Thread: FC<ThreadProps> = ({ placeholder = "Write a message..." }) => {
     return (
       <ThreadPrimitive.Root
         className="aui-root aui-thread-root"
@@ -47,7 +51,7 @@ import {
 
           <div className="aui-thread-viewport-footer">
             <ThreadScrollToBottom />
-            <Composer />
+            <Composer placeholder={placeholder} />
           </div>
         </ThreadPrimitive.Viewport>
       </ThreadPrimitive.Root>
@@ -110,13 +114,13 @@ import {
     );
   };
 
-  const Composer: FC = () => {
+  const Composer: FC<{ placeholder?: string }> = ({ placeholder = "Write a message..." }) => {
     return (
       <ComposerPrimitive.Root className="aui-composer-root">
         <ComposerPrimitive.Input
           rows={1}
           autoFocus
-          placeholder="Write a message..."
+          placeholder={placeholder}
           className="aui-composer-input"
         />
         <ComposerAction />

client/packages/lowcoder/src/comps/comps/chatComp/types/chatTypes.ts

@@ -75,8 +75,11 @@ export interface ChatMessage {
   export interface ChatCoreProps {
     storage: ChatStorage;
     messageHandler: MessageHandler;
+    placeholder?: string;
     onMessageUpdate?: (message: string) => void;
     onConversationUpdate?: (conversationHistory: ChatMessage[]) => void;
+    // STANDARD LOWCODER EVENT PATTERN - SINGLE CALLBACK
+    onEvent?: (eventName: string) => void;
   }
 
   export interface ChatPanelProps {