Merge pull request #1190 from Kiln-AI/sfierro/prompts-clone

Clone prompt button

Author: sfierro

app/web_ui/src/lib/types.ts

@@ -36,6 +36,7 @@ export type DockerModelRunnerConnection =
   components["schemas"]["DockerModelRunnerConnection"]
 export type RunSummary = components["schemas"]["RunSummary"]
 export type PromptResponse = components["schemas"]["PromptResponse"]
+export type ApiPrompt = components["schemas"]["ApiPrompt"]
 export type ChatStrategy = components["schemas"]["ChatStrategy"]
 export type EvalOutputScore = components["schemas"]["EvalOutputScore"]
 export type EvalTemplateId = components["schemas"]["EvalTemplateId"]

app/web_ui/src/routes/(app)/prompts/[project_id]/[task_id]/+page.svelte

@@ -11,7 +11,7 @@
     prompts_by_task_composite_id,
   } from "$lib/stores/prompts_store"
   import { onMount } from "svelte"
-  import type { Task } from "$lib/types"
+  import type { Task, ApiPrompt } from "$lib/types"
   import { createKilnError, KilnError } from "$lib/utils/error_handlers"
   import { getPromptType } from "./prompt_generators/prompt_generators"
   import InfoTooltip from "$lib/ui/info_tooltip.svelte"
@@ -88,6 +88,12 @@
     goto(`/prompts/${project_id}/${task_id}/edit_base_prompt`)
   }
 
