DEV: improve artifact presentation (#932)

1. Keep source in a "details" block after rendered so it does not overwhelm users 2. Ensure artifacts are never indexed by robots 3. Cache break our CSS that changed recently
2024-11-20 18:53:19 +11:00 · 2024-11-20 18:53:19 +11:00 · 52c644798d
parent 2652716398
commit 52c644798d
6 changed files with 48 additions and 5 deletions
--- a/app/controllers/discourse_ai/ai_bot/artifacts_controller.rb
+++ b/app/controllers/discourse_ai/ai_bot/artifacts_controller.rb
@ -68,6 +68,7 @@ module DiscourseAi

        response.headers.delete("X-Frame-Options")
        response.headers["Content-Security-Policy"] = "script-src 'unsafe-inline';"
+        response.headers["X-Robots-Tag"] = "noindex"

        # Render the content
        render html: trusted_html.html_safe, layout: false, content_type: "text/html"
--- a/app/views/discourse_ai/ai_bot/shared_ai_conversations/show.html.erb
+++ b/app/views/discourse_ai/ai_bot/shared_ai_conversations/show.html.erb
@ -10,7 +10,7 @@
    <meta name="twitter:title" content="<%= I18n.t("discourse_ai.share_ai.title", title: @shared_conversation.title, site_name: SiteSetting.title) %>">
    <meta name="twitter:description" content="<%= @shared_conversation.formatted_excerpt %>">
    <meta name="viewport" content="width=device-width">
-    <link rel="stylesheet" href="<%= ::UrlHelper.absolute("/plugins/discourse-ai/ai-share/share.css") %>">
+    <link rel="stylesheet" href="<%= ::UrlHelper.absolute("/plugins/discourse-ai/ai-share/share.css?v=1") %>">
  </head>
  <body>
    <header class="site-header">
--- a/config/locales/server.en.yml
+++ b/config/locales/server.en.yml
@ -175,6 +175,7 @@ en:
  discourse_ai:
    ai_artifact:
      link: "Show Artifact in new tab"
+      view_source: "View Source"
    unknown_model: "Unknown AI model"

    tools:
--- a/lib/ai_bot/tools/create_artifact.rb
+++ b/lib/ai_bot/tools/create_artifact.rb
@ -93,7 +93,7 @@ module DiscourseAi
          js = parameters[:js].to_s

          artifact_div =
-            "<div class=\"ai-artifact\" data-ai-artifact-id=#{artifact.id}></div>" if artifact
+            "<div class=\"ai-artifact\" data-ai-artifact-id=\"#{artifact.id}\"></div>" if artifact

          content = []

@ -103,10 +103,14 @@ module DiscourseAi

          content << [:js, "### JavaScript\n\n```javascript\n#{js}\n```"] if js.present?

-          content << [:preview, "### Preview\n\n#{artifact_div}"] if artifact_div
-
          content.sort_by! { |c| c[0] === @selected_tab ? 1 : 0 } if !artifact

+          if artifact
+            content.unshift([nil, "[details='#{I18n.t("discourse_ai.ai_artifact.view_source")}']"])
+            content << [nil, "[/details]"]
+          end
+
+          content << [:preview, "### Preview\n\n#{artifact_div}"] if artifact_div
          self.custom_raw = content.map { |c| c[1] }.join("\n\n")
        end

--- a/spec/lib/modules/ai_bot/tools/create_artifact_spec.rb
+++ b/spec/lib/modules/ai_bot/tools/create_artifact_spec.rb
@ -4,10 +4,46 @@ RSpec.describe DiscourseAi::AiBot::Tools::CreateArtifact do
  fab!(:llm_model)
  let(:bot_user) { DiscourseAi::AiBot::EntryPoint.find_user_from_model(llm_model.name) }
  let(:llm) { DiscourseAi::Completions::Llm.proxy("custom:#{llm_model.id}") }
+  fab!(:post)

  before { SiteSetting.ai_bot_enabled = true }

  describe "#process" do
+    it "correctly adds details block on final invoke" do
+      tool =
+        described_class.new(
+          { html_body: "hello" },
+          bot_user: Fabricate(:user),
+          llm: llm,
+          context: {
+            post_id: post.id,
+          },
+        )
+
+      tool.parameters = { html_body: "hello" }
+
+      tool.invoke {}
+
+      artifact_id = AiArtifact.order("id desc").limit(1).pluck(:id).first
+
+      expected = <<~MD
+        [details='View Source']
+
+        ### HTML
+
+        ```html
+        hello
+        ```
+
+        [/details]
+
+        ### Preview
+
+        <div class="ai-artifact" data-ai-artifact-id="#{artifact_id}"></div>
+      MD
+      expect(tool.custom_raw.strip).to eq(expected.strip)
+    end
+
    it "can correctly handle partial updates" do
      tool = described_class.new({}, bot_user: bot_user, llm: llm)

--- a/spec/requests/ai_bot/artifacts_controller_spec.rb
+++ b/spec/requests/ai_bot/artifacts_controller_spec.rb
@ -67,11 +67,12 @@ RSpec.describe DiscourseAi::AiBot::ArtifactsController do
      end
    end

-    it "removes security headers" do
+    it "removes security headers and disables crawling" do
      sign_in(user)
      get "/discourse-ai/ai-bot/artifacts/#{artifact.id}"
      expect(response.headers["X-Frame-Options"]).to eq(nil)
      expect(response.headers["Content-Security-Policy"]).to eq("script-src 'unsafe-inline';")
+      expect(response.headers["X-Robots-Tag"]).to eq("noindex")
    end
  end
 end