From 493d65af1f72be73bd55411aa988b7d2b3be92f2 Mon Sep 17 00:00:00 2001
From: Keegan George <kgeorge13@gmail.com>
Date: Mon, 16 Sep 2024 14:00:41 -0700
Subject: [PATCH] FIX: Diff modal closing along with composer menu on mobile
 (#803)

The `DiffModal` is triggered after selecting an option in the composer helper menu. After selecting an option, we should close the composer helper menu and only show the diff modal. On mobile, there was an edge-case where `this.args.close()` for was causing the closing of both the `DiffModal` and the `AiComposerHelperMenu`. This PR resolves that by ensuring the menu is closed _first_ asynchronously, followed by opening the relevant modal.
---
 .../components/ai-composer-helper-menu.gjs        | 10 +++++-----
 spec/system/ai_helper/ai_composer_helper_spec.rb  | 15 +++++++++++++++
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/assets/javascripts/discourse/components/ai-composer-helper-menu.gjs b/assets/javascripts/discourse/components/ai-composer-helper-menu.gjs
index fa1b6761..7f4c2c88 100644
--- a/assets/javascripts/discourse/components/ai-composer-helper-menu.gjs
+++ b/assets/javascripts/discourse/components/ai-composer-helper-menu.gjs
@@ -109,19 +109,20 @@ export default class AiComposerHelperMenu extends Component {
   }
 
   @action
-  suggestChanges(option) {
+  async suggestChanges(option) {
+    await this.args.close();
+
     if (option.name === "illustrate_post") {
-      this.modal.show(ThumbnailSuggestion, {
+      return this.modal.show(ThumbnailSuggestion, {
         model: {
           mode: option.id,
           selectedText: this.args.data.selectedText,
           thumbnails: this.thumbnailSuggestions,
         },
       });
-      return this.args.close();
     }
 
-    this.modal.show(ModalDiffModal, {
+    return this.modal.show(ModalDiffModal, {
       model: {
         mode: option.id,
         selectedText: this.args.data.selectedText,
@@ -130,7 +131,6 @@ export default class AiComposerHelperMenu extends Component {
         customPromptValue: this.customPromptValue,
       },
     });
-    return this.args.close();
   }
 
   @action
diff --git a/spec/system/ai_helper/ai_composer_helper_spec.rb b/spec/system/ai_helper/ai_composer_helper_spec.rb
index b6b73bd9..5f76386d 100644
--- a/spec/system/ai_helper/ai_composer_helper_spec.rb
+++ b/spec/system/ai_helper/ai_composer_helper_spec.rb
@@ -342,4 +342,19 @@ RSpec.describe "AI Composer helper", type: :system, js: true do
       expect(page).to have_no_css(".d-editor-button-bar button.ai-helper-trigger")
     end
   end
+
+  context "when triggering composer AI helper", mobile: true do
+    it "should close the composer helper before showing the diff modal" do
+      visit("/latest")
+      page.find("#create-topic").click
+      composer.fill_content(input)
+      composer.click_toolbar_button("ai-helper-trigger")
+
+      DiscourseAi::Completions::Llm.with_prepared_responses([input]) do
+        ai_helper_menu.select_helper_model(CompletionPrompt::TRANSLATE)
+        expect(ai_helper_menu).to have_no_context_menu
+        expect(diff_modal).to be_visible
+      end
+    end
+  end
 end