allow simple copying of embeds

Author: SamSaffron

app/models/ai_artifact.rb

@@ -22,7 +22,10 @@ def self.iframe_for(id, version = nil)
     <<~HTML
       <div class='ai-artifact'>
         <iframe src='#{url(id, version)}' frameborder="0" height="100%" width="100%"></iframe>
-        <a href='#{url(id, version)}' target='_blank'>#{I18n.t("discourse_ai.ai_artifact.link")}</a>
+        <div class='ai-artifact-controls'>
+          <a href='#{url(id, version)}' class='link-artifact' target='_blank'>#{I18n.t("discourse_ai.ai_artifact.link")}</a>
+          <a href class='copy-embed' data-url="#{url(id, version)}">#{I18n.t("discourse_ai.ai_artifact.copy_embed")}</a>
+        </div>
       </div>
     HTML
   end

app/views/discourse_ai/ai_bot/shared_ai_conversations/show.html.erb

@@ -59,6 +59,22 @@
       document.querySelectorAll('pre code').forEach((el) => {
         hljs.highlightElement(el);
       });
+
+      document.querySelectorAll('.ai-artifact-controls .copy-embed').forEach((el) => {
+        el.addEventListener('click', (e) => {
+          e.preventDefault();
+          const url = el.dataset.url;
+          const embedCode = `<iframe src="${url}" width="100%" height="600" frameborder="0"></iframe>`;
+          navigator.clipboard.writeText(embedCode).then(() => {
+            el.textContent = '<%= I18n.t("discourse_ai.ai_artifact.copied") %>';
+            setTimeout(() => {
+              el.textContent = '<%= I18n.t("discourse_ai.ai_artifact.copy_embed") %>';
+            }, 2000);
+          }).catch(err => {
+            console.error('Failed to copy: ', err);
+          });
+        });
+      });
     </script>
   </body>
 </html>

assets/javascripts/discourse/components/modal/share-full-topic-modal.gjs

@@ -1,5 +1,6 @@
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
+import { on } from "@ember/modifier";
 import { action } from "@ember/object";
 import { service } from "@ember/service";
 import { htmlSafe } from "@ember/template";
@@ -88,14 +89,39 @@ export default class ShareModal extends Component {
     });
   }
 
+  @action
+  async maybeCopyEmbed(event) {
+    if (!event.target.classList.contains("copy-embed")) {
+      return true;
+    }
+    event.stopPropagation();
+    event.preventDefault();
+    const iframeEmbed = `<iframe src="${event.target.dataset.url}" width="600px" height="600px" frameborder="0"></iframe>`;
+    const promise = new Promise((resolve) => {
+      resolve(iframeEmbed);
+    });
+
+    await clipboardCopyAsync(() => promise);
+
+    this.toasts.success({
+      duration: 3000,
+      data: {
+        message: i18n("discourse_ai.ai_bot.embed_copied"),
+      },
+    });
+  }
+
   <template>
     <DModal
       class="ai-share-full-topic-modal"
       @title={{i18n "discourse_ai.ai_bot.share_full_topic_modal.title"}}
       @closeModal={{@closeModal}}
     >
       <:body>
-        <div class="ai-share-full-topic-modal__body">
+        <div
+          class="ai-share-full-topic-modal__body"
+          {{on "click" this.maybeCopyEmbed}}
+        >
           {{this.htmlContext}}
         </div>
       </:body>

assets/stylesheets/modules/ai-bot/common/ai-artifact.scss

@@ -134,3 +134,10 @@ html.ai-artifact-expanded {
     z-index: z("fullscreen");
   }
 }
+
+.ai-share-full-topic-modal__body {
+  .ai-artifact-controls {
+    display: flex;
+    justify-content: space-between;
+  }
+}

config/locales/client.en.yml

@@ -689,6 +689,7 @@ en:
         shortcut_title: "Start a PM with an AI bot"
         share: "Copy AI conversation"
         conversation_shared: "Conversation copied"
+        embed_copied: "Embed copied to clipboard"
         debug_ai: "View raw AI request and response"
         sidebar_empty: "Bot conversation history will appear here."
         debug_ai_modal:

config/locales/server.en.yml

@@ -223,10 +223,12 @@ en:
         max_keys_exceeded:
           one: "You can only have %{max} key in the artifact."
           other: "You can only have %{max} keys in the artifact."
-      link: "Show Artifact in new tab"
+      link: "Show in new tab"
+      copy_embed: "Copy embed"
       view_source: "View Source"
       view_changes: "View Changes"
       change_description: "Change Description"
+      copied: "Copied to clipboard"
     unknown_model: "Unknown AI model"
 
     tools:

public/ai-share/share.css

@@ -632,3 +632,9 @@ aside.onebox h3 {
   height: 600px;
   max-height: 600px;
 }
+
+.ai-artifact-controls {
+  display: flex;
+  justify-content: space-between;
+}
+