fix message styles, autoscroll and pluv server

Author: iamfaran

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

@@ -29,6 +29,7 @@ export interface ChatBoxContextValue {
   typingUsers: any[];
   onlineUsers: OnlineUser[];
   pendingInvites: PendingRoomInvite[];
+  isAiThinking: boolean;
 
   // Exposed state
   chatTitle: ExposedState;

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

@@ -98,6 +98,7 @@ const childrenMap = {
   currentUserId: withDefault(StringControl, "user_1"),
   currentUserName: withDefault(StringControl, "User"),
   typingUsers: jsonArrayControl([]),
+  isAiThinking: withDefault(BoolControl, false),
   lastSentMessageText: stringExposingStateControl("lastSentMessageText", ""),
   messageText: stringExposingStateControl("messageText", ""),
 
@@ -187,6 +188,11 @@ const ChatBoxPropertyView = React.memo((props: { children: any }) => {
           tooltip:
             "Array of users currently typing. Bind to {{ chatController1.typingUsers }}",
         })}
+        {children.isAiThinking.propertyView({
+          label: "AI Is Thinking",
+          tooltip:
+            "Show the AI thinking animation to all users in this room. Bind to {{ chatController1.aiThinkingRooms[chatBox1.currentRoomId] }}",
+        })}
         {children.onlineUsers.propertyView({
           label: "Online Users",
           tooltip:
@@ -232,6 +238,7 @@ let ChatBoxV2Tmp = (function () {
     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 isAiThinking = Boolean(props.isAiThinking);
     const pendingInvites = (Array.isArray(props.pendingInvites)
       ? props.pendingInvites
       : []) as unknown as PendingRoomInvite[];
@@ -246,6 +253,7 @@ let ChatBoxV2Tmp = (function () {
       currentUserName: props.currentUserName,
       typingUsers,
       onlineUsers: onlineUsers as any,
+      isAiThinking,
       pendingInvites,
 
       chatTitle: props.chatTitle,
@@ -325,6 +333,7 @@ export const ChatBoxV2Comp = withExposingConfigs(ChatBoxV2Tmp, [
     "Text of the last message sent by the user — use in your save query",
   ),
   new NameConfig("messageText", "Current text in the message input"),
+  new NameConfig("currentRoomId", "Currently active room ID — for AI thinking or room-scoped queries"),
   new NameConfig(
     "pendingRoomId",
     "Room ID the user wants to switch to, join, or leave — read in roomSwitch/roomJoin/roomLeave events",

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

@@ -72,6 +72,7 @@ export const ChatBoxView = React.memo(() => {
           messages={ctx.messages}
           typingUsers={ctx.typingUsers}
           currentUserId={ctx.currentUserId}
+          isAiThinking={ctx.isAiThinking}
         />
 
         <InputBar

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

@@ -6,6 +6,7 @@ import { CopyOutlined, CheckOutlined, RobotOutlined } from "@ant-design/icons";
 import { LLM_BOT_AUTHOR_ID } from "../store";
 import {
   MessagesArea,
+  MessageWrapper,
   Bubble,
   BubbleMeta,
   BubbleTime,
@@ -17,6 +18,7 @@ import {
   AiBadge,
   AiBubble,
   AiCopyButton,
+  LlmLoadingBubble,
 } from "../styles";
 
 // ── AI message bubble with copy button ───────────────────────────────────────
@@ -94,18 +96,24 @@ export interface MessageListProps {
   messages: any[];
   typingUsers: any[];
   currentUserId: string;
+  isAiThinking?: boolean;
 }
 
 export const MessageList = React.memo((props: MessageListProps) => {
-  const { messages, typingUsers, currentUserId } = props;
-  const bottomRef = useRef<HTMLDivElement>(null);
+  const { messages, typingUsers, currentUserId, isAiThinking = false } = props;
+  const containerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    bottomRef.current?.scrollIntoView({ behavior: "smooth" });
-  }, [messages.length]);
+    if (containerRef.current) {
+      containerRef.current.scrollTo({
+        top: containerRef.current.scrollHeight,
+        behavior: "smooth",
+      });
+    }
+  }, [messages.length, isAiThinking]);
 
   return (
-    <MessagesArea>
+    <MessagesArea ref={containerRef}>
       {messages.length === 0 ? (
         <EmptyChat>
           <div style={{ fontSize: 24 }}>💬</div>
@@ -151,7 +159,7 @@ export const MessageList = React.memo((props: MessageListProps) => {
           }
 
           return (
-            <div key={id}>
+            <MessageWrapper key={id} $own={isOwn}>
               <BubbleMeta $own={isOwn}>{authorName}</BubbleMeta>
               <Bubble $own={isOwn}>{text}</Bubble>
               {timestamp > 0 && (
@@ -162,11 +170,26 @@ export const MessageList = React.memo((props: MessageListProps) => {
                   })}
                 </BubbleTime>
               )}
-            </div>
+            </MessageWrapper>
           );
         })
       )}
 
+      {/* AI thinking animation — shown to all users when the LLM is generating */}
+      {isAiThinking && (
+        <AiBubbleWrapper>
+          <AiBadge>
+            <RobotOutlined style={{ fontSize: 9 }} />
+            AI is thinking…
+          </AiBadge>
+          <LlmLoadingBubble>
+            <span />
+            <span />
+            <span />
+          </LlmLoadingBubble>
+        </AiBubbleWrapper>
+      )}
+
       {typingUsers.length > 0 && (
         <TypingIndicatorWrapper>
           <TypingDots>
@@ -182,7 +205,6 @@ export const MessageList = React.memo((props: MessageListProps) => {
         </TypingIndicatorWrapper>
       )}
 
-      <div ref={bottomRef} />
     </MessagesArea>
   );
 });

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

@@ -1,4 +1,5 @@
 export type {
+  AiThinkingState,
   ChatMessage,
   ChatRoom,
   PendingRoomInvite,
@@ -19,5 +20,4 @@ export {
   useRoom,
   useConnection,
   useDoc,
-  pluvConfig,
 } from "./pluvClient";

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

@@ -3,42 +3,41 @@ import { yjs } from "@pluv/crdt-yjs";
 import { createBundle } from "@pluv/react";
 import { z } from "zod";
 
-/**
- * Module-level config updated by ChatControllerV2 before connecting.
- * Allows dynamic auth without recreating the client.
- */
-export const pluvConfig = {
-  userId: "",
-  userName: "",
-  authUrl: "/api/auth/pluv",
-  publicKey: "",
-};
+// Resolve the pluv.io publishable key from the environment.
+// This is set at build time via VITE_PLUV_PUBLIC_KEY, or injected at runtime
+// via globalThis.__PLUV_PUBLIC_KEY__ (e.g. from a server-rendered template).
+const PLUV_PUBLIC_KEY: string =
+  (typeof import.meta !== "undefined" && (import.meta as any).env?.VITE_PLUV_PUBLIC_KEY) ||
+  (typeof globalThis !== "undefined" && (globalThis as any).__PLUV_PUBLIC_KEY__) ||
+  "";
 
-function resolvePluvPublicKey(): string {
-  return (
-    pluvConfig.publicKey ||
-    (typeof globalThis !== "undefined"
-      ? (globalThis as any).__PLUV_PUBLIC_KEY__
-      : "") ||
-    (typeof import.meta !== "undefined"
-      ? (import.meta as any).env?.VITE_PLUV_PUBLIC_KEY
-      : "") ||
-    ""
-  );
-}
+// Auth server URL. Defaults to a relative path so the Vite dev proxy and
+// production reverse-proxy both work without extra configuration.
+const PLUV_AUTH_URL: string =
+  (typeof import.meta !== "undefined" && (import.meta as any).env?.VITE_PLUV_AUTH_URL) ||
+  "/api/auth/pluv";
 
+// `metadata` is PLUV's built-in mechanism for passing per-connection data
+// (like the current user) into the authEndpoint at the moment a room is
+// entered. It is provided as a prop on <PluvRoomProvider metadata={...} />,
+// so there is no need for any global mutable config object.
 const client = createClient({
-  authEndpoint: (({ room }: { room: string }) => {
+  metadata: z.object({
+    userId: z.string(),
+    userName: z.string(),
+  }),
+  publicKey: PLUV_PUBLIC_KEY,
+  authEndpoint: ({ room, metadata }: { room: string; metadata: { userId: string; userName: string } }) => {
     const params = new URLSearchParams({
       room,
-      userId: pluvConfig.userId,
-      userName: pluvConfig.userName,
+      userId: metadata.userId,
+      userName: metadata.userName,
     });
-    return `${pluvConfig.authUrl}?${params}`;
-  }) as any,
-  publicKey: resolvePluvPublicKey as any,
+    return `${PLUV_AUTH_URL}?${params}`;
+  },
   initialStorage: yjs.doc((t: any) => ({
     messageActivity: t.map("messageActivity", []),
+    aiActivity: t.map("aiActivity", []),
   })),
   presence: z.object({
     userId: z.string(),

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

@@ -50,6 +50,12 @@ export interface MessageBroadcast {
   counter: number;
 }
 
+export interface AiThinkingState {
+  roomId: string;
+  isThinking: boolean;
+  timestamp: number;
+}
+
 export const LLM_BOT_AUTHOR_ID = "__llm_bot__";
 
 export function uid(): string {

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

@@ -91,11 +91,16 @@ export const MessagesArea = styled.div`
   gap: 8px;
 `;
 
-export const Bubble = styled.div<{ $own: boolean }>`
+export const MessageWrapper = styled.div<{ $own: boolean }>`
+  display: flex;
+  flex-direction: column;
+  align-self: ${(p) => (p.$own ? "flex-end" : "flex-start")};
   max-width: 70%;
+`;
+
+export const Bubble = styled.div<{ $own: boolean }>`
   padding: 10px 14px;
-  border-radius: 16px;
-  align-self: ${(p) => (p.$own ? "flex-end" : "flex-start")};
+  border-radius: ${(p) => (p.$own ? "16px 16px 4px 16px" : "16px 16px 16px 4px")};
   background: ${(p) => (p.$own ? "#1890ff" : "#f0f0f0")};
   color: ${(p) => (p.$own ? "#fff" : "#333")};
   font-size: 14px;