load samples on web (#7142)

* load samples on web

* Update src/hooks/useQueryParamEffects.ts

Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>

---------

Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>

src/hooks/useQueryParamEffects.ts

@@ -14,6 +14,9 @@ import {
 import { isDesktop } from '@src/lib/isDesktop'
 import type { FileLinkParams } from '@src/lib/links'
 import { commandBarActor } from '@src/lib/singletons'
+import { showCodeReplaceToast } from '@src/components/CodeReplaceToast'
+import { findKclSample } from '@src/lib/kclSamples'
+import { webSafePathSplit } from '@src/lib/paths'
 
 // For initializing the command arguments, we actually want `method` to be undefined
 // so that we don't skip it in the command palette.
@@ -63,16 +66,87 @@ export function useQueryParamEffects() {
    * with the pattern: `?cmd=<command-name>&groupId=<group-id>`
    */
   useEffect(() => {
-    if (shouldInvokeGenericCmd) {
-      const commandData = buildGenericCommandArgs(searchParams)
-      if (!commandData) {
-        return
-      }
+    if (!shouldInvokeGenericCmd) return
+
+    const commandData = buildGenericCommandArgs(searchParams)
+    if (!commandData) return
+
+    // Process regular commands
+    if (commandData.name !== 'add-kcl-file-to-project' || isDesktop()) {
       commandBarActor.send({
         type: 'Find and select command',
         data: commandData,
       })
+      cleanupQueryParams()
+      return
+    }
 
+    // From here we're only handling 'add-kcl-file-to-project' on web
+
+    // Get the sample path from command arguments
+    const samplePath = commandData.argDefaultValues?.sample
+    if (!samplePath) {
+      console.error('No sample path found in command arguments')
+      cleanupQueryParams()
+      return
+    }
+
+    // Find the KCL sample details
+    const kclSample = findKclSample(samplePath)
+    if (!kclSample) {
+      console.error('KCL sample not found for path:', samplePath)
+      cleanupQueryParams()
+      return
+
+    } else if (kclSample.files.length > 1) {
+      console.error(
+        'KCL sample has multiple files, only the first one will be used'
+      )
+      cleanupQueryParams()
+      return
+    }
+
+
+    // Get the first part of the path (project directory)
+    const pathParts = webSafePathSplit(samplePath)
+    const projectPathPart = pathParts[0]
+
+    // Get the first file from the sample
+    const firstFile = kclSample.files[0]
+    if (!firstFile) {
+      console.error('No files found in KCL sample')
+      cleanupQueryParams()
+      return
+    }
+
+    // Build the URL to the sample file
+    const sampleCodeUrl = `/kcl-samples/${encodeURIComponent(
+      projectPathPart
+    )}/${encodeURIComponent(firstFile)}`
+
+    // Fetch the sample code and show the toast
+    fetch(sampleCodeUrl)
+      .then((response) => {
+        if (!response.ok) {
+          return Promise.reject(
+            new Error(
+              `Failed to fetch sample: ${response.status} ${response.statusText}`
+            )
+          )
+        }
+        return response.text()
+      })
+      .then((code) => {
+        showCodeReplaceToast(code)
+      })
+      .catch((error) => {
+        console.error('Error loading KCL sample:', error)
+      })
+
+    cleanupQueryParams()
+
+    // Helper function to clean up query parameters
+    function cleanupQueryParams() {
       // Delete all the query parameters that aren't reserved
       searchParams.delete(CMD_NAME_QUERY_PARAM)
       searchParams.delete(CMD_GROUP_QUERY_PARAM)