fix: minor issues in the web-chat (#218)

* improve condition for message sending, fix clear input issue

* prevent display of empty messages

examples/web-chat/src/MessageInput.tsx

@@ -23,13 +23,14 @@ export default function MessageInput(props: Props) {
   const [isActive, setActiveButton] = useState<boolean>(false);
 
   const onMessage = async () => {
-    if (props.sendMessage) {
+    if (props.sendMessage && inputText) {
       await props.sendMessage(inputText);
       setInputText("");
     }
   };
 
   const onChange = (event: ChangeEvent<HTMLInputElement>) => {
+    event.preventDefault();
     setInputText(event.target.value);
   };
 

examples/web-chat/src/Room.tsx

@@ -22,7 +22,7 @@ export default function Room(props: Props) {
   const { storePeers, filterPeers, lightPushPeers } = usePeers({ node });
 
   const onSend = async (text: string) => {
-    if (!onPush) {
+    if (!onPush || !text) {
       return;
     }
 

examples/web-chat/src/hooks.ts

@@ -46,6 +46,7 @@ export const useMessages = (params: UseMessagesParams): UseMessagesResult => {
       .map(Message.fromWakuMessage)
       .concat(localMessages)
       .filter((v): v is Message => !!v)
+      .filter((v) => v.payloadAsUtf8 !== "")
       .sort(
         (left, right) => left.timestamp.getTime() - right.timestamp.getTime()
       );