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

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

Author: SamSaffron

app/controllers/discourse_ai/ai_bot/artifacts_controller.rb

@@ -52,6 +52,11 @@ def show
                   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

@@ -441,7 +441,7 @@ aside .title .avatar {
 }
 
 .lightbox-wrapper .meta .filename,
-.lightbox-wrapper .meta svg, 
+.lightbox-wrapper .meta svg,
 .lightbox-wrapper .meta .informations {
   display: none;
 }
@@ -450,20 +450,20 @@ aside .title .avatar {
   overflow-wrap: anywhere;
 }
 
-/* 
-   custom code highlighting for dark mode support... 
-   overrides highlightjs (https://highlightjs.org/) CSS colors. 
-*/ 
+/*
+   custom code highlighting for dark mode support...
+   overrides highlightjs (https://highlightjs.org/) CSS colors.
+*/
 
 .hljs{
   --hljs-red: #c63c1b;
   --hljs-salmon: #ec8972;
   --hljs-lime: #4dff4d;
   --hljs-green: #090;
   --hljs-sky: #47c2ff;
-  
+
   @media (prefers-color-scheme: dark) {
-    --hljs-red: #af3719; 
+    --hljs-red: #af3719;
     --hljs-salmon: #c7705c;
     --hljs-lime: #3fcf3f;
     --hljs-green: #048504;
@@ -614,16 +614,21 @@ aside.onebox h3 {
   display: block;
   background-size: contain;
   background-repeat: no-repeat;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3C!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath d='M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z'  fill='white' /%3E%3C/svg%3E"); 
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3C!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath d='M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z'  fill='white' /%3E%3C/svg%3E");
   z-index: 2;
   width: 5em;
   height: 6.25em;
   left: 0;
   right: 0;
   top: 32%;
   pointer-events: none;
-  margin-left: auto; 
-  margin-right: auto; 
+  margin-left: auto;
+  margin-right: auto;
   opacity: 0.85;
   transition: opacity 0.25s ease-in-out;
-}
+}
+
+.ai-artifact iframe {
+  height: 600px;
+  max-height: 600px;
+}