FEATURE: add support for uploads when starting a convo (#1301)

This commit introduces file upload capabilities to the AI Bot conversations interface and improves the overall dedicated UX experience. It also changes the experimental setting to a more permanent one.

## Key changes:

- **File upload support**:
  - Integrates UppyUpload for handling file uploads in conversations
  - Adds UI for uploading, displaying, and managing attachments
  - Supports drag & drop, clipboard paste, and manual file selection
  - Shows upload progress indicators for in-progress uploads
  - Appends uploaded file markdown to message content

- **Renamed setting**:
  - Changed `ai_enable_experimental_bot_ux` to `ai_bot_enable_dedicated_ux`
  - Updated setting description to be clearer
  - Changed default value to `true` as this is now a stable feature
  - Added migration to handle the setting name change in database

- **UI improvements**:
  - Enhanced input area with better focus states
  - Improved layout and styling for conversations page
  - Added visual feedback for upload states
  - Better error handling for uploads in progress

- **Code organization**:
  - Refactored message submission logic to handle attachments
  - Updated DOM element IDs for consistency
  - Fixed focus management after submission

- **Added tests**:
  - Tests for file upload functionality
  - Tests for removing uploads before submission
  - Updated existing tests to work with the renamed setting


---------

Co-authored-by: awesomerobot <[email protected]>

Author: SamSaffron

assets/javascripts/discourse/components/ai-bot-header-icon.gjs

@@ -39,7 +39,7 @@ export default class AiBotHeaderIcon extends Component {
   get clickShouldRouteOutOfConversations() {
     return (
       !this.navigationMenu.isHeaderDropdownMode &&
-      this.siteSettings.ai_enable_experimental_bot_ux &&
+      this.siteSettings.ai_bot_enable_dedicated_ux &&
       this.sidebarState.currentPanel?.key === AI_CONVERSATIONS_PANEL
     );
   }
@@ -50,7 +50,7 @@ export default class AiBotHeaderIcon extends Component {
       return this.router.transitionTo(`discovery.${defaultHomepage()}`);
     }
 
-    if (this.siteSettings.ai_enable_experimental_bot_ux) {
+    if (this.siteSettings.ai_bot_enable_dedicated_ux) {
       return this.router.transitionTo("discourse-ai-bot-conversations");
     }
 

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,7 +132,7 @@ export default class DiscourseAiBotConversations extends Controller {
   @action
   handleKeyDown(event) {
     if (event.key === "Enter" && !event.shiftKey) {
-      this.aiBotConversationsHiddenSubmit.submitToBot();
+      this.prepareAndSubmitToBot();
     }
   }
 
@@ -45,6 +141,42 @@ export default class DiscourseAiBotConversations extends Controller {
     this.textarea = element;
   }
 
+  @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() {
     this.textarea.style.height = "auto";
     this.textarea.style.height = this.textarea.scrollHeight + "px";

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

@@ -4,6 +4,7 @@ import Service, { service } from "@ember/service";
 import { tracked } from "@ember-compat/tracked-built-ins";
 import { ajax } from "discourse/lib/ajax";
 import { popupAjaxError } from "discourse/lib/ajax-error";
+import { getUploadMarkdown } from "discourse/lib/uploads";
 import { i18n } from "discourse-i18n";
 
 export default class AiBotConversationsHiddenSubmit extends Service {
@@ -17,6 +18,7 @@ export default class AiBotConversationsHiddenSubmit extends Service {
 
   personaId;
   targetUsername;
+  uploads = [];
 
   inputValue = "";
 
@@ -25,7 +27,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 +43,51 @@ 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 uploadMarkdown = getUploadMarkdown(upload);
+        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";
@@ -17,15 +17,24 @@ export default RouteTemplate(
       />
 
       <div class="ai-bot-conversations__content-wrapper">
-        <h1>{{i18n "discourse_ai.ai_bot.conversations.header"}}</h1>
+        <div class="ai-bot-conversations__title">
+          {{i18n "discourse_ai.ai_bot.conversations.header"}}
+        </div>
         <PluginOutlet
           @name="ai-bot-conversations-above-input"
           @outletArgs={{hash
             updateInput=@controller.updateInputValue
-            submit=@controller.aiBotConversationsHiddenSubmit.submitToBot
+            submit=@controller.prepareAndSubmitToBot
           }}
         />
+
         <div class="ai-bot-conversations__input-wrapper">
+          <DButton
+            @icon="upload"
+            @action={{@controller.openFileUpload}}
+            @title="discourse_ai.ai_bot.conversations.upload_files"
+            class="btn btn-transparent ai-bot-upload-btn"
+          />
           <textarea
             {{didInsert @controller.setTextArea}}
             {{on "input" @controller.updateInputValue}}
@@ -38,13 +47,54 @@ export default RouteTemplate(
             rows="1"
           />
           <DButton
-            @action={{@controller.aiBotConversationsHiddenSubmit.submitToBot}}
+            @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"
           />
+          <input
+            type="file"
+            id="ai-bot-file-uploader"
+            class="hidden-upload-field"
+            multiple="multiple"
+            {{didInsert @controller.registerFileInput}}
+          />
+
+          {{#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-transparent 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>
+
         <p class="ai-disclaimer">
           {{i18n "discourse_ai.ai_bot.conversations.disclaimer"}}
         </p>

assets/javascripts/initializers/ai-conversations-sidebar.js

@@ -16,7 +16,7 @@ export default {
   initialize() {
     withPluginApi((api) => {
       const siteSettings = api.container.lookup("service:site-settings");
-      if (!siteSettings.ai_enable_experimental_bot_ux) {
+      if (!siteSettings.ai_bot_enable_dedicated_ux) {
         return;
       }