Add copy function, and use output for prompts too

Kiln-AI · Oct 25, 2024 · dd13d3a · dd13d3a
1 parent cb06512
commit dd13d3a
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 3 deletions.
diff --git a/app/web_ui/src/routes/(app)/prompts/[project_id]/[task_id]/+page.svelte b/app/web_ui/src/routes/(app)/prompts/[project_id]/[task_id]/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Output from "../../../run/output.svelte"
   import AppPage from "../../../app_page.svelte"
   import { client } from "$lib/api_client"
   import { current_task } from "$lib/stores"
@@ -142,8 +143,7 @@
                 ></span
               >.
             </p>
-            <pre
-              class="bg-base-200 p-4 rounded-lg whitespace-pre-wrap break-words">{prompt}</pre>
+            <Output raw_output={prompt} />
           </div>
         {:else}
           <div class="text-error">

diff --git a/app/web_ui/src/routes/(app)/run/output.svelte b/app/web_ui/src/routes/(app)/run/output.svelte
@@ -19,6 +19,10 @@
       formatted_json_html = null
     }
   }
+
+  function copy_to_clipboard() {
+    navigator.clipboard.writeText(raw_output)
+  }
 </script>
 
 <head>
@@ -27,9 +31,26 @@
 
 <!-- eslint-disable svelte/no-at-html-tags -->
 <pre
-  class="bg-base-200 p-4 rounded-lg whitespace-pre-wrap break-words {raw_output.length >
+  class="relative bg-base-200 p-4 pr-12 rounded-lg whitespace-pre-wrap break-words {raw_output.length >
   400
     ? 'text-xs'
     : ''}">{#if formatted_json_html}{@html formatted_json_html}{:else}{raw_output}{/if}
+  <button
+    on:click={copy_to_clipboard}
+    class="absolute right-2 top-2 btn btn-sm btn-square h-10 w-10 shadow-none text-gray-500 hover:text-gray-900">
+    <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+    <svg
+      class="w-6 h-6 p-0"
+      viewBox="0 0 64 64"
+      xmlns="http://www.w3.org/2000/svg"
+      stroke-width="3"
+      stroke="currentColor"
+      fill="none">
+      <rect x="11.13" y="17.72" width="33.92" height="36.85" rx="2.5" />
+      <path
+        d="M19.35,14.23V13.09a3.51,3.51,0,0,1,3.33-3.66H49.54a3.51,3.51,0,0,1,3.33,3.66V42.62a3.51,3.51,0,0,1-3.33,3.66H48.39"
+      />
+    </svg>
+  </button>
 </pre>
 <!-- eslint-enable svelte/no-at-html-tags -->