feat: clone rag config

app/web_ui/src/lib/utils/formatters.ts

@@ -1,4 +1,5 @@
 import {
+  type ChunkerConfig,
   type ChunkerType,
   type EvalConfigType,
   type OutputFormat,
@@ -164,6 +165,22 @@ export function chunker_type_format(chunker_type: ChunkerType): string {
   }
 }
 
+export function format_chunker_config_overview(config: ChunkerConfig) {
+  const props = config.properties
+  switch (config.chunker_type) {
+    case "fixed_window":
+      return `${chunker_type_format(config.chunker_type)} • Size: ${props.chunk_size || "N/A"} words • Overlap: ${props.chunk_overlap || "N/A"} words`
+    case "semantic":
+      return `${chunker_type_format(config.chunker_type)} • Buffer: ${props.buffer_size || "N/A"} • Threshold: ${props.breakpoint_percentile_threshold || "N/A"}`
+    default: {
+      // type check will catch missing cases
+      const unknownChunkerType: never = config.chunker_type
+      console.error(`Invalid chunker type: ${unknownChunkerType}`)
+      return "unknown"
+    }
+  }
+}
+
 export function capitalize(str: string | undefined | null): string {
   if (!str) {
     return ""

app/web_ui/src/routes/(app)/docs/rag_configs/[project_id]/[rag_config_id]/rag_config/+page.svelte

@@ -29,6 +29,7 @@
   import Warning from "$lib/ui/warning.svelte"
   import posthog from "posthog-js"
   import { uncache_available_tools } from "$lib/stores"
+  import { goto } from "$app/navigation"
 
   $: project_id = $page.params.project_id
   $: rag_config_id = $page.params.rag_config_id
@@ -241,6 +242,14 @@
               },
             },
           ]),
+      {
+        label: "Clone",
+        handler: () => {
+          goto(
+            `/docs/rag_configs/${project_id}/${rag_config_id}/rag_config/clone`,
+          )
+        },
+      },
       {
         label: rag_config?.is_archived ? "Unarchive" : "Archive",
         primary: rag_config?.is_archived,

app/web_ui/src/routes/(app)/docs/rag_configs/[project_id]/[rag_config_id]/rag_config/clone/+page.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+  import { page } from "$app/stores"
+  import AppPage from "../../../../../../app_page.svelte"
+  import { goto } from "$app/navigation"
+  import { client } from "$lib/api_client"
+  import { createKilnError, KilnError } from "$lib/utils/error_handlers"
+  import type { RagConfigWithSubConfigs } from "$lib/types"
+  import { onMount } from "svelte"
+  import EditRagConfigForm from "../../../create_rag_config/edit_rag_config_form.svelte"
+
+  $: project_id = $page.params.project_id
+  $: rag_config_id = $page.params.rag_config_id
+
+  let loading: boolean = true
+  let error: KilnError | null = null
+  let rag_config: RagConfigWithSubConfigs | null = null
+
+  onMount(async () => {
+    await get_rag_config()
+  })
+
+  async function get_rag_config() {
+    try {
+      loading = true
+      const { data: rag_config_data, error: get_rag_config_error } =
+        await client.GET(
+          "/api/projects/{project_id}/rag_configs/{rag_config_id}",
+          {
+            params: {
+              path: {
+                project_id,
+                rag_config_id,
+              },
+            },
+          },
+        )
+
+      if (get_rag_config_error) {
+        throw get_rag_config_error
+      }
+
+      rag_config = rag_config_data
+    } catch (e) {
+      error = createKilnError(e)
+    } finally {
+      loading = false
+    }
+  }
+</script>
+
+<div class="max-w-[900px]">
+  <AppPage
+    title="Clone Search Tool (RAG)"
+    subtitle="This creates a new search tool, based on the configuration of the existing tool."
+    sub_subtitle="Read the Docs"
+    sub_subtitle_link="https://docs.kiln.tech/docs/documents-and-search-rag#building-a-search-tool"
+    breadcrumbs={[
+      {
+        label: "Docs & Search",
+        href: `/docs/${project_id}`,
+      },
+      {
+        label: "Search Tools",
+        href: `/docs/rag_configs/${project_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 error}
+      <div class="w-full min-h-[50vh] flex justify-center items-center">
+        <div class="text-red-500">{error.message}</div>
+      </div>
+    {:else if !rag_config}
+      <div class="w-full min-h-[50vh] flex justify-center items-center">
+        <div class="text-red-500">Search Tool not found</div>
+      </div>
+    {:else}
+      <EditRagConfigForm
+        initial_rag_config={{
+          ...rag_config,
+          name: `Copy of ${rag_config.name}`,
+        }}
+        on:success={() => {
+          goto(`/docs/rag_configs/${project_id}`)
+        }}
+      />
+    {/if}
+  </AppPage>
+</div>

app/web_ui/src/routes/(app)/docs/rag_configs/[project_id]/[rag_config_id]/rag_config/clone/+page.ts

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