fix property view layout + padding/radius issues for the chatbox component

iamfaran · iamfaran · commit 47efd75a61a9 · 2026-03-25T17:27:04.000+05:00
diff --git a/client/packages/lowcoder/src/comps/comps/chatBoxComponentv2/styles.ts b/client/packages/lowcoder/src/comps/comps/chatBoxComponentv2/styles.ts
@@ -31,7 +31,7 @@ export const RoomPanelContainer = styled.div<{
   flex-direction: column;
   background: ${(p) => p.$sidebarStyle?.sidebarBackground || "#fafbfc"};
   color: ${(p) => p.$sidebarStyle?.sidebarText || "inherit"};
-  border-radius: ${(p) => p.$sidebarStyle?.sidebarRadius || "0"};
+  border-radius: ${(p) => p.$sidebarStyle?.radius || "0"};
 `;
 
 export const RoomPanelHeader = styled.div<{ $sidebarStyle?: ChatBoxV2SidebarStyleType }>`
@@ -56,7 +56,7 @@ export const RoomItemStyled = styled.div<{
   $active: boolean;
   $sidebarStyle?: ChatBoxV2SidebarStyleType;
 }>`
-  padding: ${(p) => p.$sidebarStyle?.sidebarItemPadding || "8px 10px"};
+  padding: ${(p) => p.$sidebarStyle?.padding || "8px 10px"};
   margin-bottom: 4px;
   border-radius: 6px;
   cursor: pointer;
@@ -104,7 +104,7 @@ export const ChatPanelContainer = styled.div`
 `;
 
 export const ChatHeaderBar = styled.div<{ $headerStyle?: ChatBoxV2HeaderStyleType }>`
-  padding: ${(p) => p.$headerStyle?.headerPadding || "12px 16px"};
+  padding: ${(p) => p.$headerStyle?.padding || "12px 16px"};
   border-bottom: 1px solid ${(p) => p.$headerStyle?.headerBorder || "#eee"};
   background: ${(p) => p.$headerStyle?.headerBackground || "transparent"};
   color: ${(p) => p.$headerStyle?.headerText || "inherit"};
@@ -134,9 +134,9 @@ export const Bubble = styled.div<{
   $own: boolean;
   $messageStyle?: ChatBoxV2MessageStyleType;
 }>`
-  padding: ${(p) => p.$messageStyle?.messageBubblePadding || "10px 14px"};
+  padding: ${(p) => p.$messageStyle?.padding || "10px 14px"};
   border-radius: ${(p) => {
-    const r = p.$messageStyle?.messageBubbleRadius;
+    const r = p.$messageStyle?.radius;
     if (r && r !== "0") return r;
     return p.$own ? "16px 16px 4px 16px" : "16px 16px 16px 4px";
   }};
@@ -185,9 +185,9 @@ export const InputBarContainer = styled.div<{ $inputStyle?: ChatBoxV2InputStyleT
 
 export const StyledTextArea = styled.textarea<{ $inputStyle?: ChatBoxV2InputStyleType }>`
   flex: 1;
-  padding: ${(p) => p.$inputStyle?.inputPadding || "8px 14px"};
+  padding: ${(p) => p.$inputStyle?.padding || "8px 14px"};
   border: 1px solid ${(p) => p.$inputStyle?.inputBorder || "#d9d9d9"};
-  border-radius: ${(p) => p.$inputStyle?.inputRadius || "18px"};
+  border-radius: ${(p) => p.$inputStyle?.radius || "18px"};
   background: ${(p) => p.$inputStyle?.inputBackground || "#fff"};
   color: ${(p) => p.$inputStyle?.inputText || "inherit"};
   resize: none;
diff --git a/client/packages/lowcoder/src/comps/controls/colorControl.tsx b/client/packages/lowcoder/src/comps/controls/colorControl.tsx
@@ -35,7 +35,7 @@ const ColorInput = styled.div`
 const DepStyle = styled.div`
   left: 30px;
   width: 140px;
-  min-height: 30px;
+  height: 30px;
   display: flex;
   align-items: center;
   padding: 4px 8px;
@@ -48,6 +48,11 @@ const DepStyle = styled.div`
 
   span:nth-of-type(1) {
     color: #8b8fa3;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: inline-block;
+    max-width: 100%;
   }
 
   span:nth-of-type(2) {
diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
@@ -2700,12 +2700,12 @@ export const ChatBoxV2SidebarStyle = [
     transformer: contrastText,
   },
   {
-    name: "sidebarItemPadding",
+    name: "padding",
     label: trans("style.chatV2SidebarItemPadding"),
     padding: "padding",
   },
   {
-    name: "sidebarRadius",
+    name: "radius",
     label: trans("style.chatV2SidebarRadius"),
     radius: "radius",
   },
@@ -2730,7 +2730,7 @@ export const ChatBoxV2HeaderStyle = [
     color: "#eeeeee",
   },
   {
-    name: "headerPadding",
+    name: "padding",
     label: trans("style.chatV2HeaderPadding"),
     padding: "padding",
   },
@@ -2769,12 +2769,12 @@ export const ChatBoxV2MessageStyle = [
     transformer: contrastText,
   },
   {
-    name: "messageBubblePadding",
+    name: "padding",
     label: trans("style.chatV2MessageBubblePadding"),
     padding: "padding",
   },
   {
-    name: "messageBubbleRadius",
+    name: "radius",
     label: trans("style.chatV2MessageBubbleRadius"),
     radius: "radius",
   },
@@ -2804,12 +2804,12 @@ export const ChatBoxV2InputStyle = [
     color: "#d9d9d9",
   },
   {
-    name: "inputRadius",
+    name: "radius",
     label: trans("style.chatV2InputRadius"),
     radius: "radius",
   },
   {
-    name: "inputPadding",
+    name: "padding",
     label: trans("style.chatV2InputPadding"),
     padding: "padding",
   },
diff --git a/client/packages/lowcoder/src/comps/hooks/chatControllerV2Comp.tsx b/client/packages/lowcoder/src/comps/hooks/chatControllerV2Comp.tsx
@@ -3,7 +3,6 @@ import { Section, sectionNames } from "lowcoder-design";
 import {
   simpleMultiComp,
   stateComp,
-  withDefault,
   withPropertyViewFn,
   withViewFn,
 } from "../generators";
@@ -12,7 +11,7 @@ import { withMethodExposing } from "../generators/withMethodExposing";
 import { stringExposingStateControl } from "comps/controls/codeStateControl";
 import { eventHandlerControl } from "comps/controls/eventHandlerControl";
 import { JSONObject } from "../../util/jsonTypes";
-import { isEmpty, omit, isEqual } from "lodash";
+import { isEmpty, omit } from "lodash";
 import {
   PluvRoomProvider,
   useStorage,
@@ -147,15 +146,11 @@ const SignalController = React.memo(
       onlineCount: number;
       initialized: boolean;
       aiThinkingRooms: Record<string, boolean>;
-      sharedState: JSONObject | null;
-      roomData: JSONObject | null;
     }>({
       ready: false,
       onlineCount: 0,
       initialized: false,
       aiThinkingRooms: {},
-      sharedState: null,
-      roomData: null,
     });
 
     // ── Connection state ──────────────────────────────────────────────
@@ -180,16 +175,13 @@ const SignalController = React.memo(
 
     // ── Online users ──────────────────────────────────────────────────
     const onlineUsers = useMemo<OnlineUser[]>(() => {
-      const users = others
+      return others
         .filter((o: any) => o.presence != null)
         .map((o: any) => ({
           userId: o.presence.userId as string,
           userName: o.presence.userName as string,
           currentRoomId: (o.presence.currentRoomId as string) || null,
         }));
-      // DEBUG: Remove after fixing presence sync issue
-      console.log("[ChatController] others count:", others.length, "onlineUsers:", users.length, "users:", users.map(u => u.userId));
-      return users;
     }, [others]);
 
     useEffect(() => {
@@ -257,10 +249,9 @@ const SignalController = React.memo(
     // ── Watch shared state ──────────────────────────────────────────
     useEffect(() => {
       if (!sharedStateData) return;
-      const next = sharedStateData as unknown as JSONObject;
-      if (isEqual(next, prevRef.current.sharedState)) return;
-      prevRef.current.sharedState = next;
-      compRef.current.children.sharedState.dispatchChangeValueAction(next);
+      compRef.current.children.sharedState.dispatchChangeValueAction(
+        sharedStateData as unknown as JSONObject,
+      );
       if (prevRef.current.initialized) {
         triggerEventRef.current("sharedStateChanged");
       }
@@ -269,10 +260,9 @@ const SignalController = React.memo(
     // ── Watch room data ──────────────────────────────────────────────
     useEffect(() => {
       if (!roomDataData) return;
-      const next = roomDataData as unknown as JSONObject;
-      if (isEqual(next, prevRef.current.roomData)) return;
-      prevRef.current.roomData = next;
-      compRef.current.children.roomData.dispatchChangeValueAction(next);
+      compRef.current.children.roomData.dispatchChangeValueAction(
+        roomDataData as unknown as JSONObject,
+      );
       if (prevRef.current.initialized) {
         triggerEventRef.current("roomDataChanged");
       }
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -623,35 +623,35 @@ export const en = {
     "activeThreadBorder": "Active Thread Border",
 
     // ChatBox V2 Styles
-    "chatV2SidebarBackground": "Sidebar Background",
-    "chatV2SidebarText": "Sidebar Text",
-    "chatV2SidebarBorder": "Sidebar Border",
-    "chatV2SidebarHeaderBackground": "Sidebar Header Background",
-    "chatV2ActiveItemBackground": "Active Room Background",
-    "chatV2ActiveItemText": "Active Room Text",
-    "chatV2SidebarItemPadding": "Room Item Padding",
-    "chatV2SidebarRadius": "Sidebar Radius",
-    "chatV2HeaderBackground": "Header Background",
-    "chatV2HeaderText": "Header Text",
-    "chatV2HeaderBorder": "Header Border",
-    "chatV2HeaderPadding": "Header Padding",
-    "chatV2MessageAreaBackground": "Message Area Background",
-    "chatV2OwnMessageBackground": "Own Message Background",
-    "chatV2OwnMessageText": "Own Message Text",
-    "chatV2OtherMessageBackground": "Other Message Background",
-    "chatV2OtherMessageText": "Other Message Text",
-    "chatV2MessageBubblePadding": "Message Bubble Padding",
-    "chatV2MessageBubbleRadius": "Message Bubble Radius",
-    "chatV2MessageMetaText": "Message Meta Text",
-    "chatV2InputBackground": "Input Background",
-    "chatV2InputText": "Input Text",
-    "chatV2InputBorder": "Input Border",
-    "chatV2InputRadius": "Input Radius",
-    "chatV2InputPadding": "Input Padding",
-    "chatV2InputAreaBackground": "Input Area Background",
-    "chatV2InputAreaBorder": "Input Area Border",
-    "chatV2SendButtonBackground": "Send Button Background",
-    "chatV2SendButtonIcon": "Send Button Icon",
+    "chatV2SidebarBackground": "Background",
+    "chatV2SidebarText": "Text",
+    "chatV2SidebarBorder": "Border",
+    "chatV2SidebarHeaderBackground": "Header BG",
+    "chatV2ActiveItemBackground": "Active BG",
+    "chatV2ActiveItemText": "Active Text",
+    "chatV2SidebarItemPadding": "Item Padding",
+    "chatV2SidebarRadius": "Radius",
+    "chatV2HeaderBackground": "Background",
+    "chatV2HeaderText": "Text",
+    "chatV2HeaderBorder": "Border",
+    "chatV2HeaderPadding": "Padding",
+    "chatV2MessageAreaBackground": "Area BG",
+    "chatV2OwnMessageBackground": "Own Msg BG",
+    "chatV2OwnMessageText": "Own Msg Text",
+    "chatV2OtherMessageBackground": "Other Msg BG",
+    "chatV2OtherMessageText": "Other Msg Text",
+    "chatV2MessageBubblePadding": "Bubble Padding",
+    "chatV2MessageBubbleRadius": "Bubble Radius",
+    "chatV2MessageMetaText": "Meta Text",
+    "chatV2InputBackground": "Background",
+    "chatV2InputText": "Text",
+    "chatV2InputBorder": "Border",
+    "chatV2InputRadius": "Radius",
+    "chatV2InputPadding": "Padding",
+    "chatV2InputAreaBackground": "Area BG",
+    "chatV2InputAreaBorder": "Area Border",
+    "chatV2SendButtonBackground": "Send Btn BG",
+    "chatV2SendButtonIcon": "Send Btn Icon",
 
     "radiusTip": "Specifies the radius of the element's corners. Example: 5px, 50%, or 1em.",
     "gapTip": "Specifies the gap between rows and columns in a grid or flex container. Example: 10px, 1rem, or 5%.",
