From 721f5cc19b380ce134a43fa3d423d89e39c47fb3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Josef=20Sch=C3=B6nberger?=
 <82521952+JosefSchoenberger@users.noreply.github.com>
Date: Wed, 23 Aug 2023 13:26:21 +0200
Subject: [PATCH] Prolong maximum chat message length to 1000 characters
 (#1135)

* Prolong maximum chat message length to 1000 characters

* Fix ESLint and server-side check
---
 model/chat.go                       |  2 +-
 web/template/components/chat.gohtml |  8 ++++----
 web/ts/components/chat-prompt.ts    | 11 +++++++++--
 3 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/model/chat.go b/model/chat.go
index 80daebe1c..05bc35721 100644
--- 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
index 07e2331bd..0d34d4b4e 100644
--- 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}}
\ No newline at end of file
+{{end}}
diff --git a/web/ts/components/chat-prompt.ts b/web/ts/components/chat-prompt.ts
index 94d524a53..55eaf50c2 100644
--- 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) {