FEATURE: allow passing in data attributes to an artifact

SamSaffron · SamSaffron · commit a1754f37db91 · 2025-05-18T11:50:59.000+10:00
Also allow artifact access to current username

Usage inside artifact is:

1. await window.discourseArtifactReady;
2. access data via window.discourseArtifactData;
diff --git a/app/controllers/discourse_ai/ai_bot/artifacts_controller.rb b/app/controllers/discourse_ai/ai_bot/artifacts_controller.rb
@@ -42,6 +42,21 @@ def show
               <style>
                 #{artifact.css}
               </style>
+              <script>
+                window._discourse_user_data = {
+                  #{current_user ? "username: #{current_user.username.to_json}" : "username: null"}
+                };
+                window.discourseArtifactReady = new Promise(resolve => {
+                  window._resolveArtifactData = resolve;
+                });
+                window.addEventListener('message', function(event) {
+                  if (event.data && event.data.type === 'discourse-artifact-data') {
+                    window.discourseArtifactData = event.data.dataset || {};
+                    Object.assign(window.discourseArtifactData, window._discourse_user_data);
+                    window._resolveArtifactData(window.discourseArtifactData);
+                  }
+                });
+              </script>
             </head>
             <body>
               #{artifact.html}
@@ -74,6 +89,19 @@ def show
             </head>
             <body>
               <iframe sandbox="allow-scripts allow-forms" height="100%" width="100%" srcdoc="#{ERB::Util.html_escape(untrusted_html)}" frameborder="0"></iframe>
+              <script>
+                document.querySelector('iframe').addEventListener('load', function() {
+                  try {
+                    const iframeWindow = this.contentWindow;
+                    const message = { type: 'discourse-artifact-data', dataset: {} };
+
+                    if (window.frameElement && window.frameElement.dataset) {
+                      Object.assign(message.dataset, window.frameElement.dataset);
+                    }
+                    iframeWindow.postMessage(message, '*');
+                  } catch (e) { console.error('Error passing data to artifact:', e); }
+                });
+              </script>
             </body>
           </html>
         HTML
diff --git a/assets/javascripts/discourse/components/ai-artifact.gjs b/assets/javascripts/discourse/components/ai-artifact.gjs
@@ -1,6 +1,7 @@
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 import { action } from "@ember/object";
+import didInsert from "@ember/render-modifiers/modifiers/did-insert";
 import { service } from "@ember/service";
 import DButton from "discourse/components/d-button";
 import htmlClass from "discourse/helpers/html-class";
@@ -88,6 +89,15 @@ export default class AiArtifactComponent extends Component {
     }`;
   }
 
+  @action
+  setDataAttributes(element) {
+    if (this.args.dataAttributes) {
+      Object.entries(this.args.dataAttributes).forEach(([key, value]) => {
+        element.setAttribute(key, value);
+      });
+    }
+  }
+
   <template>
     {{#if this.expanded}}
       {{htmlClass "ai-artifact-expanded"}}
@@ -118,6 +128,7 @@ export default class AiArtifactComponent extends Component {
           src={{this.artifactUrl}}
           width="100%"
           frameborder="0"
+          {{didInsert this.setDataAttributes}}
         ></iframe>
       {{/if}}
       {{#unless this.requireClickToRun}}
diff --git a/assets/javascripts/initializers/ai-artifacts.gjs b/assets/javascripts/initializers/ai-artifacts.gjs
@@ -18,12 +18,24 @@ function initializeAiArtifacts(api) {
             "data-ai-artifact-version"
           );
 
+          const dataAttributes = {};
+          for (const attr of artifactElement.attributes) {
+            if (
+              attr.name.startsWith("data-") &&
+              attr.name !== "data-ai-artifact-id" &&
+              attr.name !== "data-ai-artifact-version"
+            ) {
+              dataAttributes[attr.name] = attr.value;
+            }
+          }
+
           helper.renderGlimmer(
             artifactElement,
             <template>
               <AiArtifact
                 @artifactId={{artifactId}}
                 @artifactVersion={{artifactVersion}}
+                @dataAttributes={{dataAttributes}}
               />
             </template>
           );
