Skip to content

Commit 47efd75

Browse files
iamfaraniamfaran
committed
fix property view layout + padding/radius issues for the chatbox component
1 parent 1206216 commit 47efd75

5 files changed

Lines changed: 57 additions & 62 deletions

File tree

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export const RoomPanelContainer = styled.div<{
3131
flex-direction: column;
3232
background: ${(p) => p.$sidebarStyle?.sidebarBackground || "#fafbfc"};
3333
color: ${(p) => p.$sidebarStyle?.sidebarText || "inherit"};
34-
border-radius: ${(p) => p.$sidebarStyle?.sidebarRadius || "0"};
34+
border-radius: ${(p) => p.$sidebarStyle?.radius || "0"};
3535
`;
3636

3737
export const RoomPanelHeader = styled.div<{ $sidebarStyle?: ChatBoxV2SidebarStyleType }>`
@@ -56,7 +56,7 @@ export const RoomItemStyled = styled.div<{
5656
$active: boolean;
5757
$sidebarStyle?: ChatBoxV2SidebarStyleType;
5858
}>`
59-
padding: ${(p) => p.$sidebarStyle?.sidebarItemPadding || "8px 10px"};
59+
padding: ${(p) => p.$sidebarStyle?.padding || "8px 10px"};
6060
margin-bottom: 4px;
6161
border-radius: 6px;
6262
cursor: pointer;
@@ -104,7 +104,7 @@ export const ChatPanelContainer = styled.div`
104104
`;
105105

106106
export const ChatHeaderBar = styled.div<{ $headerStyle?: ChatBoxV2HeaderStyleType }>`
107-
padding: ${(p) => p.$headerStyle?.headerPadding || "12px 16px"};
107+
padding: ${(p) => p.$headerStyle?.padding || "12px 16px"};
108108
border-bottom: 1px solid ${(p) => p.$headerStyle?.headerBorder || "#eee"};
109109
background: ${(p) => p.$headerStyle?.headerBackground || "transparent"};
110110
color: ${(p) => p.$headerStyle?.headerText || "inherit"};
@@ -134,9 +134,9 @@ export const Bubble = styled.div<{
134134
$own: boolean;
135135
$messageStyle?: ChatBoxV2MessageStyleType;
136136
}>`
137-
padding: ${(p) => p.$messageStyle?.messageBubblePadding || "10px 14px"};
137+
padding: ${(p) => p.$messageStyle?.padding || "10px 14px"};
138138
border-radius: ${(p) => {
139-
const r = p.$messageStyle?.messageBubbleRadius;
139+
const r = p.$messageStyle?.radius;
140140
if (r && r !== "0") return r;
141141
return p.$own ? "16px 16px 4px 16px" : "16px 16px 16px 4px";
142142
}};
@@ -185,9 +185,9 @@ export const InputBarContainer = styled.div<{ $inputStyle?: ChatBoxV2InputStyleT
185185

186186
export const StyledTextArea = styled.textarea<{ $inputStyle?: ChatBoxV2InputStyleType }>`
187187
flex: 1;
188-
padding: ${(p) => p.$inputStyle?.inputPadding || "8px 14px"};
188+
padding: ${(p) => p.$inputStyle?.padding || "8px 14px"};
189189
border: 1px solid ${(p) => p.$inputStyle?.inputBorder || "#d9d9d9"};
190-
border-radius: ${(p) => p.$inputStyle?.inputRadius || "18px"};
190+
border-radius: ${(p) => p.$inputStyle?.radius || "18px"};
191191
background: ${(p) => p.$inputStyle?.inputBackground || "#fff"};
192192
color: ${(p) => p.$inputStyle?.inputText || "inherit"};
193193
resize: none;

‎client/packages/lowcoder/src/comps/controls/colorControl.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ const ColorInput = styled.div`
3535
const DepStyle = styled.div`
3636
left: 30px;
3737
width: 140px;
38-
min-height: 30px;
38+
height: 30px;
3939
display: flex;
4040
align-items: center;
4141
padding: 4px 8px;
@@ -48,6 +48,11 @@ const DepStyle = styled.div`
4848
4949
span:nth-of-type(1) {
5050
color: #8b8fa3;
51+
overflow: hidden;
52+
text-overflow: ellipsis;
53+
white-space: nowrap;
54+
display: inline-block;
55+
max-width: 100%;
5156
}
5257
5358
span:nth-of-type(2) {

‎client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2700,12 +2700,12 @@ export const ChatBoxV2SidebarStyle = [
27002700
transformer: contrastText,
27012701
},
27022702
{
2703-
name: "sidebarItemPadding",
2703+
name: "padding",
27042704
label: trans("style.chatV2SidebarItemPadding"),
27052705
padding: "padding",
27062706
},
27072707
{
2708-
name: "sidebarRadius",
2708+
name: "radius",
27092709
label: trans("style.chatV2SidebarRadius"),
27102710
radius: "radius",
27112711
},
@@ -2730,7 +2730,7 @@ export const ChatBoxV2HeaderStyle = [
27302730
color: "#eeeeee",
27312731
},
27322732
{
2733-
name: "headerPadding",
2733+
name: "padding",
27342734
label: trans("style.chatV2HeaderPadding"),
27352735
padding: "padding",
27362736
},
@@ -2769,12 +2769,12 @@ export const ChatBoxV2MessageStyle = [
27692769
transformer: contrastText,
27702770
},
27712771
{
2772-
name: "messageBubblePadding",
2772+
name: "padding",
27732773
label: trans("style.chatV2MessageBubblePadding"),
27742774
padding: "padding",
27752775
},
27762776
{
2777-
name: "messageBubbleRadius",
2777+
name: "radius",
27782778
label: trans("style.chatV2MessageBubbleRadius"),
27792779
radius: "radius",
27802780
},
@@ -2804,12 +2804,12 @@ export const ChatBoxV2InputStyle = [
28042804
color: "#d9d9d9",
28052805
},
28062806
{
2807-
name: "inputRadius",
2807+
name: "radius",
28082808
label: trans("style.chatV2InputRadius"),
28092809
radius: "radius",
28102810
},
28112811
{
2812-
name: "inputPadding",
2812+
name: "padding",
28132813
label: trans("style.chatV2InputPadding"),
28142814
padding: "padding",
28152815
},

‎client/packages/lowcoder/src/comps/hooks/chatControllerV2Comp.tsx‎

Lines changed: 8 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { Section, sectionNames } from "lowcoder-design";
33
import {
44
simpleMultiComp,
55
stateComp,
6-
withDefault,
76
withPropertyViewFn,
87
withViewFn,
98
} from "../generators";
@@ -12,7 +11,7 @@ import { withMethodExposing } from "../generators/withMethodExposing";
1211
import { stringExposingStateControl } from "comps/controls/codeStateControl";
1312
import { eventHandlerControl } from "comps/controls/eventHandlerControl";
1413
import { JSONObject } from "../../util/jsonTypes";
15-
import { isEmpty, omit, isEqual } from "lodash";
14+
import { isEmpty, omit } from "lodash";
1615
import {
1716
PluvRoomProvider,
1817
useStorage,
@@ -147,15 +146,11 @@ const SignalController = React.memo(
147146
onlineCount: number;
148147
initialized: boolean;
149148
aiThinkingRooms: Record<string, boolean>;
150-
sharedState: JSONObject | null;
151-
roomData: JSONObject | null;
152149
}>({
153150
ready: false,
154151
onlineCount: 0,
155152
initialized: false,
156153
aiThinkingRooms: {},
157-
sharedState: null,
158-
roomData: null,
159154
});
160155

161156
// ── Connection state ──────────────────────────────────────────────
@@ -180,16 +175,13 @@ const SignalController = React.memo(
180175

181176
// ── Online users ──────────────────────────────────────────────────
182177
const onlineUsers = useMemo<OnlineUser[]>(() => {
183-
const users = others
178+
return others
184179
.filter((o: any) => o.presence != null)
185180
.map((o: any) => ({
186181
userId: o.presence.userId as string,
187182
userName: o.presence.userName as string,
188183
currentRoomId: (o.presence.currentRoomId as string) || null,
189184
}));
190-
// DEBUG: Remove after fixing presence sync issue
191-
console.log("[ChatController] others count:", others.length, "onlineUsers:", users.length, "users:", users.map(u => u.userId));
192-
return users;
193185
}, [others]);
194186

195187
useEffect(() => {
@@ -257,10 +249,9 @@ const SignalController = React.memo(
257249
// ── Watch shared state ──────────────────────────────────────────
258250
useEffect(() => {
259251
if (!sharedStateData) return;
260-
const next = sharedStateData as unknown as JSONObject;
261-
if (isEqual(next, prevRef.current.sharedState)) return;
262-
prevRef.current.sharedState = next;
263-
compRef.current.children.sharedState.dispatchChangeValueAction(next);
252+
compRef.current.children.sharedState.dispatchChangeValueAction(
253+
sharedStateData as unknown as JSONObject,
254+
);
264255
if (prevRef.current.initialized) {
265256
triggerEventRef.current("sharedStateChanged");
266257
}
@@ -269,10 +260,9 @@ const SignalController = React.memo(
269260
// ── Watch room data ──────────────────────────────────────────────
270261
useEffect(() => {
271262
if (!roomDataData) return;
272-
const next = roomDataData as unknown as JSONObject;
273-
if (isEqual(next, prevRef.current.roomData)) return;
274-
prevRef.current.roomData = next;
275-
compRef.current.children.roomData.dispatchChangeValueAction(next);
263+
compRef.current.children.roomData.dispatchChangeValueAction(
264+
roomDataData as unknown as JSONObject,
265+
);
276266
if (prevRef.current.initialized) {
277267
triggerEventRef.current("roomDataChanged");
278268
}

‎client/packages/lowcoder/src/i18n/locales/en.ts‎

Lines changed: 29 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -623,35 +623,35 @@ export const en = {
623623
"activeThreadBorder": "Active Thread Border",
624624

625625
// ChatBox V2 Styles
626-
"chatV2SidebarBackground": "Sidebar Background",
627-
"chatV2SidebarText": "Sidebar Text",
628-
"chatV2SidebarBorder": "Sidebar Border",
629-
"chatV2SidebarHeaderBackground": "Sidebar Header Background",
630-
"chatV2ActiveItemBackground": "Active Room Background",
631-
"chatV2ActiveItemText": "Active Room Text",
632-
"chatV2SidebarItemPadding": "Room Item Padding",
633-
"chatV2SidebarRadius": "Sidebar Radius",
634-
"chatV2HeaderBackground": "Header Background",
635-
"chatV2HeaderText": "Header Text",
636-
"chatV2HeaderBorder": "Header Border",
637-
"chatV2HeaderPadding": "Header Padding",
638-
"chatV2MessageAreaBackground": "Message Area Background",
639-
"chatV2OwnMessageBackground": "Own Message Background",
640-
"chatV2OwnMessageText": "Own Message Text",
641-
"chatV2OtherMessageBackground": "Other Message Background",
642-
"chatV2OtherMessageText": "Other Message Text",
643-
"chatV2MessageBubblePadding": "Message Bubble Padding",
644-
"chatV2MessageBubbleRadius": "Message Bubble Radius",
645-
"chatV2MessageMetaText": "Message Meta Text",
646-
"chatV2InputBackground": "Input Background",
647-
"chatV2InputText": "Input Text",
648-
"chatV2InputBorder": "Input Border",
649-
"chatV2InputRadius": "Input Radius",
650-
"chatV2InputPadding": "Input Padding",
651-
"chatV2InputAreaBackground": "Input Area Background",
652-
"chatV2InputAreaBorder": "Input Area Border",
653-
"chatV2SendButtonBackground": "Send Button Background",
654-
"chatV2SendButtonIcon": "Send Button Icon",
626+
"chatV2SidebarBackground": "Background",
627+
"chatV2SidebarText": "Text",
628+
"chatV2SidebarBorder": "Border",
629+
"chatV2SidebarHeaderBackground": "Header BG",
630+
"chatV2ActiveItemBackground": "Active BG",
631+
"chatV2ActiveItemText": "Active Text",
632+
"chatV2SidebarItemPadding": "Item Padding",
633+
"chatV2SidebarRadius": "Radius",
634+
"chatV2HeaderBackground": "Background",
635+
"chatV2HeaderText": "Text",
636+
"chatV2HeaderBorder": "Border",
637+
"chatV2HeaderPadding": "Padding",
638+
"chatV2MessageAreaBackground": "Area BG",
639+
"chatV2OwnMessageBackground": "Own Msg BG",
640+
"chatV2OwnMessageText": "Own Msg Text",
641+
"chatV2OtherMessageBackground": "Other Msg BG",
642+
"chatV2OtherMessageText": "Other Msg Text",
643+
"chatV2MessageBubblePadding": "Bubble Padding",
644+
"chatV2MessageBubbleRadius": "Bubble Radius",
645+
"chatV2MessageMetaText": "Meta Text",
646+
"chatV2InputBackground": "Background",
647+
"chatV2InputText": "Text",
648+
"chatV2InputBorder": "Border",
649+
"chatV2InputRadius": "Radius",
650+
"chatV2InputPadding": "Padding",
651+
"chatV2InputAreaBackground": "Area BG",
652+
"chatV2InputAreaBorder": "Area Border",
653+
"chatV2SendButtonBackground": "Send Btn BG",
654+
"chatV2SendButtonIcon": "Send Btn Icon",
655655

656656
"radiusTip": "Specifies the radius of the element's corners. Example: 5px, 50%, or 1em.",
657657
"gapTip": "Specifies the gap between rows and columns in a grid or flex container. Example: 10px, 1rem, or 5%.",

0 commit comments

Comments
 (0)