add shared state and fix date format

Author: iamfaran

client/packages/lowcoder/src/comps/comps/chatBoxComponentv2/READMEv2.md

@@ -0,0 +1,43 @@
+// UPDATED MessageSent Query Code
+// Replaces broadcastNewMessage with setRoomData
+
+const currentRoomId = chatControllerSignal1.currentRoomId;
+const rooms = chatControllerSignal1.sharedState?.rooms || [];
+const currentRoom = rooms.find(r => r.id === currentRoomId);
+
+console.log("CURRENT ROOM", currentRoom);
+
+saveMessage.run()
+  .then(() => {
+    // Check if current room is an LLM room
+    if (currentRoom && currentRoom.type === 'llm') {
+      console.log("STARTING AI THINKING...");
+      // Broadcast to all users: AI is thinking
+      chatControllerSignal1.setAiThinking(currentRoomId, true);
+      return getAIResponse.run();
+    }
+  })
+  .then(() => {
+    // AI finished - stop thinking animation
+    if (currentRoom && currentRoom.type === 'llm') {
+      console.log("AI THINKING STOPPED");
+      chatControllerSignal1.setAiThinking(currentRoomId, false);
+    }
+    
+    // NEW: Signal other users that a message was saved
+    // This triggers their "Room Data Changed" event which reloads messages
+    chatControllerSignal1.setRoomData(currentRoomId, "lastMessage", {
+      ts: Date.now(),
+      authorId: chatControllerSignal1.userId
+    });
+    
+    // Reload your own messages
+    return loadMessages.run();
+  })
+  .catch(err => {
+    // Stop thinking on error so it doesn't get stuck
+    if (currentRoom && currentRoom.type === 'llm') {
+      chatControllerSignal1.setAiThinking(currentRoomId, false);
+    }
+    console.error("Error:", err);
+  });

client/packages/lowcoder/src/comps/comps/chatBoxComponentv2/UPDATED_MESSAGE_SENT_EXAMPLE.js

@@ -3,6 +3,8 @@ import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { Tooltip } from "antd";
 import { CopyOutlined, CheckOutlined, RobotOutlined } from "@ant-design/icons";
+import dayjs from "dayjs";
+import { parseMessageTimestamp, formatChatTime } from "util/dateTimeUtils";
 import { LLM_BOT_AUTHOR_ID } from "../store";
 import {
   MessagesArea,
@@ -21,10 +23,17 @@ import {
   LlmLoadingBubble,
 } from "../styles";
 
+function readField(msg: any, ...keys: string[]): string {
+  for (const k of keys) {
+    if (msg[k] != null && msg[k] !== "") return String(msg[k]);
+  }
+  return "";
+}
+
 // ── AI message bubble with copy button ───────────────────────────────────────
 
 const AiMessageBubble = React.memo(
-  ({ text, authorName, timestamp }: { text: string; authorName: string; timestamp: number }) => {
+  ({ text, authorName, ts }: { text: string; authorName: string; ts: dayjs.Dayjs | null }) => {
     const [copied, setCopied] = useState(false);
 
     const handleCopy = useCallback(() => {
@@ -58,12 +67,9 @@ const AiMessageBubble = React.memo(
             </AiCopyButton>
           </Tooltip>
         </div>
-        {timestamp > 0 && (
+        {ts && (
           <BubbleTime $own={false}>
-            {new Date(timestamp).toLocaleTimeString([], {
-              hour: "2-digit",
-              minute: "2-digit",
-            })}
+            {formatChatTime(ts)}
           </BubbleTime>
         )}
       </AiBubbleWrapper>
@@ -73,23 +79,6 @@ const AiMessageBubble = React.memo(
 
 AiMessageBubble.displayName = "AiMessageBubble";
 
-// ── Helpers to read message fields flexibly ───────────────────────────────────
-
-function readField(msg: any, ...keys: string[]): string {
-  for (const k of keys) {
-    if (msg[k] != null && msg[k] !== "") return String(msg[k]);
-  }
-  return "";
-}
-
-function readTimestamp(msg: any): number {
-  const raw =
-    msg.timestamp ?? msg.createdAt ?? msg.created_at ?? msg.time ?? 0;
-  if (typeof raw === "number") return raw;
-  const parsed = Date.parse(raw);
-  return Number.isNaN(parsed) ? 0 : parsed;
-}
-
 // ── Main component ───────────────────────────────────────────────────────────
 
 export interface MessageListProps {
@@ -139,7 +128,7 @@ export const MessageList = React.memo((props: MessageListProps) => {
               "author_name",
               "senderName",
             ) || authorId;
-          const timestamp = readTimestamp(msg);
+          const ts = parseMessageTimestamp(msg);
           const authorType = msg.authorType || msg.role || "";
 
           const isAssistant =
@@ -153,7 +142,7 @@ export const MessageList = React.memo((props: MessageListProps) => {
                 key={id}
                 text={text}
                 authorName={authorName}
-                timestamp={timestamp}
+                ts={ts}
               />
             );
           }
@@ -162,12 +151,9 @@ export const MessageList = React.memo((props: MessageListProps) => {
             <MessageWrapper key={id} $own={isOwn}>
               <BubbleMeta $own={isOwn}>{authorName}</BubbleMeta>
               <Bubble $own={isOwn}>{text}</Bubble>
-              {timestamp > 0 && (
+              {ts && (
                 <BubbleTime $own={isOwn}>
-                  {new Date(timestamp).toLocaleTimeString([], {
-                    hour: "2-digit",
-                    minute: "2-digit",
-                  })}
+                  {formatChatTime(ts)}
                 </BubbleTime>
               )}
             </MessageWrapper>

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

@@ -5,7 +5,6 @@ export type {
   PendingRoomInvite,
   TypingUser,
   OnlineUser,
-  MessageBroadcast,
 } from "./types";
 
 export { uid, LLM_BOT_AUTHOR_ID } from "./types";

client/packages/lowcoder/src/comps/comps/chatBoxComponentv2/store/index.ts

@@ -36,8 +36,9 @@ const client = createClient({
     return `${PLUV_AUTH_URL}?${params}`;
   },
   initialStorage: yjs.doc((t: any) => ({
-    messageActivity: t.map("messageActivity", []),
     aiActivity: t.map("aiActivity", []),
+    sharedState: t.map("sharedState", []),
+    roomData: t.map("roomData", []),
   })),
   presence: z.object({
     userId: z.string(),

client/packages/lowcoder/src/comps/comps/chatBoxComponentv2/store/pluvClient.ts

@@ -41,15 +41,6 @@ export interface OnlineUser {
   currentRoomId: string | null;
 }
 
-export interface MessageBroadcast {
-  roomId: string;
-  messageId: string;
-  authorId: string;
-  authorName: string;
-  timestamp: number;
-  counter: number;
-}
-
 export interface AiThinkingState {
   roomId: string;
   isThinking: boolean;