@tscircuit/fake-snippets 0.0.1

package/scripts/generate_bundle_stats.js

@@ -0,0 +1,192 @@
+import fs from "fs"
+import path from "path"
+
+function processData(data, dependencies) {
+  const { tree, nodeParts } = data
+  const depStats = {}
+  let totalSize = 0
+
+  function traverse(node) {
+    if (node.uid && nodeParts[node.uid]) {
+      const part = nodeParts[node.uid]
+      totalSize += part.renderedLength
+      const matchedDep = Object.keys(dependencies).find((dep) =>
+        node.name.includes(dep),
+      )
+      if (matchedDep) {
+        if (!depStats[matchedDep]) {
+          depStats[matchedDep] = { size: 0, files: 0 }
+        }
+        depStats[matchedDep].size += part.renderedLength
+        depStats[matchedDep].files += 1
+      }
+    }
+    if (node.children) {
+      node.children.forEach(traverse)
+    }
+  }
+
+  traverse(tree)
+
+  return { totalSize, depStats }
+}
+
+function getDependencies() {
+  const packageJson = JSON.parse(fs.readFileSync("package.json", "utf-8"))
+  return {
+    ...packageJson.dependencies,
+    ...packageJson.devDependencies,
+  }
+}
+
+function parseStatsHtml(filePath) {
+  console.log(`Attempting to parse file: ${filePath}`)
+  const html = fs.readFileSync(filePath, "utf-8")
+
+  const dataMatch = html.match(/const data = (\{.*?\});/s)
+  if (dataMatch && dataMatch[1]) {
+    try {
+      return JSON.parse(dataMatch[1])
+    } catch (error) {
+      console.error("Error parsing JSON:", error)
+      return null
+    }
+  }
+  console.error("Could not find data in the script content")
+  return null
+}
+
+function formatBytes(bytes) {
+  const units = ["B", "KB", "MB", "GB"]
+  let size = bytes
+  let unitIndex = 0
+  while (size >= 1024 && unitIndex < units.length - 1) {
+    size /= 1024
+    unitIndex++
+  }
+  return `${size.toFixed(2)} ${units[unitIndex]}`
+}
+
+function compareSizes(prData, mainData, dependencies) {
+  const prStats = processData(prData, dependencies)
+  const mainStats = processData(mainData, dependencies)
+
+  const diffStats = {}
+  const allDeps = new Set([
+    ...Object.keys(prStats.depStats),
+    ...Object.keys(mainStats.depStats),
+  ])
+
+  allDeps.forEach((dep) => {
+    const prSize = prStats.depStats[dep]?.size || 0
+    const mainSize = mainStats.depStats[dep]?.size || 0
+    const diff = prSize - mainSize
+
+    diffStats[dep] = {
+      before: mainSize,
+      after: prSize,
+      diff,
+      percentChange: (diff / mainSize) * 100 || 0,
+    }
+  })
+
+  return {
+    totalBefore: mainStats.totalSize,
+    totalAfter: prStats.totalSize,
+    totalDiff: prStats.totalSize - mainStats.totalSize,
+    totalPercentChange:
+      ((prStats.totalSize - mainStats.totalSize) / mainStats.totalSize) * 100,
+    diffStats,
+  }
+}
+
+function generateDiffMarkdown(prData, mainData, dependencies) {
+  const comparison = compareSizes(prData, mainData, dependencies)
+  let markdown = ""
+  const totalDiffSymbol = comparison.totalDiff > 0 ? "📈" : "📉"
+  markdown += `## Total Bundle Size\n\n`
+  markdown += `- Before: **${formatBytes(comparison.totalBefore)}**\n`
+  markdown += `- After: **${formatBytes(comparison.totalAfter)}**\n`
+  markdown += `- Change: ${totalDiffSymbol} **${formatBytes(Math.abs(comparison.totalDiff))}** (${comparison.totalPercentChange.toFixed(2)}%)\n\n`
+
+  markdown += `## Diff\n\n`
+
+  const sortedDiffs = Object.entries(comparison.diffStats).sort(
+    ([, a], [, b]) => Math.abs(b.diff) - Math.abs(a.diff),
+  )
+
+  const significantChanges = sortedDiffs.filter(
+    ([, stats]) =>
+      Math.abs(stats.percentChange) > 1 || Math.abs(stats.diff) > 1024,
+  )
+
+  if (significantChanges.length > 0) {
+    markdown += `| Package | Before | After | Diff | Change |\n`
+    markdown += `|---------|--------|-------|------|--------|\n`
+
+    for (const [name, stats] of significantChanges) {
+      const version = dependencies[name]
+      const symbol = stats.diff > 0 ? "📈" : "📉"
+      markdown += `| ${name}@${version} | ${formatBytes(stats.before)} | ${formatBytes(stats.after)} | ${symbol} ${formatBytes(Math.abs(stats.diff))} |     
+ ${stats.percentChange.toFixed(2)}% |\n`
+    }
+  } else {
+    markdown += "No significant changes in bundle size.\n"
+  }
+
+  markdown += `\n<details>\n`
+  markdown += `<summary>View Dependencies</summary>\n\n`
+  markdown += `| Package | Size |\n`
+  markdown += `|---------|------|\n`
+
+  const prStats = processData(prData, dependencies)
+  const prDependencies = Object.entries(prStats.depStats).sort(
+    ([, a], [, b]) => b.size - a.size,
+  )
+
+  for (const [name, stats] of prDependencies) {
+    const version = dependencies[name]
+    markdown += `| ${name}@${version} | ${formatBytes(stats.size)} |\n`
+  }
+
+  markdown += `\n</details>\n`
+
+  return markdown
+}
+
+function main() {
+  const args = process.argv.slice(2)
+  if (args.length !== 2) {
+    console.error(
+      "Usage: node generate_bundle_stats.js <pr_stats.html> <main_stats.html>",
+    )
+    process.exit(1)
+  }
+
+  const [prStatsFile, mainStatsFile] = args
+
+  try {
+    console.log(`Processing PR stats: ${prStatsFile}`)
+    console.log(`Processing main stats: ${mainStatsFile}`)
+
+    const prData = parseStatsHtml(prStatsFile)
+    const mainData = parseStatsHtml(mainStatsFile)
+
+    if (!prData || !mainData) {
+      console.error("Failed to parse stats files")
+      process.exit(1)
+    }
+
+    const dependencies = getDependencies()
+    const markdown = generateDiffMarkdown(prData, mainData, dependencies)
+
+    const outputFile = path.join(path.dirname(prStatsFile), "bundle_stats.md")
+    fs.writeFileSync(outputFile, markdown)
+    console.log(`Bundle stats comparison markdown generated: ${outputFile}`)
+  } catch (error) {
+    console.error("Error:", error.message)
+    process.exit(1)
+  }
+}
+
+main()

