diff --git a/src/components/PageComponents/Messages/ChannelChat.tsx b/src/components/PageComponents/Messages/ChannelChat.tsx
index 79950bf8..b636fbc6 100644
--- a/src/components/PageComponents/Messages/ChannelChat.tsx
+++ b/src/components/PageComponents/Messages/ChannelChat.tsx
@@ -69,7 +69,7 @@ export const ChannelChat = ({
-
+
);
diff --git a/src/components/PageComponents/Messages/MessageInput.tsx b/src/components/PageComponents/Messages/MessageInput.tsx
index ae88f9ac..b9080bb2 100644
--- a/src/components/PageComponents/Messages/MessageInput.tsx
+++ b/src/components/PageComponents/Messages/MessageInput.tsx
@@ -9,11 +9,13 @@ import { useCallback, useMemo, useState } from "react";
export interface MessageInputProps {
to: Types.Destination;
channel: Types.ChannelNumber;
+ maxBytes: number;
}
export const MessageInput = ({
to,
channel,
+ maxBytes,
}: MessageInputProps): JSX.Element => {
const {
connection,
@@ -24,6 +26,7 @@ export const MessageInput = ({
} = useDevice();
const myNodeNum = hardware.myNodeNum;
const [localDraft, setLocalDraft] = useState(messageDraft);
+ const [messageBytes, setMessageBytes] = useState(maxBytes);
const debouncedSetMessageDraft = useMemo(
() => debounce(setMessageDraft, 300),
@@ -60,8 +63,12 @@ export const MessageInput = ({
const handleInputChange = (e: React.ChangeEvent) => {
const newValue = e.target.value;
- setLocalDraft(newValue);
- debouncedSetMessageDraft(newValue);
+ const byteLength = new Blob([newValue]).size;
+ if (byteLength <= maxBytes) {
+ setLocalDraft(newValue);
+ debouncedSetMessageDraft(newValue);
+ setMessageBytes(maxBytes - byteLength);
+ }
};
return (
@@ -85,6 +92,9 @@ export const MessageInput = ({
onChange={handleInputChange}
/>
+
+ {messageBytes}/{maxBytes}
+