@tscircuit/fake-snippets 0.0.1

package/src/components/CodeEditor.tsx

@@ -0,0 +1,460 @@
+import { useSnippetsBaseApiUrl } from "@/hooks/use-snippets-base-api-url"
+import { basicSetup } from "@/lib/codemirror/basic-setup"
+import manualEditsTemplate from "@/lib/templates/manual-edits-template"
+import { autocompletion } from "@codemirror/autocomplete"
+import { indentWithTab } from "@codemirror/commands"
+import { javascript } from "@codemirror/lang-javascript"
+import { json } from "@codemirror/lang-json"
+import { EditorState } from "@codemirror/state"
+import { Decoration, hoverTooltip, keymap } from "@codemirror/view"
+import { getImportsFromCode } from "@tscircuit/prompt-benchmarks/code-runner-utils"
+import type { ATABootstrapConfig } from "@typescript/ata"
+import { setupTypeAcquisition } from "@typescript/ata"
+import { TSCI_PACKAGE_PATTERN } from "../lib/constants"
+import {
+  createDefaultMapFromCDN,
+  createSystem,
+  createVirtualTypeScriptEnvironment,
+} from "@typescript/vfs"
+import {
+  tsAutocomplete,
+  tsFacet,
+  tsHover,
+  tsLinter,
+  tsSync,
+} from "@valtown/codemirror-ts"
+import { EditorView } from "codemirror"
+import { useEffect, useMemo, useRef, useState } from "react"
+import ts from "typescript"
+import CodeEditorHeader from "./CodeEditorHeader"
+import { copilotPlugin, Language } from "@valtown/codemirror-codeium"
+import { useCodeCompletionApi } from "@/hooks/use-code-completion-ai-api"
+const defaultImports = `
+import React from "@types/react/jsx-runtime"
+import { Circuit, createUseComponent } from "@tscircuit/core"
+import type { CommonLayoutProps } from "@tscircuit/props"
+`
+export const CodeEditor = ({
+  onCodeChange,
+  onDtsChange,
+  readOnly = false,
+  initialCode = "",
+  manualEditsFileContent,
+  isStreaming = false,
+  showImportAndFormatButtons = true,
+  onManualEditsFileContentChanged,
+}: {
+  onCodeChange: (code: string, filename?: string) => void
+  onDtsChange?: (dts: string) => void
+  initialCode: string
+  readOnly?: boolean
+  isStreaming?: boolean
+  manualEditsFileContent: string
+  showImportAndFormatButtons?: boolean
+  onManualEditsFileContentChanged?: (newContent: string) => void
+}) => {
+  const editorRef = useRef<HTMLDivElement>(null)
+  const viewRef = useRef<EditorView | null>(null)
+  const ataRef = useRef<ReturnType<typeof setupTypeAcquisition> | null>(null)
+  const apiUrl = useSnippetsBaseApiUrl()
+  const codeCompletionApi = useCodeCompletionApi()
+
+  const [cursorPosition, setCursorPosition] = useState<number | null>(null)
+  const [code, setCode] = useState(initialCode)
+
+  const files = useMemo(
+    () => ({
+      "index.tsx": code,
+      "manual-edits.json": manualEditsFileContent,
+    }),
+    [code, manualEditsFileContent],
+  )
+  const [currentFile, setCurrentFile] =
+    useState<keyof typeof files>("index.tsx")
+
+  const isInitialCodeLoaded = Boolean(initialCode)
+
+  useEffect(() => {
+    if (initialCode !== code) {
+      setCode(initialCode)
+      if (currentFile === "index.tsx") {
+        updateCurrentEditorContent(initialCode)
+      }
+    }
+  }, [isInitialCodeLoaded])
+
+  // Whenever streaming completes, reset the code to the initial code
+  useEffect(() => {
+    if (!isStreaming && code !== initialCode && initialCode) {
+      console.log("Resetting code to initial code", initialCode)
+      setCode(initialCode)
+
+      // HACK: Timeout because we need to wait for the editor to mount again
+      setTimeout(() => {
+        updateCurrentEditorContent(initialCode)
+      }, 200)
+    }
+  }, [isStreaming])
+
+  useEffect(() => {
+    if (!editorRef.current) return
+
+    const fsMap = new Map<string, string>()
+    Object.entries(files).forEach(([filename, content]) => {
+      fsMap.set(filename, content)
+    })
+    ;(window as any).__DEBUG_CODE_EDITOR_FS_MAP = fsMap
+
+    createDefaultMapFromCDN(
+      { target: ts.ScriptTarget.ES2022 },
+      "5.6.3",
+      true,
+      ts,
+    ).then((defaultFsMap) => {
+      defaultFsMap.forEach((content, filename) => {
+        fsMap.set(filename, content)
+      })
+    })
+
+    const system = createSystem(fsMap)
+    const env = createVirtualTypeScriptEnvironment(system, [], ts, {
+      jsx: ts.JsxEmit.ReactJSX,
+      declaration: true,
+      allowJs: true,
+      target: ts.ScriptTarget.ES2022,
+      resolveJsonModule: true,
+    })
+
+    // Initialize ATA
+    const ataConfig: ATABootstrapConfig = {
+      projectName: "my-project",
+      typescript: ts,
+      logger: console,
+      fetcher: async (input: RequestInfo | URL, init?: RequestInit) => {
+        const registryPrefixes = [
+          "https://data.jsdelivr.com/v1/package/resolve/npm/@tsci/",
+          "https://data.jsdelivr.com/v1/package/npm/@tsci/",
+          "https://cdn.jsdelivr.net/npm/@tsci/",
+        ]
+        if (
+          typeof input === "string" &&
+          registryPrefixes.some((prefix) => input.startsWith(prefix))
+        ) {
+          const fullPackageName = input
+            .replace(registryPrefixes[0], "")
+            .replace(registryPrefixes[1], "")
+            .replace(registryPrefixes[2], "")
+          const packageName = fullPackageName.split("/")[0].replace(/\./, "/")
+          const pathInPackage = fullPackageName.split("/").slice(1).join("/")
+          const jsdelivrPath = `${packageName}${pathInPackage ? `/${pathInPackage}` : ""}`
+          return fetch(
+            `${apiUrl}/snippets/download?jsdelivr_resolve=${input.includes("/resolve/")}&jsdelivr_path=${encodeURIComponent(jsdelivrPath)}`,
+          )
+        }
+        return fetch(input, init)
+      },
+      delegate: {
+        started: () => {
+          const manualEditsTypeDeclaration = `
+				  declare module "*.json" {
+				  const value: {
+					  pcb_placements?: any[],
+					  edit_events?: any[],
+					  manual_trace_hints?: any[],
+				  } | undefined;
+				  export default value;
+				}
+			`
+          env.createFile("manual-edits.d.ts", manualEditsTypeDeclaration)
+        },
+        receivedFile: (code: string, path: string) => {
+          fsMap.set(path, code)
+          env.createFile(path, code)
+          if (viewRef.current) {
+            viewRef.current.dispatch({
+              changes: {
+                from: 0,
+                to: viewRef.current.state.doc.length,
+                insert: viewRef.current.state.doc.toString(),
+              },
+              selection: viewRef.current.state.selection,
+            })
+          }
+        },
+      },
+    }
+
+    const ata = setupTypeAcquisition(ataConfig)
+    ataRef.current = ata
+
+    // Set up base extensions
+    const baseExtensions = [
+      basicSetup,
+      currentFile.endsWith(".json")
+        ? json()
+        : javascript({ typescript: true, jsx: true }),
+      keymap.of([indentWithTab]),
+      EditorState.readOnly.of(readOnly),
+      EditorView.updateListener.of((update) => {
+        if (update.docChanged) {
+          const newContent = update.state.doc.toString()
+          if (newContent === files[currentFile]) return
+
+          if (currentFile === "index.tsx") {
+            setCode(newContent)
+            onCodeChange(newContent)
+          } else if (currentFile === "manual-edits.json") {
+            onManualEditsFileContentChanged?.(newContent)
+          }
+
+          if (currentFile === "index.tsx") {
+            const { outputFiles } = env.languageService.getEmitOutput(
+              currentFile,
+              true,
+            )
+            const indexDts = outputFiles.find(
+              (file) => file.name === "index.d.ts",
+            )
+            if (indexDts?.text && onDtsChange) {
+              onDtsChange(indexDts.text)
+            }
+          }
+        }
+        if (update.selectionSet) {
+          const pos = update.state.selection.main.head
+          setCursorPosition(pos)
+        }
+      }),
+    ]
+    if (codeCompletionApi?.apiKey) {
+      baseExtensions.push(
+        copilotPlugin({
+          apiKey: codeCompletionApi.apiKey,
+          language: Language.TYPESCRIPT,
+        }),
+        EditorView.theme({
+          ".cm-ghostText, .cm-ghostText *": {
+            opacity: "0.6",
+            filter: "grayscale(20%)",
+            cursor: "pointer",
+          },
+          ".cm-ghostText:hover": {
+            background: "#eee",
+          },
+        }),
+      )
+    }
+
+    // Add TypeScript-specific extensions and handlers
+    const tsExtensions =
+      currentFile.endsWith(".tsx") || currentFile.endsWith(".ts")
+        ? [
+            tsFacet.of({ env, path: currentFile }),
+            tsSync(),
+            tsLinter(),
+            autocompletion({ override: [tsAutocomplete()] }),
+            tsHover(),
+            hoverTooltip((view, pos) => {
+              const line = view.state.doc.lineAt(pos)
+              const lineStart = line.from
+              const lineEnd = line.to
+              const lineText = view.state.sliceDoc(lineStart, lineEnd)
+              const matches = Array.from(
+                lineText.matchAll(TSCI_PACKAGE_PATTERN),
+              )
+
+              for (const match of matches) {
+                if (match.index !== undefined) {
+                  const start = lineStart + match.index
+                  const end = start + match[0].length
+                  if (pos >= start && pos <= end) {
+                    return {
+                      pos: start,
+                      end: end,
+                      above: true,
+                      create() {
+                        const dom = document.createElement("div")
+                        dom.textContent = "Ctrl/Cmd+Click to open snippet"
+                        return { dom }
+                      },
+                    }
+                  }
+                }
+              }
+              return null
+            }),
+            EditorView.domEventHandlers({
+              click: (event, view) => {
+                if (!event.ctrlKey && !event.metaKey) return false
+                const pos = view.posAtCoords({
+                  x: event.clientX,
+                  y: event.clientY,
+                })
+                if (pos === null) return false
+
+                const line = view.state.doc.lineAt(pos)
+                const lineStart = line.from
+                const lineEnd = line.to
+                const lineText = view.state.sliceDoc(lineStart, lineEnd)
+                const matches = Array.from(
+                  lineText.matchAll(TSCI_PACKAGE_PATTERN),
+                )
+                for (const match of matches) {
+                  if (match.index !== undefined) {
+                    const start = lineStart + match.index
+                    const end = start + match[0].length
+                    if (pos >= start && pos <= end) {
+                      const importName = match[0]
+                      // Handle potential dots and dashes in package names
+                      const [owner, name] = importName
+                        .replace("@tsci/", "")
+                        .split(".")
+                      window.open(`/${owner}/${name}`, "_blank")
+                      return true
+                    }
+                  }
+                }
+                return false
+              },
+            }),
+            EditorView.theme({
+              ".cm-content .cm-underline": {
+                textDecoration: "underline",
+                textDecorationColor: "rgba(0, 0, 255, 0.3)",
+                cursor: "pointer",
+              },
+            }),
+            EditorView.decorations.of((view) => {
+              const decorations = []
+              for (const { from, to } of view.visibleRanges) {
+                for (let pos = from; pos < to; ) {
+                  const line = view.state.doc.lineAt(pos)
+                  const lineText = line.text
+                  const matches = lineText.matchAll(TSCI_PACKAGE_PATTERN)
+                  for (const match of matches) {
+                    if (match.index !== undefined) {
+                      const start = line.from + match.index
+                      const end = start + match[0].length
+                      decorations.push(
+                        Decoration.mark({
+                          class: "cm-underline",
+                        }).range(start, end),
+                      )
+                    }
+                  }
+                  pos = line.to + 1
+                }
+              }
+              return Decoration.set(decorations)
+            }),
+          ]
+        : []
+
+    const state = EditorState.create({
+      doc: files[currentFile],
+      extensions: [...baseExtensions, ...tsExtensions],
+    })
+
+    const view = new EditorView({
+      state,
+      parent: editorRef.current,
+    })
+
+    viewRef.current = view
+
+    // Initial ATA run for index.tsx
+    if (currentFile === "index.tsx") {
+      ata(`${defaultImports}${code}`)
+    }
+
+    return () => {
+      view.destroy()
+    }
+  }, [!isStreaming, currentFile, code !== ""])
+
+  const updateCurrentEditorContent = (newContent: string) => {
+    if (viewRef.current) {
+      const state = viewRef.current.state
+      if (state.doc.toString() !== newContent) {
+        viewRef.current.dispatch({
+          changes: { from: 0, to: state.doc.length, insert: newContent },
+        })
+      }
+    }
+  }
+
+  const updateEditorToMatchCurrentFile = () => {
+    const currentContent = files[currentFile] || ""
+    updateCurrentEditorContent(currentContent)
+  }
+
+  const codeImports = getImportsFromCode(code)
+
+  useEffect(() => {
+    if (ataRef.current && currentFile === "index.tsx") {
+      ataRef.current(`${defaultImports}${code}`)
+    }
+  }, [codeImports])
+
+  const handleFileChange = (filename: keyof typeof files) => {
+    setCurrentFile(filename)
+  }
+
+  const updateFileContent = (
+    filename: keyof typeof files,
+    newContent: string,
+  ) => {
+    if (filename === "index.tsx") {
+      setCode(newContent)
+      onCodeChange(newContent)
+    } else if (filename === "manual-edits.json") {
+      onManualEditsFileContentChanged?.(newContent)
+    }
+
+    if (viewRef.current && currentFile === filename) {
+      viewRef.current.dispatch({
+        changes: {
+          from: 0,
+          to: viewRef.current.state.doc.length,
+          insert: newContent,
+        },
+      })
+    }
+  }
+
+  // Whenever the current file changes, updated the editor content
+  useEffect(() => {
+    updateEditorToMatchCurrentFile()
+  }, [currentFile])
+
+  // Whenever the manual edits json content changes, update the editor if
+  // it's currently viewing the manual edits file
+  useEffect(() => {
+    if (currentFile === "manual-edits.json") {
+      updateEditorToMatchCurrentFile()
+    }
+  }, [manualEditsFileContent])
+
+  if (isStreaming) {
+    return (
+      <div className="font-mono whitespace-pre-wrap text-xs">{initialCode}</div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      {showImportAndFormatButtons && (
+        <CodeEditorHeader
+          currentFile={currentFile}
+          files={files}
+          handleFileChange={handleFileChange}
+          updateFileContent={(...args) => {
+            return updateFileContent(...args)
+          }}
+          cursorPosition={cursorPosition}
+        />
+      )}
+      <div ref={editorRef} className="flex-1 overflow-auto" />
+    </div>
+  )
+}

package/src/components/CodeEditorHeader.tsx

@@ -0,0 +1,160 @@
+import { Button } from "@/components/ui/button"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { useImportSnippetDialog } from "./dialogs/import-snippet-dialog"
+import { useToast } from "@/hooks/use-toast"
+import { FootprintDialog } from "./FootprintDialog"
+import { useState } from "react"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "./ui/dropdown-menu"
+import { AlertTriangle } from "lucide-react"
+import { checkIfManualEditsImported } from "@/lib/utils/checkIfManualEditsImported"
+import { handleManualEditsImport } from "@/lib/handleManualEditsImport"
+
+export type FileName = "index.tsx" | "manual-edits.json"
+
+interface CodeEditorHeaderProps {
+  currentFile: FileName
+  files: Record<FileName, string>
+  handleFileChange: (filename: FileName) => void
+  updateFileContent: (filename: FileName, content: string) => void
+  cursorPosition: number | null
+}
+
+export const CodeEditorHeader = ({
+  currentFile,
+  files,
+  handleFileChange,
+  updateFileContent,
+  cursorPosition,
+}: CodeEditorHeaderProps) => {
+  const { Dialog: ImportSnippetDialog, openDialog: openImportDialog } =
+    useImportSnippetDialog()
+  const [footprintDialogOpen, setFootprintDialogOpen] = useState(false)
+  const { toast } = useToast()
+
+  const formatCurrentFile = () => {
+    if (!window.prettier || !window.prettierPlugins) return
+
+    try {
+      const currentContent = files[currentFile]
+
+      if (currentFile.endsWith(".json")) {
+        try {
+          const jsonObj = JSON.parse(currentContent)
+          const formattedJson = JSON.stringify(jsonObj, null, 2)
+          updateFileContent(currentFile, formattedJson)
+        } catch (jsonError) {
+          throw new Error("Invalid JSON content")
+        }
+        return
+      }
+
+      const formattedCode = window.prettier.format(currentContent, {
+        semi: false,
+        parser: "typescript",
+        plugins: window.prettierPlugins,
+      })
+
+      updateFileContent(currentFile, formattedCode)
+    } catch (error) {
+      console.error("Formatting error:", error)
+      toast({
+        title: "Formatting error",
+        description:
+          error instanceof Error
+            ? error.message
+            : "Failed to format the code. Please check for syntax errors.",
+        variant: "destructive",
+      })
+    }
+  }
+
+  return (
+    <div className="flex items-center gap-2 px-2 border-b border-gray-200">
+      <div>
+        <Select value={currentFile} onValueChange={handleFileChange}>
+          <SelectTrigger className="h-7 px-3 bg-white">
+            <SelectValue placeholder="Select file" />
+          </SelectTrigger>
+          <SelectContent>
+            {Object.keys(files).map((filename) => (
+              <SelectItem className="py-1" key={filename} value={filename}>
+                <span className="text-xs pr-1">{filename}</span>
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+      <div className="flex items-center gap-2 px-2 py-1 ml-auto">
+        {checkIfManualEditsImported(files) && (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                size="sm"
+                variant="ghost"
+                className="text-red-500 hover:bg-red-50"
+              >
+                <AlertTriangle className="mr-2 h-4 w-4" />
+                Error
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuItem
+                className="text-red-600 cursor-pointer"
+                onClick={() =>
+                  handleManualEditsImport(files, updateFileContent, toast)
+                }
+              >
+                Manual edits exist but have not been imported. (Click to fix)
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )}
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button size="sm" variant="ghost">
+              Insert
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem onClick={() => setFootprintDialogOpen(true)}>
+              Chip
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+        <Button size="sm" variant="ghost" onClick={() => openImportDialog()}>
+          Import
+        </Button>
+        <Button size="sm" variant="ghost" onClick={formatCurrentFile}>
+          Format
+        </Button>
+      </div>
+      <ImportSnippetDialog
+        onSnippetSelected={(snippet) => {
+          const newContent = `import {} from "@tsci/${snippet.owner_name}.${snippet.unscoped_name}"\n${files[currentFile]}`
+          updateFileContent(currentFile, newContent)
+        }}
+      />
+      <FootprintDialog
+        currentFile={currentFile}
+        open={footprintDialogOpen}
+        onOpenChange={setFootprintDialogOpen}
+        updateFileContent={updateFileContent}
+        files={files}
+        cursorPosition={cursorPosition}
+      />
+    </div>
+  )
+}
+
+export default CodeEditorHeader

package/src/components/CreateNewSnippetWithAiHero.tsx

@@ -0,0 +1,77 @@
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Battery, Bot, Cpu, LayoutGrid } from "lucide-react"
+import { useState } from "react"
+import { useLocation } from "wouter"
+
+export function CreateNewSnippetWithAiHero() {
+  const [inputValue, setInputValue] = useState("")
+  const [, navigate] = useLocation()
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    if (inputValue.trim()) {
+      navigate(`/ai?initial_prompt=${encodeURIComponent(inputValue)}`)
+    }
+  }
+
+  const handleQuickPrompt = (prompt: string) => {
+    navigate(`/ai?initial_prompt=${encodeURIComponent(prompt)}`)
+  }
+
+  return (
+    <Card className="mb-6 bg-blue-50 rounded-sm">
+      <CardHeader>
+        <CardTitle className="text-blue-600 flex items-center gap-2">
+          <span className="text-2xl">
+            <Bot size={24} />
+          </span>{" "}
+          Create a circuit using AI, type anything below!
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="pb-4">
+        <form onSubmit={handleSubmit} className="mb-4">
+          <Input
+            placeholder="Create a 3x3 usb keyboard with a dial"
+            className="w-full bg-white"
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+          />
+        </form>
+        <div className="flex justify-between items-start sm:flex-row flex-col ">
+          <div className="flex flex-wrap w-full justify-start sm:justify-between">
+            <Button
+              variant="ghost"
+              className="flex items-center w-full sm:w-auto sm:gap-2 opacity-70 flex-row-reverse hover:bg-white hover:opacity-100 justify-between sm:justify-center"
+              onClick={() => handleQuickPrompt("Battery-powered flashlight")}
+            >
+              <Battery size={20} />
+              <span className="capitalize font-semibold">
+                Battery powered flashlight
+              </span>
+            </Button>
+            <Button
+              variant="ghost"
+              className="flex items-center w-full sm:w-auto sm:gap-2 opacity-70 flex-row-reverse hover:bg-white hover:opacity-100 justify-between sm:justify-center"
+              onClick={() => handleQuickPrompt("Motor driver module")}
+            >
+              <Cpu size={20} />
+              <span className="capitalize font-semibold">
+                Motor driver module
+              </span>
+            </Button>
+            <Button
+              variant="ghost"
+              className="flex items-center w-full sm:w-auto sm:gap-2 opacity-70 flex-row-reverse hover:bg-white hover:opacity-100 justify-between sm:justify-center"
+              onClick={() => handleQuickPrompt("NA555 Timer Chip")}
+            >
+              <LayoutGrid size={20} />
+              <span className="capitalize font-semibold">NA555 Timer Chip</span>
+            </Button>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}