stream.place
Live video on the AT Protocol
fix: create toast for long messages + outline text
+21
-1
+21
-1
js/components/src/components/chat/chat-box.tsx
+21
-1
js/components/src/components/chat/chat-box.tsx
···
7
7
Button,
8
8
Loader,
9
9
Text,
10
+
toast,
10
11
useChat,
11
12
useCreateChatMessage,
12
13
useLivestream,
···
62
63
new Map(),
63
64
);
64
65
const [filteredEmojis, setFilteredEmojis] = useState<any[]>([]);
66
+
const isOverLimit = [...message].length > 300;
65
67
66
68
let linfo = useLivestream();
67
69
···
234
236
235
237
const submit = () => {
236
238
if (!message.trim()) return;
239
+
if ([...message].length > 300) {
240
+
toast.show(
241
+
"Message too long",
242
+
"Please limit your message to 300 characters.",
243
+
{
244
+
variant: "error",
245
+
duration: 3,
246
+
},
247
+
);
248
+
return;
249
+
}
237
250
setMessage("");
238
251
setReplyToMessage(null);
239
252
···
412
425
}
413
426
}
414
427
}}
415
-
style={[chatBoxStyle]}
428
+
style={[
429
+
chatBoxStyle,
430
+
isOverLimit && {
431
+
borderColor: "#ef4444",
432
+
borderWidth: 2,
433
+
outline: "none",
434
+
},
435
+
]}
416
436
// "submit" won't blur on enter
417
437
submitBehavior="submit"
418
438
placeholder="Type a message..."