@tscircuit/fake-snippets 0.0.66 → 0.0.67

package/src/components/AiChatInterface.tsx

@@ -1,229 +0,0 @@
-import { useState, useRef, useEffect } from "react"
-import { Button } from "@/components/ui/button"
-import ChatInput from "./ChatInput"
-import { useAiApi } from "@/hooks/use-ai-api"
-import { createCircuitBoard1Template } from "@tscircuit/prompt-benchmarks"
-import { TextDelta } from "@anthropic-ai/sdk/resources/messages.mjs"
-import { MagicWandIcon } from "@radix-ui/react-icons"
-import { AiChatMessage } from "./AiChatMessage"
-import { useLocation } from "wouter"
-import { useSnippet } from "@/hooks/use-snippet"
-import { Edit2 } from "lucide-react"
-import { SnippetLink } from "./SnippetLink"
-import { useGlobalStore } from "@/hooks/use-global-store"
-import { useSignIn } from "@/hooks/use-sign-in"
-import { extractCodefence } from "extract-codefence"
-import { PrefetchPageLink } from "./PrefetchPageLink"
-
-export default function AIChatInterface({
-  code,
-  hasUnsavedChanges,
-  snippetId,
-  onCodeChange,
-  onStartStreaming,
-  onStopStreaming,
-  errorMessage,
-  disabled,
-}: {
-  code: string
-  disabled?: boolean
-  hasUnsavedChanges: boolean
-  snippetId?: string | null
-  onCodeChange: (code: string) => void
-  onStartStreaming: () => void
-  onStopStreaming: () => void
-  errorMessage: string | null
-}) {
-  const [messages, setMessages] = useState<AiChatMessage[]>([])
-  const [isStreaming, setIsStreaming] = useState(false)
-  const anthropic = useAiApi()
-  const messagesEndRef = useRef<HTMLDivElement>(null)
-  const { data: snippet } = useSnippet(snippetId!)
-  const [currentCodeBlock, setCurrentCodeBlock] = useState<string | null>(null)
-  const [location, navigate] = useLocation()
-  const isStreamingRef = useRef(false)
-  const isLoggedIn = useGlobalStore((s) => Boolean(s.session))
-  const signIn = useSignIn()
-
-  useEffect(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
-  }, [messages])
-
-  const addMessage = async (message: string) => {
-    const newMessages = messages.concat([
-      {
-        sender: "user",
-        content: message,
-      },
-      {
-        sender: "bot",
-        content: "",
-        codeVersion: messages.filter((m) => m.sender === "bot").length,
-      },
-    ])
-    setMessages(newMessages)
-    setIsStreaming(true)
-    onStartStreaming()
-
-    try {
-      const stream = await anthropic.messages.stream({
-        model: "claude-3-sonnet-20240229",
-        system: createCircuitBoard1Template({
-          currentCode: code,
-        }),
-        messages: [
-          // TODO: include previous messages
-          {
-            role: "user",
-            content: message,
-          },
-        ],
-        max_tokens: 1000,
-      })
-
-      let accumulatedContent = ""
-      let isInCodeBlock = false
-
-      for await (const chunk of stream) {
-        if (chunk.type === "content_block_delta") {
-          const chunkText = (chunk.delta as TextDelta).text
-          accumulatedContent += chunkText
-
-          if (chunkText.includes("```")) {
-            isInCodeBlock = !isInCodeBlock
-            if (isInCodeBlock) {
-              setCurrentCodeBlock("")
-            } else {
-              const codeContent = extractCodefence(accumulatedContent)
-              if (codeContent) {
-                onCodeChange(codeContent)
-              }
-              setCurrentCodeBlock(null)
-            }
-          } else if (isInCodeBlock) {
-            setCurrentCodeBlock((prev) => {
-              const updatedCode = (prev || "") + chunkText
-              onCodeChange(updatedCode)
-              return updatedCode
-            })
-          }
-
-          setMessages((prevMessages) => {
-            const updatedMessages = [...prevMessages]
-            updatedMessages[updatedMessages.length - 1].content =
-              accumulatedContent
-            return updatedMessages
-          })
-        }
-      }
-    } catch (error) {
-      console.error("Error streaming response:", error)
-      setMessages((prevMessages) => {
-        const updatedMessages = [...prevMessages]
-        updatedMessages[updatedMessages.length - 1].content =
-          "An error occurred while generating the response."
-        return updatedMessages
-      })
-    } finally {
-      setIsStreaming(false)
-      onStopStreaming()
-    }
-  }
-
-  useEffect(() => {
-    const searchParams = new URLSearchParams(
-      window.location.search.split("?")[1],
-    )
-    const initialPrompt = searchParams.get("initial_prompt")
-
-    if (initialPrompt && messages.length === 0 && !isStreamingRef.current) {
-      isStreamingRef.current = true
-      addMessage(initialPrompt)
-    }
-  }, [])
-
-  return (
-    <div className="flex flex-col h-[calc(100vh-60px)] max-w-2xl mx-auto p-4 bg-gray-100">
-      <div className="flex-1 overflow-y-auto space-y-4 mb-4">
-        {snippet && (
-          <div className="flex pl-4 p-2 rounded items-center bg-white border border-gray-200 text-sm mb-4 shadow-sm">
-            <SnippetLink snippet={snippet} />
-            <div className="flex-grow" />
-            <PrefetchPageLink href={`/editor?snippet_id=${snippet.snippet_id}`}>
-              <Button
-                size="sm"
-                className="text-xs"
-                variant="ghost"
-                disabled={hasUnsavedChanges}
-              >
-                Open in Editor
-                <Edit2 className="w-3 h-3 ml-2 opacity-60" />
-              </Button>
-            </PrefetchPageLink>
-          </div>
-        )}
-        {messages.length === 0 && isLoggedIn && (
-          <div className="text-gray-500 text-xl text-center pt-[30vh] flex flex-col items-center">
-            <div>Submit a prompt to {snippet ? "edit!" : "get started!"}</div>
-            <div className="mt-2">
-              This is our legacy AI chat interface. For a better experience,
-              please use{" "}
-              <PrefetchPageLink href="https://chat.tscircuit.com">
-                chat.tscircuit.com
-              </PrefetchPageLink>
-              .
-            </div>
-            <div className="text-6xl mt-4">↓</div>
-          </div>
-        )}
-        {!isLoggedIn && (
-          <div className="text-gray-500 text-xl text-center pt-[30vh] flex flex-col items-center">
-            <div>
-              Sign in use the AI chat or{" "}
-              <PrefetchPageLink
-                className="text-blue-500 underline"
-                href="/quickstart"
-              >
-                use the regular editor
-              </PrefetchPageLink>
-            </div>
-            <div className="mt-4 flex gap-2">
-              <Button onClick={() => signIn()}>Sign In</Button>
-              <Button onClick={() => signIn()} variant="outline">
-                Sign Up
-              </Button>
-            </div>
-          </div>
-        )}
-        {messages.map((message, index) => (
-          <AiChatMessage key={index} message={message} />
-        ))}
-        <div ref={messagesEndRef} />
-      </div>
-      {code && errorMessage && !isStreaming && (
-        <div className="flex justify-end mr-6">
-          <Button
-            onClick={() => {
-              addMessage(`Fix this error: ${errorMessage}`)
-            }}
-            disabled={!isLoggedIn}
-            className="mb-2 bg-green-50 hover:bg-green-100"
-            variant="outline"
-          >
-            <MagicWandIcon className="w-4 h-4 mr-2" />
-            <span className="font-bold">Fix Error with AI</span>
-            <span className="italic font-normal ml-2">
-              "{errorMessage.slice(0, 26)}..."
-            </span>
-          </Button>
-        </div>
-      )}
-      <ChatInput
-        onSubmit={async (message: string) => {
-          addMessage(message)
-        }}
-        disabled={isStreaming || !isLoggedIn}
-      />
-    </div>
-  )
-}

