UX: improve artifact styling add direct share link (#930)

Also remove uneeded sandboxing give this is all handled by
artifacts directly

app/controllers/discourse_ai/ai_bot/artifacts_controller.rb

@@ -52,6 +52,11 @@ module DiscourseAi
                   padding: 0;
                   width: 100%;
                   height: 100%;
+                  border: 0;
+                  overflow: hidden;
+                }
+                iframe {
+                  overflow: auto;
                 }
               </style>
             </head>

app/models/ai_artifact.rb

@@ -9,7 +9,10 @@ class AiArtifact < ActiveRecord::Base
 
   def self.iframe_for(id)
     <<~HTML
-      <iframe sandbox="allow-scripts allow-forms" height="600px" src='#{url(id)}' frameborder="0" width="100%"></iframe>
+      <div class='ai-artifact'>
+        <iframe src='#{url(id)}' frameborder="0" height="100%" width="100%"></iframe>
+        <a href='#{url(id)}' target='_blank'>#{I18n.t("discourse_ai.ai_artifact.link")}</a>
+      </div>
     HTML
   end
 

assets/javascripts/discourse/components/ai-artifact.gjs

@@ -104,7 +104,6 @@ export default class AiArtifactComponent extends Component {
           src={{this.artifactUrl}}
           width="100%"
           frameborder="0"
-          sandbox="allow-scripts allow-forms"
         ></iframe>
       {{/if}}
       {{#unless this.requireClickToRun}}

config/locales/server.en.yml

@@ -173,6 +173,8 @@ en:
       title: Surprise
 
   discourse_ai:
+    ai_artifact:
+      link: "Show Artifact in new tab"
     unknown_model: "Unknown AI model"
 
     tools:

public/ai-share/share.css

@@ -627,3 +627,8 @@ aside.onebox h3 {
   opacity: 0.85;
   transition: opacity 0.25s ease-in-out;
 }
+
+.ai-artifact iframe {
+  height: 600px;
+  max-height: 600px;
+}