add composer, update cannotSendMessage guard to block empty messages

src/View/ChatPages/messagePage.tsx

@@ -3,6 +3,7 @@ import "./messagePage.css";
 import * as React from "bloatless-react";
 
 import ChatViewModel from "../../ViewModel/chatViewModel";
+import { translations } from "../translations";
 
 export function MessagePage(chatViewModel: ChatViewModel) {
   return (
@@ -12,7 +13,23 @@ export function MessagePage(chatViewModel: ChatViewModel) {
       </div>
       <div class="content">
         <div id="message-container"></div>
-        <div id="composer"></div>
+        <div id="composer">
+          <input
+            bind:value={chatViewModel.composingMessage}
+            on:enter={chatViewModel.sendMessage}
+            placeholder={translations.chatPage.message.composerInputPlaceholder}
+          ></input>
+          <button
+            class="primary"
+            aria-label={
+              translations.chatPage.message.sendMessageButtonAudioLabel
+            }
+            on:click={chatViewModel.sendMessage}
+            toggle:disabled={chatViewModel.cannotSendMessage}
+          >
+            <span class="icon">send</span>
+          </button>
+        </div>
       </div>
     </div>
   );