Prolong maximum chat message length to 1000 characters (#1135)

* Prolong maximum chat message length to 1000 characters * Fix ESLint and server-side check
TUM-Dev · May 7, 2024 · 906272c · 906272c
1 parent 893c305
commit 906272c
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 7 deletions.
diff --git a/model/chat.go b/model/chat.go
@@ -37,7 +37,7 @@ var (
 )
 
 const (
-	maxMessageLength = 250
+	maxMessageLength = 1000
 	coolDown         = time.Minute * 2
 	coolDownMessages = 5 // 5 messages -> 5 messages per 2 minutes max
 )

diff --git a/web/template/components/chat.gohtml b/web/template/components/chat.gohtml
@@ -288,11 +288,11 @@
                             </button>
                         </template>
                     </section>
-                    <article class="flex flex-col space-y-2 px-5 border-t dark:border-gray-800 py-2 font-light">
+                    <article class="flex flex-col space-y-2 px-3 border-t dark:border-gray-800 py-2 font-light">
                         <label class="grow">
-                            <input id="chat-input" type="text" spellcheck="true" maxlength="200"
+                            <textarea id="chat-input" type="text" spellcheck="true" maxlength="1000"
                                    @keyup="keyup()"
-                                   @keyup.enter="send()"
+                                   @keyup.enter="send(event)"
                                    @keyup.esc="cancelReply()"
                                    :disabled="!isLoggedIn()"
                                    x-model="message"
@@ -505,4 +505,4 @@
                 </template>
             </article>
         </template>
-{{end}}
+{{end}}
diff --git a/web/ts/components/chat-prompt.ts b/web/ts/components/chat-prompt.ts
@@ -21,7 +21,7 @@ export function chatPromptContext(streamId: number): AlpineComponent {
 
         ws: new ChatWebsocketConnection(SocketConnections.ws),
 
-        inputEl: document.getElementById("chat-input") as HTMLInputElement,
+        inputEl: document.getElementById("chat-input") as HTMLTextAreaElement,
         usersEl: document.getElementById("chat-user-list") as HTMLInputElement,
         emojiEl: document.getElementById("chat-emoji-list") as HTMLInputElement,
 
@@ -41,7 +41,10 @@ export function chatPromptContext(streamId: number): AlpineComponent {
             this.users.reset();
         },
 
-        send() {
+        send(event: KeyboardEvent) {
+            if (event.shiftKey) {
+                return;
+            }
             console.log("🌑 send message '", this.message, "'");
             this.ws.sendMessage({
                 msg: this.message,
@@ -84,6 +87,10 @@ export function chatPromptContext(streamId: number): AlpineComponent {
             } else if (this.emojis.hasSuggestions()) {
                 this.emojiEl.focus();
             }
+
+            // https://stackoverflow.com/a/21079335
+            this.inputEl.style.height = "0px";
+            this.inputEl.style.height = this.inputEl.scrollHeight + "px";
         },
 
         keypressAlphanumeric(e) {