package/scripts/snapshot.ts

@@ -0,0 +1,35 @@
+/*
+ * This script is for selecting and updating a single snapshot.
+ * We use prompts to allow the user to select the *.spec.ts file to run.
+ * We then run "bunx playwright test --update-snapshots" for that file.
+ */
+
+import prompts from "prompts"
+import { execSync } from "child_process"
+import { Glob } from "bun"
+import path from "path"
+
+const run = async () => {
+  const { file } = await prompts({
+    type: "autocomplete",
+    name: "file",
+    message: "Select a file to update",
+    choices: getTestFiles(),
+  })
+
+  if (!file) return
+
+  execSync(`bunx playwright test --update-snapshots ${file}`, {
+    stdio: "inherit",
+  })
+}
+
+const getTestFiles = () => {
+  const files = new Glob("playwright-tests/**/*.spec.ts").scanSync()
+  return Array.from(files).map((file) => ({
+    title: file.replace("playwright-tests/", ""),
+    value: file,
+  }))
+}
+
+run()

package/src/App.tsx

@@ -0,0 +1,113 @@
+import { ComponentType, Suspense, lazy } from "react"
+import { Toaster } from "@/components/ui/toaster"
+import { Route, Switch } from "wouter"
+import "./components/CmdKMenu"
+import { ContextProviders } from "./ContextProviders"
+import React from "react"
+
+const lazyImport = (importFn: () => Promise<any>) =>
+  lazy<ComponentType<any>>(async () => {
+    try {
+      const module = await importFn()
+
+      if (module.default) {
+        return { default: module.default }
+      }
+
+      const pageExportNames = ["Page", "Component", "View"]
+      for (const suffix of pageExportNames) {
+        const keys = Object.keys(module).filter((key) => key.endsWith(suffix))
+        if (keys.length > 0) {
+          return { default: module[keys[0]] }
+        }
+      }
+
+      const componentExport = Object.values(module).find(
+        (exp) => typeof exp === "function" && exp.prototype?.isReactComponent,
+      )
+      if (componentExport) {
+        return { default: componentExport }
+      }
+
+      throw new Error(
+        `No valid React component found in module. Available exports: ${Object.keys(module).join(", ")}`,
+      )
+    } catch (error) {
+      console.error("Failed to load component:", error)
+      throw error
+    }
+  })
+
+const AiPage = lazyImport(() => import("@/pages/ai"))
+const AuthenticatePage = lazyImport(() => import("@/pages/authorize"))
+const DashboardPage = lazyImport(() => import("@/pages/dashboard"))
+const EditorPage = lazyImport(async () => {
+  const [editorModule] = await Promise.all([
+    import("@/pages/editor"),
+    import("@/lib/utils/load-prettier").then((m) => m.loadPrettier()),
+  ])
+  return editorModule
+})
+const LandingPage = lazyImport(() => import("@/pages/landing"))
+const MyOrdersPage = lazyImport(() => import("@/pages/my-orders"))
+const NewestPage = lazyImport(() => import("@/pages/newest"))
+const PreviewPage = lazyImport(() => import("@/pages/preview"))
+const QuickstartPage = lazyImport(() => import("@/pages/quickstart"))
+const SearchPage = lazyImport(() => import("@/pages/search"))
+const SettingsPage = lazyImport(() => import("@/pages/settings"))
+const UserProfilePage = lazyImport(() => import("@/pages/user-profile"))
+const ViewOrderPage = lazyImport(() => import("@/pages/view-order"))
+const ViewSnippetPage = lazyImport(() => import("@/pages/view-snippet"))
+const DevLoginPage = lazyImport(() => import("@/pages/dev-login"))
+
+class ErrorBoundary extends React.Component<
+  { children: React.ReactNode },
+  { hasError: boolean }
+> {
+  constructor(props: { children: React.ReactNode }) {
+    super(props)
+    this.state = { hasError: false }
+  }
+
+  static getDerivedStateFromError() {
+    return { hasError: true }
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return <div>Something went wrong loading the page.</div>
+    }
+    return this.props.children
+  }
+}
+
+function App() {
+  return (
+    <ContextProviders>
+      <ErrorBoundary>
+        <Suspense fallback={<div>Loading...</div>}>
+          <Switch>
+            <Route path="/" component={LandingPage} />
+            <Route path="/editor" component={EditorPage} />
+            <Route path="/quickstart" component={QuickstartPage} />
+            <Route path="/dashboard" component={DashboardPage} />
+            <Route path="/ai" component={AiPage} />
+            <Route path="/newest" component={NewestPage} />
+            <Route path="/settings" component={SettingsPage} />
+            <Route path="/search" component={SearchPage} />
+            <Route path="/authorize" component={AuthenticatePage} />
+            <Route path="/my-orders" component={MyOrdersPage} />
+            <Route path="/orders/:orderId" component={ViewOrderPage} />
+            <Route path="/preview" component={PreviewPage} />
+            <Route path="/dev-login" component={DevLoginPage} />
+            <Route path="/:username" component={UserProfilePage} />
+            <Route path="/:author/:snippetName" component={ViewSnippetPage} />
+          </Switch>
+        </Suspense>
+        <Toaster />
+      </ErrorBoundary>
+    </ContextProviders>
+  )
+}
+
+export default App