package/src/components/CodeAndPreview.tsx

@@ -1,289 +0,0 @@
-import { CodeEditor } from "@/components/CodeEditor"
-import { usePackageVisibilitySettingsDialog } from "@/components/dialogs/package-visibility-settings-dialog"
-import { useAxios } from "@/hooks/use-axios"
-import { useCreateSnippetMutation } from "@/hooks/use-create-snippet-mutation"
-import { useGlobalStore } from "@/hooks/use-global-store"
-import { useToast } from "@/hooks/use-toast"
-import { useUrlParams } from "@/hooks/use-url-params"
-import useWarnUserOnPageChange from "@/hooks/use-warn-user-on-page-change"
-import { decodeUrlHashToText } from "@/lib/decodeUrlHashToText"
-import { getSnippetTemplate } from "@/lib/get-snippet-template"
-import { cn } from "@/lib/utils"
-import { parseJsonOrNull } from "@/lib/utils/parseJsonOrNull"
-import type { Snippet } from "fake-snippets-api/lib/db/schema"
-import { Loader2 } from "lucide-react"
-import { useEffect, useMemo, useState } from "react"
-import { useMutation, useQueryClient } from "react-query"
-import EditorNav from "./EditorNav"
-import { SuspenseRunFrame } from "./SuspenseRunFrame"
-import { applyEditEventsToManualEditsFile } from "@tscircuit/core"
-
-interface Props {
-  snippet?: Snippet | null
-}
-
-export function CodeAndPreview({ snippet }: Props) {
-  const axios = useAxios()
-  const isLoggedIn = useGlobalStore((s) => Boolean(s.session))
-  const urlParams = useUrlParams()
-  const templateFromUrl = useMemo(
-    () => (urlParams.template ? getSnippetTemplate(urlParams.template) : null),
-    [],
-  )
-  const defaultCode = useMemo(() => {
-    return (
-      decodeUrlHashToText(window.location.toString()) ??
-      snippet?.code ??
-      // If the snippet_id is in the url, use an empty string as the default
-      // code until the snippet code is loaded
-      (urlParams.snippet_id && "") ??
-      templateFromUrl?.code
-    )
-  }, [])
-
-  // Initialize with template or snippet's manual edits if available
-  const [manualEditsFileContent, setManualEditsFileContent] = useState<
-    string | null
-  >(null)
-  const [code, setCode] = useState(defaultCode ?? "")
-  const [dts, setDts] = useState("")
-  const [showPreview, setShowPreview] = useState(true)
-  const [lastRunCode, setLastRunCode] = useState(defaultCode ?? "")
-  const [fullScreen, setFullScreen] = useState(false)
-  const [circuitJson, setCircuitJson] = useState<any>(null)
-  const {
-    Dialog: PackageVisibilitySettingsDialog,
-    openDialog: openPackageVisibilitySettingsDialog,
-  } = usePackageVisibilitySettingsDialog()
-  const [isPrivate, setIsPrivate] = useState(false)
-
-  const snippetType: "board" | "package" | "model" | "footprint" =
-    snippet?.snippet_type ??
-    (templateFromUrl?.type as any) ??
-    urlParams.snippet_type
-
-  useEffect(() => {
-    if (snippet?.code) {
-      setCode(snippet.code)
-      setLastRunCode(snippet.code)
-    }
-  }, [Boolean(snippet)])
-
-  const { toast } = useToast()
-
-  useEffect(() => {
-    if (snippet?.manual_edits_json_content) {
-      setManualEditsFileContent(snippet.manual_edits_json_content ?? "")
-    }
-  }, [Boolean(snippet?.manual_edits_json_content)])
-
-  const userImports = useMemo(
-    () => ({
-      "./manual-edits.json": parseJsonOrNull(manualEditsFileContent) ?? "",
-    }),
-    [manualEditsFileContent],
-  )
-
-  const qc = useQueryClient()
-
-  const updateSnippetMutation = useMutation({
-    mutationFn: async () => {
-      if (!snippet) throw new Error("No snippet to update")
-
-      const updateSnippetPayload = {
-        snippet_id: snippet.snippet_id,
-        code: code,
-        dts: dts,
-        // compiled_js: compiledJs,
-        circuit_json: circuitJson,
-        manual_edits_json_content: manualEditsFileContent,
-      }
-
-      try {
-        const response = await axios.post(
-          "/snippets/update",
-          updateSnippetPayload,
-        )
-        return response.data
-      } catch (error: any) {
-        const responseStatus = error?.status ?? error?.response?.status
-        // We would normally only do this if the error is a 413, but we're not
-        // able to check the status properly because of the browser CORS policy
-        // (the PAYLOAD_TOO_LARGE error does not have the proper CORS headers)
-        if (
-          import.meta.env.VITE_ALTERNATE_REGISTRY_URL &&
-          (responseStatus === undefined || responseStatus === 413)
-        ) {
-          console.log(`Failed to update snippet, attempting alternate registry`)
-          const response = await axios.post(
-            `${import.meta.env.VITE_ALTERNATE_REGISTRY_URL}/snippets/update`,
-            updateSnippetPayload,
-          )
-          return response.data
-        }
-        throw error
-      }
-    },
-    onSuccess: () => {
-      qc.invalidateQueries({ queryKey: ["snippets", snippet?.snippet_id] })
-      toast({
-        title: "Snippet saved",
-        description: "Your changes have been saved successfully.",
-      })
-    },
-    onError: (error) => {
-      console.error("Error saving snippet:", error)
-      toast({
-        title: "Error",
-        description:
-          error instanceof Error
-            ? error.message
-            : "Failed to save the snippet. Please try again.",
-        variant: "destructive",
-      })
-    },
-  })
-
-  const createSnippetMutation = useCreateSnippetMutation()
-  const [lastSavedAt, setLastSavedAt] = useState(Date.now())
-
-  const handleSave = async () => {
-    if (hasUnrunChanges) {
-      toast({
-        title: "Warning",
-        description: "You must run the snippet before saving your changes.",
-        variant: "destructive",
-      })
-      return
-    }
-
-    if (!snippet && isLoggedIn) {
-      openPackageVisibilitySettingsDialog()
-      return
-    }
-
-    setLastSavedAt(Date.now())
-    if (snippet) {
-      updateSnippetMutation.mutate()
-    } else {
-      createSnippetMutation.mutate({
-        code,
-        circuit_json: circuitJson as any,
-        manual_edits_json_content: manualEditsFileContent ?? "",
-      })
-    }
-  }
-
-  const hasManualEditsChanged =
-    (snippet?.manual_edits_json_content ?? "") !==
-    (manualEditsFileContent ?? "")
-
-  const hasUnsavedChanges =
-    !updateSnippetMutation.isLoading &&
-    Date.now() - lastSavedAt > 1000 &&
-    (snippet?.code !== code || hasManualEditsChanged)
-
-  const hasUnrunChanges = code !== lastRunCode
-
-  useWarnUserOnPageChange({ hasUnsavedChanges })
-
-  const fsMap = useMemo(() => {
-    return {
-      "index.tsx": code,
-      "manual-edits.json": manualEditsFileContent || "",
-    }
-  }, [code, manualEditsFileContent])
-
-  if (!snippet && (urlParams.snippet_id || urlParams.should_create_snippet)) {
-    return (
-      <div className="flex items-center justify-center h-64">
-        <div className="flex flex-col items-center justify-center">
-          <div className="text-lg text-gray-500 mb-4">Loading</div>
-          <Loader2 className="w-16 h-16 animate-spin text-gray-400" />
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <div className="flex flex-col">
-      <EditorNav
-        circuitJson={circuitJson}
-        snippet={snippet}
-        snippetType={snippetType}
-        code={code}
-        isSaving={updateSnippetMutation.isLoading}
-        hasUnsavedChanges={hasUnsavedChanges}
-        onSave={() => handleSave()}
-        onTogglePreview={() => setShowPreview(!showPreview)}
-        previewOpen={showPreview}
-        canSave={!hasUnrunChanges} // Disable save if there are unrun changes
-      />
-      <div className={`flex ${showPreview ? "flex-col md:flex-row" : ""}`}>
-        <div
-          className={cn(
-            "hidden flex-col md:flex border-r border-gray-200 bg-gray-50",
-            showPreview ? "w-full md:w-1/2" : "w-full flex",
-          )}
-        >
-          <CodeEditor
-            initialCode={code}
-            manualEditsFileContent={manualEditsFileContent ?? ""}
-            onManualEditsFileContentChanged={(newContent) => {
-              setManualEditsFileContent(newContent)
-            }}
-            onCodeChange={(newCode) => {
-              setCode(newCode)
-            }}
-            onDtsChange={(newDts) => setDts(newDts)}
-          />
-        </div>
-        {showPreview && (
-          <div
-            className={cn(
-              "flex p-0 flex-col min-h-[640px]",
-              fullScreen
-                ? "fixed inset-0 z-50 bg-white p-4 overflow-hidden"
-                : "w-full md:w-1/2",
-            )}
-          >
-            <SuspenseRunFrame
-              showRunButton
-              forceLatestEvalVersion
-              onRenderStarted={() => {
-                setLastRunCode(code)
-              }}
-              onRenderFinished={({ circuitJson }) => {
-                setCircuitJson(circuitJson)
-              }}
-              onEditEvent={(event) => {
-                const newManualEditsFileContent =
-                  applyEditEventsToManualEditsFile({
-                    circuitJson: circuitJson,
-                    editEvents: [event],
-                    manualEditsFile: JSON.parse(manualEditsFileContent ?? "{}"),
-                  })
-                setManualEditsFileContent(
-                  JSON.stringify(newManualEditsFileContent, null, 2),
-                )
-              }}
-              fsMap={fsMap}
-            />
-          </div>
-        )}
-      </div>
-      <PackageVisibilitySettingsDialog
-        initialIsPrivate={false}
-        onSave={(isPrivate: boolean) => {
-          setLastSavedAt(Date.now())
-          createSnippetMutation.mutate({
-            code,
-            circuit_json: circuitJson as any,
-            manual_edits_json_content: manualEditsFileContent ?? "",
-            is_private: isPrivate,
-          })
-        }}
-      />
-    </div>
-  )
-}