FEATURE: add support for uploads when starting a convo

(work in progress)

Author: SamSaffron

assets/javascripts/discourse/controllers/discourse-ai-bot-conversations.js

@@ -1,21 +1,117 @@
+import { tracked } from "@glimmer/tracking";
 import Controller from "@ember/controller";
 import { action } from "@ember/object";
+import { getOwner } from "@ember/owner";
 import { service } from "@ember/service";
+import UppyUpload from "discourse/lib/uppy/uppy-upload";
+import UppyMediaOptimization from "discourse/lib/uppy-media-optimization-plugin";
+import { clipboardHelpers } from "discourse/lib/utilities";
 
 export default class DiscourseAiBotConversations extends Controller {
   @service aiBotConversationsHiddenSubmit;
   @service currentUser;
+  @service mediaOptimizationWorker;
+  @service site;
+  @service siteSettings;
+
+  @tracked uploads = [];
+  // Don't track this directly - we'll get it from uppyUpload
 
   textarea = null;
+  uppyUpload = null;
+  fileInputEl = null;
+
+  _handlePaste = (event) => {
+    if (document.activeElement !== this.textarea) {
+      return;
+    }
+
+    const { canUpload, canPasteHtml, types } = clipboardHelpers(event, {
+      siteSettings: this.siteSettings,
+      canUpload: true,
+    });
+
+    if (!canUpload || canPasteHtml || types.includes("text/plain")) {
+      return;
+    }
 
+    if (event && event.clipboardData && event.clipboardData.files) {
+      this.uppyUpload.addFiles([...event.clipboardData.files], {
+        pasted: true,
+      });
+    }
+  };
   init() {
     super.init(...arguments);
+
+    this.uploads = [];
+
+    this.uppyUpload = new UppyUpload(getOwner(this), {
+      id: "ai-bot-file-uploader",
+      type: "ai-bot-conversation",
+      useMultipartUploadsIfAvailable: true,
+
+      uppyReady: () => {
+        if (this.siteSettings.composer_media_optimization_image_enabled) {
+          this.uppyUpload.uppyWrapper.useUploadPlugin(UppyMediaOptimization, {
+            optimizeFn: (data, opts) =>
+              this.mediaOptimizationWorker.optimizeImage(data, opts),
+            runParallel: !this.site.isMobileDevice,
+          });
+        }
+
+        this.uppyUpload.uppyWrapper.onPreProcessProgress((file) => {
+          const inProgressUpload = this.inProgressUploads?.find(
+            (upl) => upl.id === file.id
+          );
+          if (inProgressUpload && !inProgressUpload.processing) {
+            inProgressUpload.processing = true;
+          }
+        });
+
+        this.uppyUpload.uppyWrapper.onPreProcessComplete((file) => {
+          const inProgressUpload = this.inProgressUploads?.find(
+            (upl) => upl.id === file.id
+          );
+          if (inProgressUpload) {
+            inProgressUpload.processing = false;
+          }
+        });
+
+        // Setup paste listener for the textarea
+        this.textarea?.addEventListener("paste", this._handlePaste);
+      },
+
+      uploadDone: (upload) => {
+        this.uploads.pushObject(upload);
+      },
+
+      // Fix: Don't try to set inProgressUploads directly
+      onProgressUploadsChanged: () => {
+        // This is just for UI triggers - we're already tracking inProgressUploads
+        this.notifyPropertyChange("inProgressUploads");
+      },
+    });
+  }
+
+  willDestroy() {
+    super.willDestroy(...arguments);
+    this.textarea?.removeEventListener("paste", this._handlePaste);
+    this.uppyUpload?.teardown();
   }
 
   get loading() {
     return this.aiBotConversationsHiddenSubmit?.loading;
   }
 
+  get inProgressUploads() {
+    return this.uppyUpload?.inProgressUploads || [];
+  }
+
+  get showUploadsContainer() {
+    return this.uploads?.length > 0 || this.inProgressUploads?.length > 0;
+  }
+
   @action
   setPersonaId(id) {
     this.aiBotConversationsHiddenSubmit.personaId = id;
@@ -36,13 +132,52 @@ export default class DiscourseAiBotConversations extends Controller {
   @action
   handleKeyDown(event) {
     if (event.key === "Enter" && !event.shiftKey) {
-      this.aiBotConversationsHiddenSubmit.submitToBot();
+      this.prepareAndSubmitToBot();
     }
   }
 
   @action
   setTextArea(element) {
     this.textarea = element;
+    if (this.textarea) {
+      this.textarea.addEventListener("paste", this._handlePaste);
+    }
+  }
+
+  @action
+  registerFileInput(element) {
+    if (element) {
+      this.fileInputEl = element;
+      if (this.uppyUpload) {
+        this.uppyUpload.setup(element);
+      }
+    }
+  }
+
+  @action
+  openFileUpload() {
+    if (this.fileInputEl) {
+      this.fileInputEl.click();
+    }
+  }
+
+  @action
+  removeUpload(upload) {
+    this.uploads.removeObject(upload);
+  }
+
+  @action
+  cancelUpload(upload) {
+    this.uppyUpload.cancelSingleUpload({
+      fileId: upload.id,
+    });
+  }
+
+  @action
+  prepareAndSubmitToBot() {
+    // Pass uploads to the service before submitting
+    this.aiBotConversationsHiddenSubmit.uploads = this.uploads;
+    this.aiBotConversationsHiddenSubmit.submitToBot();
   }
 
   _autoExpandTextarea() {

assets/javascripts/discourse/services/ai-bot-conversations-hidden-submit.js

@@ -17,6 +17,7 @@ export default class AiBotConversationsHiddenSubmit extends Service {
 
   personaId;
   targetUsername;
+  uploads = [];
 
   inputValue = "";
 
@@ -25,7 +26,7 @@ export default class AiBotConversationsHiddenSubmit extends Service {
     this.composer.destroyDraft();
     this.composer.close();
     next(() => {
-      document.getElementById("custom-homepage-input").focus();
+      document.getElementById("ai-bot-conversations-input").focus();
     });
   }
 
@@ -41,26 +42,60 @@ export default class AiBotConversationsHiddenSubmit extends Service {
       });
     }
 
+    // Don't submit if there are still uploads in progress
+    if (document.querySelector(".ai-bot-upload--in-progress")) {
+      return this.dialog.alert({
+        message: i18n("discourse_ai.ai_bot.conversations.uploads_in_progress"),
+      });
+    }
+
     this.loading = true;
     const title = i18n("discourse_ai.ai_bot.default_pm_prefix");
 
+    // Prepare the raw content with any uploads appended
+    let rawContent = this.inputValue;
+
+    // Append upload markdown if we have uploads
+    if (this.uploads && this.uploads.length > 0) {
+      rawContent += "\n\n";
+
+      this.uploads.forEach((upload) => {
+        const isImage = /jpeg|jpg|png|webp/.test(upload.extension);
+        const displayName = upload.original_filename || upload.filename;
+        const uploadMarkdown = isImage
+          ? `![${displayName}|${upload.width}x${upload.height}](${
+              upload.short_url || upload.url
+            })`
+          : `[${displayName}|${upload.filesize || "unknown"}](${
+              upload.short_url || upload.url
+            })`;
+
+        rawContent += uploadMarkdown + "\n";
+      });
+    }
+
     try {
       const response = await ajax("/posts.json", {
         method: "POST",
         data: {
-          raw: this.inputValue,
+          raw: rawContent,
           title,
           archetype: "private_message",
           target_recipients: this.targetUsername,
           meta_data: { ai_persona_id: this.personaId },
         },
       });
 
+      // Reset uploads after successful submission
+      this.uploads = [];
+      this.inputValue = "";
+
       this.appEvents.trigger("discourse-ai:bot-pm-created", {
         id: response.topic_id,
         slug: response.topic_slug,
         title,
       });
+
       this.router.transitionTo(response.post_url);
     } catch (e) {
       popupAjaxError(e);

assets/javascripts/discourse/templates/discourse-ai-bot-conversations.gjs

@@ -1,4 +1,4 @@
-import { hash } from "@ember/helper";
+import { fn, hash } from "@ember/helper";
 import { on } from "@ember/modifier";
 import didInsert from "@ember/render-modifiers/modifiers/did-insert";
 import RouteTemplate from "ember-route-template";
@@ -22,9 +22,37 @@ export default RouteTemplate(
           @name="ai-bot-conversations-above-input"
           @outletArgs={{hash
             updateInput=@controller.updateInputValue
-            submit=@controller.aiBotConversationsHiddenSubmit.submitToBot
+            submit=@controller.prepareAndSubmitToBot
           }}
         />
+
+        {{#if @controller.showUploadsContainer}}
+          <div class="ai-bot-conversations__uploads-container">
+            {{#each @controller.uploads as |upload|}}
+              <div class="ai-bot-upload">
+                <span class="ai-bot-upload__filename">{{upload.original_filename}}</span>
+                <DButton
+                  @icon="xmark"
+                  @action={{fn @controller.removeUpload upload}}
+                  class="btn-flat ai-bot-upload__remove"
+                />
+              </div>
+            {{/each}}
+
+            {{#each @controller.inProgressUploads as |upload|}}
+              <div class="ai-bot-upload ai-bot-upload--in-progress">
+                <span class="ai-bot-upload__filename">{{upload.fileName}}</span>
+                <span class="ai-bot-upload__progress">{{upload.progress}}%</span>
+                <DButton
+                  @icon="xmark"
+                  @action={{fn @controller.cancelUpload upload}}
+                  class="btn-flat ai-bot-upload__remove"
+                />
+              </div>
+            {{/each}}
+          </div>
+        {{/if}}
+
         <div class="ai-bot-conversations__input-wrapper">
           <textarea
             {{didInsert @controller.setTextArea}}
@@ -36,14 +64,32 @@ export default RouteTemplate(
             disabled={{@controller.loading}}
             rows="1"
           />
-          <DButton
-            @action={{@controller.aiBotConversationsHiddenSubmit.submitToBot}}
-            @icon="paper-plane"
-            @isLoading={{@controller.loading}}
-            @title="discourse_ai.ai_bot.conversations.header"
-            class="ai-bot-button btn-primary ai-conversation-submit"
-          />
+          <div class="ai-bot-conversations__buttons">
+            <DButton
+              @icon="upload"
+              @action={{@controller.openFileUpload}}
+              @title="discourse_ai.ai_bot.conversations.upload_files"
+              class="btn no-text ai-bot-upload-btn"
+            />
+            <DButton
+              @action={{@controller.prepareAndSubmitToBot}}
+              @icon="paper-plane"
+              @isLoading={{@controller.loading}}
+              @title="discourse_ai.ai_bot.conversations.header"
+              class="ai-bot-button btn-primary ai-conversation-submit"
+            />
+          </div>
         </div>
+
+        {{! Hidden file input element }}
+        <input
+          type="file"
+          id="ai-bot-file-uploader"
+          class="hidden-upload-field"
+          multiple="multiple"
+          {{didInsert @controller.registerFileInput}}
+        />
+
         <p class="ai-disclaimer">
           {{i18n "discourse_ai.ai_bot.conversations.disclaimer"}}
         </p>