UX: Add copy button to generated suggestion (#296)

assets/javascripts/discourse/connectors/post-text-buttons/ai-helper-options-menu.gjs

@@ -7,6 +7,8 @@ import { popupAjaxError } from "discourse/lib/ajax-error";
 import I18n from "I18n";
 import eq from "truth-helpers/helpers/eq";
 import { showPostAIHelper } from "../../lib/show-ai-helper";
+import not from "truth-helpers/helpers/not";
+
 
 const i18n = I18n.t.bind(I18n);
 
@@ -20,6 +22,9 @@ export default class AIHelperOptionsMenu extends Component {
   @tracked suggestion = "";
   @tracked showMainButtons = true;
 
+  @tracked copyButtonIcon = "copy";
+  @tracked copyButtonLabel = "discourse_ai.ai_helper.post_options_menu.copy";
+
   MENU_STATES = {
     triggers: "TRIGGERS",
     options: "OPTIONS",
@@ -90,6 +95,20 @@ export default class AIHelperOptionsMenu extends Component {
     }
   }
 
+  @action
+  copySuggestion() {
+    if (this.suggestion?.length > 0) {
+      navigator.clipboard.writeText(this.suggestion).then(() => {
+        this.copyButtonIcon = "check";
+        this.copyButtonLabel = "discourse_ai.ai_helper.post_options_menu.copied"
+        setTimeout(() => {
+          this.copyButtonIcon = "copy";
+          this.copyButtonLabel = "discourse_ai.ai_helper.post_options_menu.copy"
+        }, 3500);
+      });
+    }
+  }
+
   async loadPrompts() {
     let prompts = await ajax("/discourse-ai/ai-helper/prompts");
 
@@ -146,7 +165,18 @@ export default class AIHelperOptionsMenu extends Component {
           />
         </div>
       {{else if (eq this.menuState this.MENU_STATES.result)}}
-        <div class="ai-post-helper__suggestion">{{this.suggestion}}</div>
+        <div class="ai-post-helper__suggestion">
+          <div class="ai-post-helper__suggestion__text">
+            {{this.suggestion}}
+          </div>
+          <DButton
+            @class="btn-flat ai-post-helper__suggestion__copy"
+            @icon={{this.copyButtonIcon}}
+            @label={{this.copyButtonLabel}}
+            @action={{this.copySuggestion}}
+            @disabled={{not this.suggestion}}
+          />
+        </div>
       {{/if}}
     </div>
   </template>

assets/stylesheets/modules/ai-helper/common/ai-helper.scss

@@ -326,6 +326,20 @@
   }
 
   &__suggestion {
-    padding: 1rem;
+    padding: 0.5rem;
+    display: flex;
+    flex-direction: column;
+
+    &__copy {
+      margin-top: 0.5rem;
+
+      .d-icon-check {
+        color: var(--success);
+      }
+    }
+
+    &__text {
+      padding: 0.5rem;
+    }
   }
 }

config/locales/client.en.yml

@@ -70,6 +70,8 @@ en:
           trigger: "Ask AI"
           loading: "AI is generating"
           close: "Close"
+          copy: "Copy"
+          copied: "Copied!"
       reviewables:
         model_used: "Model used:"
         accuracy: "Accuracy:"