+  function handleClonePrompt(prompt: ApiPrompt) {
+    goto(
+      `/prompts/${project_id}/${task_id}/clone/${encodeURIComponent(prompt.id)}`,
+    )
+  }
+
   type TableColumn = {
     key: string
     label: string
@@ -303,6 +309,13 @@
                                   Set as Base Prompt
                                 </button>
                               </li>
+                              <li>
+                                <button
+                                  on:click={() => handleClonePrompt(prompt)}
+                                >
+                                  Clone
+                                </button>
+                              </li>
                             </ul>
                           </Float>
                         </div>

app/web_ui/src/routes/(app)/prompts/[project_id]/[task_id]/clone/[prompt_id]/+page.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+  import AppPage from "../../../../../app_page.svelte"
+  import { page } from "$app/stores"
+  import { KilnError, createKilnError } from "$lib/utils/error_handlers"
+  import {
+    load_task_prompts,
+    prompts_by_task_composite_id,
+  } from "$lib/stores/prompts_store"
+  import { get_task_composite_id } from "$lib/stores"
+  import { onMount } from "svelte"
+  import PromptForm from "../../prompt_form.svelte"
+
+  $: project_id = $page.params.project_id!
+  $: task_id = $page.params.task_id!
+  $: prompt_id = $page.params.prompt_id!
+
+  let initial_prompt_name = ""
+  let initial_prompt = ""
+  let initial_chain_of_thought_instructions: string | null = null
+  let loading = true
+  let loading_error: KilnError | null = null
+
+  onMount(async () => {
+    try {
+      await load_task_prompts(project_id, task_id)
+      const task_prompts =
+        $prompts_by_task_composite_id[
+          get_task_composite_id(project_id, task_id)
+        ]
+      const source_prompt = task_prompts?.prompts.find(
+        (p) => p.id === prompt_id,
+      )
+
+      if (!source_prompt) {
+        throw new KilnError("Source prompt not found.")
+      }
+
+      initial_prompt_name = `Copy of ${source_prompt.name}`
+      initial_prompt = source_prompt.prompt
+      initial_chain_of_thought_instructions =
+        source_prompt.chain_of_thought_instructions || null
+    } catch (e) {
+      loading_error = createKilnError(e)
+    } finally {
+      loading = false
+    }
+  })
+</script>
+
+<div class="max-w-[1400px]">
+  <AppPage
+    title="Clone Prompt"
+    sub_subtitle="Read the Docs"
+    sub_subtitle_link="https://docs.kiln.tech/docs/prompts"
+    breadcrumbs={[
+      {
+        label: "Optimize",
+        href: `/optimize/${project_id}/${task_id}`,
+      },
+      {
+        label: "Prompts",
+        href: `/prompts/${project_id}/${task_id}`,
+      },
+    ]}
+  >
+    {#if loading}
+      <div class="w-full min-h-[50vh] flex justify-center items-center">
+        <div class="loading loading-spinner loading-lg"></div>
+      </div>
+    {:else if loading_error}
+      <div class="text-error text-sm">
+        {loading_error.getMessage() || "An unknown error occurred"}
+      </div>
+    {:else}
+      <PromptForm
+        {project_id}
+        {task_id}
+        clone_mode={true}
+        {initial_prompt_name}
+        {initial_prompt}
+        {initial_chain_of_thought_instructions}
+      />
+    {/if}
+  </AppPage>
+</div>

app/web_ui/src/routes/(app)/prompts/[project_id]/[task_id]/clone/[prompt_id]/+page.ts

@@ -0,0 +1 @@
+export const prerender = false

app/web_ui/src/routes/(app)/prompts/[project_id]/[task_id]/create/+page.svelte

@@ -1,44 +1,31 @@
 <script lang="ts">
   import AppPage from "../../../../app_page.svelte"
-  import { current_task, load_available_prompts } from "$lib/stores"
+  import { current_task } from "$lib/stores"
   import { page } from "$app/stores"
-  import FormContainer from "$lib/utils/form_container.svelte"
-  import FormElement from "$lib/utils/form_element.svelte"
   import { client } from "$lib/api_client"
   import { createKilnError, KilnError } from "$lib/utils/error_handlers"
-  import { goto } from "$app/navigation"
-  import posthog from "posthog-js"
   import { onMount } from "svelte"
   import { prompt_generator_categories } from "../prompt_generators/prompt_generators"
   import { generate_memorable_name } from "$lib/utils/name_generator"
+  import PromptForm from "../prompt_form.svelte"
 
   $: project_id = $page.params.project_id!
   $: task_id = $page.params.task_id!
 
   let generator_name = ""
-  let prompt_name = generate_memorable_name()
-  let prompt = ""
-  let is_chain_of_thought = false
-  let chain_of_thought_instructions =
-    "Think step by step, explaining your reasoning."
-  let create_error: KilnError | null = null
-  let create_loading = false
-  let warn_before_unload = false
+  let initial_prompt_name = generate_memorable_name()
+  let initial_prompt = ""
+  let loading_error: KilnError | null = null
 
   let generator_id: string | null = null
-  let loading_generator = false
+  let loading = true
   let is_custom = true
 
-  let initial_prompt_name = ""
-  let initial_prompt = ""
-  let initial_loaded = false
-
   onMount(async () => {
     generator_id = $page.url.searchParams.get("generator_id") || null
     is_custom = !generator_id
 
     if (generator_id) {
-      loading_generator = true
       try {
         const { data: prompt_response, error: get_error } = await client.GET(
           "/api/projects/{project_id}/tasks/{task_id}/gen_prompt/{prompt_id}",
@@ -55,95 +42,31 @@
         if (get_error) {
           throw get_error
         }
-        prompt = prompt_response.prompt
+        initial_prompt = prompt_response.prompt
 
         const template = prompt_generator_categories
           .flatMap((c) => c.templates)
           .find((t) => t.generator_id === generator_id)
         generator_name = template?.name || generator_id
       } catch (e) {
-        create_error = createKilnError(e)
-      } finally {
-        loading_generator = false
+        loading_error = createKilnError(e)
       }
     } else {
       generator_name = "Custom"
 
       if ($current_task?.instruction) {
-        prompt = $current_task.instruction
+        initial_prompt = $current_task.instruction
       }
     }
 
-    initial_prompt_name = prompt_name
-    initial_prompt = prompt
-    initial_loaded = true
+    loading = false
   })
-
-  async function create_prompt() {
-    try {
-      create_loading = true
-      create_error = null
-      const { data, error } = await client.POST(
-        "/api/projects/{project_id}/tasks/{task_id}/prompts",
-        {
-          params: {
-            path: {
-              project_id,
-              task_id,
-            },
-          },
-          body: {
-            generator_id: generator_id,
-            name: prompt_name,
-            prompt: prompt,
-            chain_of_thought_instructions:
-              is_custom && is_chain_of_thought
-                ? chain_of_thought_instructions
-                : null,
-          },
-        },
-      )
-      if (error) {
-        throw error
-      }
-      if (!data || !data.id) {
-        throw new Error("Invalid response from server")
-      }
-      posthog.capture("create_prompt", {
-        is_chain_of_thought: is_chain_of_thought,
-        from_generator: generator_id,
-      })
-
-      await load_available_prompts(true)
-
-      warn_before_unload = false
-      const from = $page.url.searchParams.get("from")
-      if (from === "optimize") {
-        goto(
-          `/optimize/${project_id}/${task_id}/run_config/create?prompt_id=${encodeURIComponent(`id::${data.id}`)}`,
-        )
-      } else {
-        goto(`/prompts/${project_id}/${task_id}/saved/id::${data.id}`)
-      }
-    } catch (e) {
-      create_error = createKilnError(e)
-    } finally {
-      create_loading = false
-    }
-  }
-
-  $: if (initial_loaded) {
-    warn_before_unload =
-      prompt !== initial_prompt ||
-      prompt_name !== initial_prompt_name ||
-      (is_custom && is_chain_of_thought)
-  }
 </script>
 
 <div class="max-w-[1400px]">
   <AppPage
     title="Create Prompt"
-    subtitle={`${generator_name}`}
+    subtitle={generator_name}
     sub_subtitle="Read the Docs"
     sub_subtitle_link="https://docs.kiln.tech/docs/prompts"
     breadcrumbs={[
@@ -157,60 +80,24 @@
       },
     ]}
   >
-    {#if loading_generator}
+    {#if loading}
       <div class="w-full min-h-[50vh] flex justify-center items-center">
         <div class="loading loading-spinner loading-lg"></div>
       </div>
-    {:else}
-      <div class="max-w-[800px]">
-        <FormContainer
-          submit_label="Create Prompt"
-          on:submit={create_prompt}
-          bind:error={create_error}
-          bind:submitting={create_loading}
-          {warn_before_unload}
-        >
-          <FormElement
-            label="Prompt Name"
-            id="prompt_name"
-            bind:value={prompt_name}
-            description="A name to identify this prompt."
-            max_length={120}
-          />
-
-          <FormElement
-            label="Prompt"
-            id="prompt"
-            bind:value={prompt}
-            inputType="textarea"
-            height="large"
-            description="A prompt to use for this task."
-            info_description="Model prompt such as 'You are a helpful assistant.'. This prompt is specific to this task. To use this prompt after creation, select it from the prompts dropdown."
-          />
-          {#if is_custom}
-            <FormElement
-              label="Chain of Thought"
-              id="is_chain_of_thought"
-              bind:value={is_chain_of_thought}
-              description="Should this prompt use chain of thought?"
-              inputType="select"
-              select_options={[
-                [false, "Disabled"],
-                [true, "Enabled"],
-              ]}
-            />
-            {#if is_chain_of_thought}
-              <FormElement
-                label="Chain of Thought Instructions"
-                id="chain_of_thought_instructions"
-                bind:value={chain_of_thought_instructions}
-                inputType="textarea"
-                description="Instructions for the model's 'thinking' prior to answering. Required for chain of thought prompting."
-              />
-            {/if}
-          {/if}
-        </FormContainer>
+    {:else if loading_error}
+      <div class="text-error text-sm">
+        {loading_error.getMessage() || "An unknown error occurred"}
       </div>
+    {:else}
+      <PromptForm
+        {project_id}
+        {task_id}
+        {generator_id}
+        show_chain_of_thought={is_custom}
+        {initial_prompt_name}
+        {initial_prompt}
+        redirect_from={$page.url.searchParams.get("from")}
+      />
     {/if}
   </AppPage>
 </div>