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/components/CodeReplaceToast.tsx

@@ -0,0 +1,49 @@
+import toast from 'react-hot-toast'
+import { codeManager, kclManager } from '@src/lib/singletons'
+
+interface CodeReplaceToastProps {
+  code: string
+}
+
+export function CodeReplaceToast({ code }: CodeReplaceToastProps) {
+  return (
+    <div className="bg-chalkboard-10 dark:bg-chalkboard-90 p-4 rounded-md shadow-lg max-w-md">
+      <div className="font-bold mb-2">Replace current code?</div>
+      <div className="mb-3">
+        Do you want to replace your current code with this sample?
+      </div>
+      <div className="flex gap-2">
+        <button
+          className="bg-primary text-white px-3 py-1 rounded"
+          onClick={() => {
+            codeManager.updateCodeEditor(code, true)
+            kclManager.executeCode().catch((err) => {
+              console.error('Error executing code:', err)
+            })
+            toast.dismiss('code-replace-toast')
+          }}
+        >
+          Accept
+        </button>
+        <button
+          className="bg-chalkboard-20 dark:bg-chalkboard-80 px-3 py-1 rounded"
+          onClick={() => toast.dismiss('code-replace-toast')}
+        >
+          Cancel
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export function showCodeReplaceToast(code: string) {
+  // Create a persistent toast that doesn't auto-dismiss
+  return toast.custom(() => <CodeReplaceToast code={code} />, {
+    id: 'code-replace-toast',
+    duration: Infinity, // Won't auto dismiss
+    position: 'top-center',
+    style: {
+      zIndex: 9999, // Ensure it's above other elements
+    },
+  })
+}

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) {
+    if (!shouldInvokeGenericCmd) return
+
     const commandData = buildGenericCommandArgs(searchParams)
-      if (!commandData) {
-        return
-      }
+    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)