package/src/ContextProviders.tsx

@@ -0,0 +1,9 @@
+import { QueryClient, QueryClientProvider } from "react-query"
+
+const queryClient = new QueryClient()
+
+export const ContextProviders = ({ children }: any) => {
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  )
+}

package/src/components/AiChatInterface.tsx

@@ -0,0 +1,221 @@
+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="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/AiChatMessage.tsx

@@ -0,0 +1,86 @@
+import { BotIcon, ChevronDown, Eye, RotateCcw } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { Avatar } from "@/components/ui/avatar"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+export interface AiChatMessage {
+  sender: "user" | "bot"
+  content: string
+  codeVersion?: number
+}
+
+export const AiChatMessage = ({ message }: { message: AiChatMessage }) => {
+  const renderContent = (content: string) => {
+    const parts = content.split(/(```[\s\S]*?(?:```|$))/g)
+    return parts.map((part, index) => {
+      if (part.startsWith("```")) {
+        const isComplete = part.endsWith("```")
+        return (
+          <div
+            key={index}
+            className="bg-gray-100 rounded-md p-2 my-2 text-sm font-mono"
+          >
+            {isComplete
+              ? `Code Version ${message.codeVersion ?? "??"}`
+              : "generating..."}
+          </div>
+        )
+      }
+      return (
+        <p key={index} className="text-xs font-mono whitespace-pre-wrap">
+          {part}
+        </p>
+      )
+    })
+  }
+
+  return (
+    <div
+      className={`flex ${
+        message.sender === "user" ? "justify-end" : "justify-start"
+      }`}
+    >
+      <div
+        className={`max-w-[80%] rounded-lg p-4 ${
+          message.sender === "user" ? "bg-blue-100" : "bg-white"
+        }`}
+      >
+        {message.sender === "bot" && (
+          <div className="flex items-center mb-2">
+            <Avatar className="w-7 h-7 mr-2 flex items-center justify-center bg-black">
+              <BotIcon className="text-white px-1" />
+            </Avatar>
+            <DropdownMenu>
+              <DropdownMenuTrigger>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="h-6 px-2 text-xs"
+                >
+                  version {message.codeVersion}
+                  <ChevronDown className="ml-1 h-3 w-3" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent>
+                <DropdownMenuItem className="text-xs bg-white flex">
+                  <RotateCcw className="mr-1 h-3 w-3" />
+                  Revert to v{message.codeVersion}
+                </DropdownMenuItem>
+                <DropdownMenuItem className="text-xs bg-white flex">
+                  <Eye className="mr-1 h-3 w-3" />
+                  View v{message.codeVersion}
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        )}
+        {renderContent(message.content)}
+      </div>
+    </div>
+  )
+}

package/src/components/Analytics.tsx

@@ -0,0 +1,30 @@
+import { Analytics as VercelAnalytics } from "@vercel/analytics/react"
+import posthog from "posthog-js"
+import CookieConsent from "react-cookie-consent"
+
+posthog.init("phc_htd8AQjSfVEsFCLQMAiUooG4Q0DKBCjqYuQglc9V3Wo", {
+  api_host: "https://us.i.posthog.com",
+  person_profiles: "always",
+})
+
+export const Analytics = () => {
+  return (
+    <div className="absolute bottom-0 left-0 right-0">
+      <VercelAnalytics />
+      {/* <CookieConsent
+        buttonText="Accept"
+        cookieName="cookieConsent"
+        style={{ background: "#2B373B" }}
+        acceptOnScroll
+        buttonStyle={{
+          backgroundColor: "#111",
+          color: "#fff",
+          fontSize: "13px",
+        }}
+        expires={150}
+      >
+        This website uses cookies to enhance the user experience.
+      </CookieConsent> */}
+    </div>
+  )
+}