FIX: correctly differentiates channel/thread upload inputs (#21301)

Prior to this fix uploads event could end up in the wrong textarea. This will most importantly allow pasting an image in the thread composer.

Also fixes a minor padding issue on thread when uploads are associated to it.

plugins/chat/assets/javascripts/discourse/components/chat-composer-uploads.js

@@ -39,7 +39,7 @@ export default Component.extend(UppyUploadMixin, {
 
   didInsertElement() {
     this._super(...arguments);
-    this.composerInputEl = document.querySelector(".chat-composer__input");
+
     this.composerInputEl?.addEventListener("paste", this._pasteEventListener);
   },
 

plugins/chat/assets/javascripts/discourse/components/chat-composer.hbs

@@ -42,6 +42,7 @@
 
         <div class="chat-composer__input-container">
           <DTextarea
+            id={{this.composerId}}
             value={{readonly this.currentMessage.message}}
             type="text"
             class="chat-composer__input"
@@ -86,6 +87,7 @@
       @onUploadChanged={{this.onUploadChanged}}
       @existingUploads={{this.currentMessage.uploads}}
       @uploadDropZone={{@uploadDropZone}}
+      @composerInputEl={{this.textareaInteractor.textarea}}
     />
   {{/if}}
 

plugins/chat/assets/javascripts/discourse/components/chat/composer/channel.js

@@ -12,6 +12,8 @@ export default class ChatComposerChannel extends ChatComposer {
 
   context = "channel";
 
+  composerId = "channel-composer";
+
   @action
   sendMessage(raw) {
     const message = ChatMessage.createDraftMessage(this.args.channel, {

plugins/chat/assets/javascripts/discourse/components/chat/composer/thread.js

@@ -11,6 +11,8 @@ export default class ChatComposerThread extends ChatComposer {
 
   context = "thread";
 
+  composerId = "thread-composer";
+
   @action
   sendMessage(raw) {
     const message = ChatMessage.createDraftMessage(this.args.channel, {

plugins/chat/assets/javascripts/discourse/lib/textarea-interactor.js

@@ -22,7 +22,7 @@ export default class TextareaInteractor extends EmberObject.extend(
     this._textarea = textarea;
     this.element = this._textarea;
     this.ready = true;
-    this.composerFocusSelector = ".chat-composer__input";
+    this.composerFocusSelector = `#${textarea.id}`;
 
     this.init(); // mixin init wouldn't be called otherwise
     this.composerEventPrefix = null; // we don't need app events

plugins/chat/assets/stylesheets/common/chat-thread.scss

@@ -29,7 +29,7 @@
     will-change: transform;
   }
 
-  .chat-composer {
+  .chat-composer__wrapper {
     padding-bottom: 28px;
   }
 }