SVG Preview

\n \n

\n SVG Preview\n

\n );\n}\n\nexport function App() {\n const [token, setToken] = React.useState(() => {\n return localStorage.getItem(\"bearer\") || \"\";\n });\n \n const [anthropicApiKey, setAnthropicApiKey] = React.useState(() => {\n return localStorage.getItem(\"anthropic_api_key\") || \"\";\n });\n \n const [currentSvg, setCurrentSvg] = React.useState(sampleSvg);\n const [showLayout, setShowLayout] = React.useState(\"default\"); // \"default\", \"sideBySide\"\n \n React.useEffect(() => {\n console.log(\"App mounted, token:\", Boolean(token));\n \n // Check window width for responsive layout\n const checkWidth = () => {\n if (window.innerWidth >= 1024) {\n setShowLayout(\"sideBySide\");\n } else {\n setShowLayout(\"default\");\n }\n };\n \n // Set initial value\n checkWidth();\n \n // Add resize listener\n window.addEventListener(\"resize\", checkWidth);\n return () => window.removeEventListener(\"resize\", checkWidth);\n }, []);\n \n const handleSvgUpdate = (svgContent) => {\n console.log(\"SVG updated:\", svgContent.slice(0, 50) + \"...\");\n setCurrentSvg(svgContent);\n };\n \n function handleLogout() {\n localStorage.removeItem(\"bearer\");\n setToken(\"\");\n }\n\n return (\n

SVG Editor

\n {token && (\n \n )}\n

\n \n {token ? (\n showLayout === \"sideBySide\" ? (\n // Side by side layout for larger screens\n

\n \n

\n ) : (\n // Stacked layout for smaller screens\n

\n \n \n

\n )\n ) : (\n \n )}\n

\n );\n}",[],[203,224,230],{"_103":239,"_95":240,"_157":241,"_159":225,"_160":140,"_161":162,"_163":117,"_105":242,"_100":32,"_165":177,"_167":243,"_168":22,"_169":-5,"_170":244,"_99":245},"788ffd96-09b3-11f0-bd40-569c3dd06744","BranchControl.tsx","09f8ea53-674a-44b3-9400-24d31b4aafff",["D",1742932687486],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0?dev\";\nimport { CreateBranch } from \"./CreateBranch.tsx\";\n\ninterface Branch {\n id: string;\n name: string;\n}\n\ninterface BranchControlProps {\n projectId: string;\n projectName: string;\n username: string;\n bearerToken: string;\n branchId: string | undefined;\n setBranchId: (branchId: string) => void;\n}\n\nexport function BranchControl({\n projectId,\n projectName,\n username,\n bearerToken,\n branchId,\n setBranchId,\n}: BranchControlProps) {\n const [branches, setBranches] = useState>([]);\n const [isLoadingBranches, setIsLoadingBranches] = useState(false);\n const [selectedBranchName, setSelectedBranchName] = useState(\"\");\n const [showCreateBranch, setShowCreateBranch] = useState(false);\n\n // Fetch branches when project changes\n useEffect(() => {\n if (!projectId) return;\n\n const fetchBranches = async () => {\n setIsLoadingBranches(true);\n try {\n const response = await fetch(`/api/project-branches?projectId=${projectId}`, {\n headers: {\n \"Authorization\": `Bearer ${bearerToken}`,\n },\n });\n\n if (!response.ok) {\n throw new Error(`Failed to fetch branches: ${response.statusText}`);\n }\n\n const data = await response.json();\n const fetchedBranches = data.branches || [];\n setBranches(fetchedBranches);\n\n // Check if the stored branchId is valid for this project\n const storedBranchIsValid = fetchedBranches.some((branch: Branch) => branch.id === branchId);\n\n // Only set a new branchId if there isn't a valid one already stored\n if (!storedBranchIsValid && fetchedBranches.length > 0) {\n // If branches are loaded and there's a \"main\" branch, select it by default\n const mainBranch = fetchedBranches.find((branch: Branch) => branch.name === \"main\");\n if (mainBranch) {\n setBranchId(mainBranch.id);\n setSelectedBranchName(mainBranch.name);\n } else {\n // Otherwise select the first branch\n setBranchId(fetchedBranches[0].id);\n setSelectedBranchName(fetchedBranches[0].name);\n }\n } else if (storedBranchIsValid) {\n // Set the selected branch name based on the stored branchId\n const selectedBranch = fetchedBranches.find((branch: Branch) => branch.id === branchId);\n if (selectedBranch) {\n setSelectedBranchName(selectedBranch.name);\n }\n }\n } catch (error) {\n console.error(\"Error fetching branches:\", error);\n } finally {\n setIsLoadingBranches(false);\n }\n };\n\n fetchBranches();\n }, [projectId, bearerToken, branchId, setBranchId]);\n\n // Handle branch selection change\n const handleBranchChange = (e: React.ChangeEvent) => {\n const newBranchId = e.target.value;\n setBranchId(newBranchId);\n\n // Update the selected branch name\n const selectedBranch = branches.find(branch => branch.id === newBranchId);\n if (selectedBranch) {\n setSelectedBranchName(selectedBranch.name);\n }\n };\n\n // Handle branch creation success\n const handleBranchCreated = (newBranchId: string) => {\n // Set the new branch as the selected branch\n setBranchId(newBranchId);\n\n // Close the create branch form\n setShowCreateBranch(false);\n\n // Refresh the branches list\n if (projectId) {\n const fetchBranches = async () => {\n try {\n const response = await fetch(`/api/project-branches?projectId=${projectId}`, {\n headers: {\n \"Authorization\": `Bearer ${bearerToken}`,\n },\n });\n\n if (!response.ok) {\n throw new Error(`Failed to fetch branches: ${response.statusText}`);\n }\n\n const data = await response.json();\n const fetchedBranches = data.branches || [];\n setBranches(fetchedBranches);\n\n // Update the selected branch name\n const selectedBranch = fetchedBranches.find((branch: Branch) => branch.id === newBranchId);\n if (selectedBranch) {\n setSelectedBranchName(selectedBranch.name);\n }\n } catch (error) {\n console.error(\"Error fetching branches:\", error);\n }\n };\n\n fetchBranches();\n }\n };\n\n // Construct the Val Town URL\n const getValTownUrl = () => {\n if (!username || !projectName || !selectedBranchName) return \"#\";\n return `https://val.town/x/${username}/${projectName}/branch/${selectedBranchName}/code`;\n };\n\n return (\n

\n {isLoadingBranches\n ? (\n

\n Loading branches...\n

\n )\n : (\n <>\n

\n \n {branches.length === 0 ? : (\n branches.map(branch => (\n \n ))\n )}\n \n setShowCreateBranch(true)}\n className=\"ml-1 p-1 rounded-lg text-xs bg-gray-100 hover:bg-gray-200 flex items-center justify-center w-6 h-6\"\n title=\"Create new branch\"\n >\n \n \n \n \n \n

\n \n \n \n \n \n \n Open\n \n \n )}\n

\n\n {/* Create Branch Form Popup */}\n {showCreateBranch && (\n

\n setShowCreateBranch(false)}\n />\n

\n )}\n

\n );\n}",[],[203,224,240],{"_103":247,"_95":248,"_157":249,"_159":225,"_160":140,"_161":250,"_163":117,"_105":251,"_100":195,"_165":177,"_167":252,"_168":22,"_169":-5,"_170":253,"_99":254},"32089df4-09b5-11f0-aeb8-569c3dd06744","Chat.tsx","627688a0-ee3f-48c0-8138-2ccf370d6046",14,["D",1742933428154],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport { useChat } from \"https://esm.sh/@ai-sdk/react?dev&deps=react@18.2.0&react-dom@18.2.0\";\nimport { useLocalStorage } from \"https://esm.sh/react-use?dev&deps=react@18.2.0&react-dom@18.2.0\";\nimport React, { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0?dev\";\nimport { playBellSound } from \"../utils/soundEffects.ts\";\nimport { ImageUpload } from \"./ImageUpload.tsx\";\nimport { MessagePart } from \"./MessagePart.tsx\";\nimport { SvgEditor } from \"./SvgEditor.tsx\";\nimport { LoadingSpinner, MessageTimer, calculateCost } from \"./ChatUtils.tsx\";\n\nexport function Chat({\n project,\n bearerToken,\n anthropicApiKey,\n setProject,\n}: {\n project: any;\n bearerToken: string;\n anthropicApiKey: string;\n setProject: (project: any) => void;\n}) {\n console.log(\"Chat component rendered\");\n \n const [usages, setUsages] = useState>({});\n const [soundEnabled, setSoundEnabled] = useLocalStorage(\"soundEnabled\", true);\n const [images, setImages] = useState<(string | null)[]>([]);\n const [currentSvg, setCurrentSvg] = useState(\"\");\n const [showSvgEditor, setShowSvgEditor] = useState(false);\n\n // Only track message end times - we'll use message.createdAt for start times\n const [messageEndTimes, setMessageEndTimes] = useState>({});\n\n // State to detect if the user is on a mobile device\n const [isMobile, setIsMobile] = useState(false);\n\n // Check if user is on mobile when component mounts\n useEffect(() => {\n const checkMobile = () => {\n const userAgent = navigator.userAgent || navigator.vendor || (window as any).opera;\n const mobileRegex = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i;\n setIsMobile(mobileRegex.test(userAgent.toLowerCase()));\n };\n\n checkMobile();\n\n // Also check on resize, as user might switch device orientation\n window.addEventListener(\"resize\", checkMobile);\n return () => window.removeEventListener(\"resize\", checkMobile);\n }, []);\n\n // Custom stop handler reference to handle stopping timers and spinners\n const customStopRef = useRef<(() => void) | null>(null);\n\n const {\n messages,\n error,\n input,\n handleInputChange,\n handleSubmit: originalHandleSubmit,\n stop,\n status,\n } = useChat({\n api: \"/api/send-message\",\n body: {\n project,\n anthropicApiKey,\n images: images\n .filter((img): img is string => {\n // Make sure it's a string and a valid data URL\n const isValid = typeof img === \"string\" && img.startsWith(\"data:\");\n if (!isValid && img !== null) {\n console.warn(\"Invalid image format:\", img?.substring(0, 50) + \"...\");\n }\n return isValid;\n })\n // Just pass the data URL directly\n .map(img => ({ url: img })),\n },\n headers: {\n \"Authorization\": `Bearer ${bearerToken}`,\n },\n onFinish: (message, options) => {\n // When message finishes, update usage data\n setUsages(prev => ({\n ...prev,\n [message.id]: options.usage,\n }));\n\n // Record the end time\n setMessageEndTimes(prev => ({\n ...prev,\n [message.id]: Date.now(),\n }));\n\n // Play notification sound when message is finished\n if (soundEnabled) {\n playBellSound().catch(error => {\n console.log(\"Error playing bell sound:\", error);\n });\n }\n },\n });\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n const validImages = images.filter((img): img is string => typeof img === \"string\");\n console.log(\"Submitting with images:\", validImages);\n if (input.trim() || validImages.length > 0) {\n originalHandleSubmit(e);\n setImages([]);\n }\n };\n\n const running = status === \"streaming\" || status === \"submitted\";\n\n // Keep track of the most recent assistant message that's still streaming\n const pendingMessageId = React.useMemo(() => {\n if (!running) return null;\n // Find the most recent assistant message that doesn't have an end time\n const pendingMessages = messages\n .filter(msg => msg.role === \"assistant\" && !messageEndTimes[msg.id]);\n return pendingMessages.length > 0 ? pendingMessages[pendingMessages.length - 1].id : null;\n }, [messages, messageEndTimes, running]);\n\n // Custom stop handler that also handles UI elements (timer and spinner)\n const handleStop = React.useCallback(() => {\n // Call the original stop function\n stop();\n\n // Also mark any pending messages as ended to stop timers and spinners\n if (pendingMessageId) {\n setMessageEndTimes(prev => ({\n ...prev,\n [pendingMessageId]: Date.now(),\n }));\n\n // Play notification sound when message is manually stopped\n if (soundEnabled) {\n playBellSound().catch(error => {\n console.log(\"Error playing bell sound:\", error);\n });\n }\n }\n }, [stop, pendingMessageId, soundEnabled]);\n\n // Update the custom stop function ref when the dependencies change\n React.useEffect(() => {\n customStopRef.current = handleStop;\n }, [handleStop]);\n\n // Show a warning message if no anthropicApiKey is provided\n const showAnthropicKeyWarning = !anthropicApiKey;\n\n // Handle SVG change from the editor\n const handleSvgChange = (svgString: string) => {\n console.log(\"SVG changed in Chat component\");\n setCurrentSvg(svgString);\n \n // Create a custom event to share the SVG with other components\n const event = new CustomEvent('svgUpdate', { \n detail: { svgContent: svgString } \n });\n window.dispatchEvent(event);\n };\n\n // Toggle SVG editor visibility\n const toggleSvgEditor = () => {\n setShowSvgEditor(!showSvgEditor);\n };\n\n return (\n

\n setSoundEnabled(!soundEnabled)}\n title={soundEnabled ? \"Mute notification sound\" : \"Enable notification sound\"}\n >\n {soundEnabled ? \"🔔\" : \"🔕\"}\n \n \n \n {showSvgEditor ? \"Hide Editor\" : \"Show Editor\"}\n \n \n

\n \n \n {running ? \"AI is thinking...\" : \"Ready\"}\n \n

\n {showAnthropicKeyWarning && (\n

Anthropic API Key Missing

Please log out and add your Anthropic API key to use this app.

\n )}\n \n {/* SVG Editor Section */}\n {showSvgEditor && (\n

\n \n

\n )}\n \n

\n {messages.map((message) => (\n \n

\n {message.parts?.map((part, index) => (\n

\n \n

\n ))}\n

\n {/* Show timer for assistant messages using createdAt for start time */}\n {message.role === \"assistant\" && message.createdAt && (\n \n )}\n {usages[message.id]\n ? (\n

\n {calculateCost(usages[message.id])}\n

\n                      {JSON.stringify(usages[message.id], null, 2)}\n

\n )\n : undefined}\n {/* Show loading spinner for messages without an end time and only if not manually stopped */}\n {message.role === \"assistant\" && !messageEndTimes[message.id] && running && }\n

\n ))}\n {error\n ? (\n

{error.stack}

\n )\n : undefined}\n

\n\n \n {(images.length > 0 || !running) && }\n\n

\n {\n handleInputChange(e as any);\n }}\n onKeyDown={(e) => {\n // Only perform Enter key submission on desktop, not on mobile\n if (e.key === \"Enter\" && !e.shiftKey && !isMobile) {\n e.preventDefault();\n if (input.trim() || images.filter(Boolean).length > 0) {\n handleSubmit(e as any);\n }\n }\n }}\n rows={3}\n style={{\n WebkitAppearance: \"none\", /* Ensures resize handle works on Safari mobile */\n resize: \"vertical\", /* Explicitly set resize to vertical */\n }}\n disabled={running}\n />\n\n {!running && (\n {\n const fileInput = document.querySelector(\"input[type=\\\"file\\\"]\");\n if (fileInput) {\n fileInput.click();\n }\n }}\n title=\"Attach images\"\n >\n 📎\n \n )}\n

\n\n \n {running ? \"Thinking...\" : \"Send\"}\n \n\n {running && (\n {\n if (customStopRef.current) {\n customStopRef.current();\n }\n }}\n className=\"px-4 py-2 bg-red-500 hover:bg-red-600 text-white rounded-lg\"\n >\n Stop\n \n )}\n

\n \n

\n );\n}",[],[203,224,248],{"_103":256,"_95":257,"_157":258,"_159":225,"_160":140,"_161":259,"_163":117,"_105":260,"_100":162,"_165":196,"_167":261,"_168":22,"_169":-5,"_170":262,"_99":263},"14e4dc34-09b9-11f0-ba2a-569c3dd06744","ChatUtils.tsx","595f719e-10be-4a49-9809-7ec949a87995",31,["D",1742935097251],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\n// Sample SVG editing questions for quick prompts\nexport const sampleQuestions = [\n \"Can you add a moon to the landscape scene?\",\n \"How can I change the sun's color to purple?\",\n \"Add some stars to the sky\",\n \"Make the mountains taller\",\n \"Add a small cabin near the tree\"\n];\n\n// Helper to handle quick question selection\nexport function handleQuickQuestionHelper(question, setInput, originalHandleSubmit) {\n setInput(question);\n // Submit automatically after setting the input\n setTimeout(() => {\n originalHandleSubmit({\n preventDefault: () => {},\n target: document.querySelector('form')\n });\n }, 100);\n}\n\n// Component to display chat messages\nexport function ChatMessagesList({ messages, error, running, messageEndTimes }) {\n return (\n

\n {messages.map((message) => (\n \n {/* Display message content */}\n {typeof message.content === 'string' ? (\n

\n {message.content}\n

\n ) : (\n

\n {message.parts?.map((part, index) => (\n

\n {part.text}\n

\n ))}\n

\n )}\n \n {/* Show loading spinner if still streaming */}\n {message.role === \"assistant\" && !messageEndTimes[message.id] && running && (\n \n )}\n

\n ))}\n {error && (\n \n )}\n \n );\n}\n\n// Loading indicator component\nexport function MessageLoadingIndicator() {\n return (\n

\n \n \n Thinking...\n \n

\n );\n}\n\n// Error message component\nexport function ErrorMessage({ error }) {\n return (\n

Error

{error.toString()}

\n );\n}\n\n// Calculate cost from usage data (from original ChatUtils.tsx)\nexport function calculateCost(usage) {\n if (!usage) return \"No usage data\";\n \n // Claude pricing per million tokens (approximate)\n const INPUT_COST_PER_MILLION = 15.00; // $15 per million input tokens\n const OUTPUT_COST_PER_MILLION = 75.00; // $75 per million output tokens\n \n const inputTokens = usage.input_tokens || 0;\n const outputTokens = usage.output_tokens || 0;\n \n const inputCost = (inputTokens / 1000000) * INPUT_COST_PER_MILLION;\n const outputCost = (outputTokens / 1000000) * OUTPUT_COST_PER_MILLION;\n const totalCost = inputCost + outputCost;\n \n return `Cost: $${totalCost.toFixed(6)} (${inputTokens} in, ${outputTokens} out)`;\n}\n\n// Message timer component (from original ChatUtils.tsx)\nexport function MessageTimer({ createdAt, endTime, isStopped = false }) {\n const [elapsedTime, setElapsedTime] = React.useState(0);\n const intervalRef = React.useRef(null);\n \n React.useEffect(() => {\n // If we have both start and end time, calculate fixed duration\n if (createdAt && endTime) {\n setElapsedTime((endTime - new Date(createdAt).getTime()) / 1000);\n return;\n }\n \n // If stopped but no end time, don't update\n if (isStopped) {\n return;\n }\n \n // Otherwise start a timer that updates every second\n if (createdAt && !endTime && !isStopped) {\n const startTime = new Date(createdAt).getTime();\n \n // Update immediately\n setElapsedTime((Date.now() - startTime) / 1000);\n \n // Then set interval\n intervalRef.current = setInterval(() => {\n setElapsedTime((Date.now() - startTime) / 1000);\n }, 1000);\n \n // Clean up interval on unmount\n return () => {\n if (intervalRef.current) {\n clearInterval(intervalRef.current);\n }\n };\n }\n }, [createdAt, endTime, isStopped]);\n \n // Format time as seconds or minutes:seconds\n const formattedTime = elapsedTime >= 60\n ? `${Math.floor(elapsedTime / 60)}m ${Math.floor(elapsedTime % 60)}s`\n : `${Math.floor(elapsedTime)}s`;\n \n return (\n

\n ⏱️\n {formattedTime}\n

\n );\n}\n\n// Loading spinner component (from original ChatUtils.tsx)\nexport function LoadingSpinner() {\n return (\n

\n \n Processing...\n

\n );\n}",[],[203,224,257],{"_103":265,"_95":266,"_157":267,"_159":225,"_160":140,"_161":162,"_163":117,"_105":268,"_100":32,"_165":177,"_167":269,"_168":22,"_169":-5,"_170":270,"_99":271},"78901704-09b3-11f0-bd40-569c3dd06744","CreateBranch.tsx","20301784-ffc2-46be-9c01-28f3d69702c7",["D",1742932687486],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport React, { useState } from \"https://esm.sh/react@18.2.0?dev\";\n\ninterface CreateBranchProps {\n projectId: string;\n bearerToken: string;\n onBranchCreated: (branchId: string) => void;\n onCancel: () => void;\n}\n\nexport function CreateBranch({\n projectId,\n bearerToken,\n onBranchCreated,\n onCancel,\n}: CreateBranchProps) {\n const [branchName, setBranchName] = useState(\"\");\n const [isCreating, setIsCreating] = useState(false);\n const [error, setError] = useState(null);\n\n // Validate branch name (only letters, numbers, and dashes)\n const isValidBranchName = (name: string) => {\n const branchNameRegex = /^[a-zA-Z0-9-]+$/;\n return branchNameRegex.test(name);\n };\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n \n // Validate branch name\n if (!branchName.trim()) {\n setError(\"Branch name cannot be empty\");\n return;\n }\n \n if (!isValidBranchName(branchName)) {\n setError(\"Branch name can only contain letters, numbers, and dashes\");\n return;\n }\n \n setIsCreating(true);\n setError(null);\n \n try {\n const response = await fetch(\"/api/create-branch\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"Authorization\": `Bearer ${bearerToken}`,\n },\n body: JSON.stringify({\n projectId,\n branchName,\n }),\n });\n \n const data = await response.json();\n \n if (!response.ok) {\n throw new Error(data.error || \"Failed to create branch\");\n }\n \n // Call the callback with the new branch ID\n onBranchCreated(data.branch.id);\n } catch (err) {\n setError(err instanceof Error ? err.message : \"An error occurred\");\n } finally {\n setIsCreating(false);\n }\n };\n \n return (\n

Create New Branch

\n \n \n

\n );\n}",[],[203,224,266],{"_103":273,"_95":274,"_157":275,"_159":225,"_160":140,"_161":162,"_163":117,"_105":276,"_100":32,"_165":177,"_167":277,"_168":22,"_169":-5,"_170":278,"_99":279},"78901bc8-09b3-11f0-bd40-569c3dd06744","ImageUpload.tsx","2e554224-d870-4b13-af41-1380262d37c7",["D",1742932687486],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport React, { useRef, useState } from \"https://esm.sh/react@18.2.0?dev\";\n\n// Maximum number of images that can be uploaded\nexport const PROMPT_IMAGE_LIMIT = 5;\n\ninterface ImageUploadProps {\n images: (string | null)[];\n setImages: (images: (string | null)[]) => void;\n}\n\nexport function ImageUpload({ images, setImages }: ImageUploadProps) {\n const fileInputRef = useRef(null);\n const [isDragging, setIsDragging] = useState(false);\n\n // Handle file selection\n const handleFileChange = (e: React.ChangeEvent) => {\n if (e.target.files) {\n processFiles(Array.from(e.target.files));\n }\n };\n\n // Process the selected files\n const processFiles = async (files: File[]) => {\n // Filter for image files only\n const imageFiles = files.filter(file => file.type.startsWith('image/'));\n \n // Limit the number of images\n const filesToProcess = imageFiles.slice(0, PROMPT_IMAGE_LIMIT - images.filter(Boolean).length);\n \n if (filesToProcess.length === 0) return;\n\n // Add null placeholders for loading state\n const newImages = [...images, ...Array(filesToProcess.length).fill(null)];\n setImages(newImages);\n\n // Process each file\n const processedImages = await Promise.all(\n filesToProcess.map(async (file) => {\n return await readFileAsDataURL(file);\n })\n );\n\n // Replace null placeholders with actual images\n const updatedImages = [...images];\n processedImages.forEach((dataUrl, index) => {\n updatedImages[images.length + index] = dataUrl;\n });\n \n setImages(updatedImages.slice(0, PROMPT_IMAGE_LIMIT));\n };\n\n // Convert file to data URL\n const readFileAsDataURL = (file: File): Promise => {\n return new Promise((resolve, reject) => {\n const reader = new FileReader();\n reader.onload = () => {\n const result = reader.result as string;\n console.log(\"Image loaded, size:\", result.length, \"bytes\");\n resolve(result);\n };\n reader.onerror = reject;\n reader.readAsDataURL(file);\n });\n };\n\n // Handle drag events\n const handleDragEnter = (e: React.DragEvent) => {\n e.preventDefault();\n e.stopPropagation();\n setIsDragging(true);\n };\n\n const handleDragLeave = (e: React.DragEvent) => {\n e.preventDefault();\n e.stopPropagation();\n setIsDragging(false);\n };\n\n const handleDragOver = (e: React.DragEvent) => {\n e.preventDefault();\n e.stopPropagation();\n };\n\n const handleDrop = (e: React.DragEvent) => {\n e.preventDefault();\n e.stopPropagation();\n setIsDragging(false);\n \n if (e.dataTransfer.files) {\n processFiles(Array.from(e.dataTransfer.files));\n }\n };\n\n // Handle removing an image\n const removeImage = (index: number) => {\n const newImages = [...images];\n newImages.splice(index, 1);\n setImages(newImages);\n };\n\n // Check if we've reached the image limit\n const isAtLimit = images.filter(Boolean).length >= PROMPT_IMAGE_LIMIT;\n\n return (\n

\n {/* Image previews */}\n {images.length > 0 && (\n

\n {images.map((image, index) => (\n

\n {image ? (\n

\n removeImage(index)}\n title=\"Remove image\"\n >\n ×\n \n

\n ) : (\n

\n )}\n

\n ))}\n

\n )}\n\n {/* Upload button and drag area */}\n {!isAtLimit && (\n fileInputRef.current?.click()}\n onDragEnter={handleDragEnter}\n onDragLeave={handleDragLeave}\n onDragOver={handleDragOver}\n onDrop={handleDrop}\n >\n \n

\n {isDragging ? (\n \"Drop images here\"\n ) : (\n <>\n Upload images or drag and drop\n

\n {images.filter(Boolean).length}/{PROMPT_IMAGE_LIMIT} images\n

\n \n )}\n

\n )}\n

\n );\n}\n\n// Component to display images in messages\nexport function ImagePreview({ images }: { images: string[] }) {\n const [expandedImage, setExpandedImage] = useState(null);\n\n if (!images || images.length === 0) return null;\n\n return (\n

\n {images.map((image, index) => (\n

\n setExpandedImage(image)}\n />\n

\n ))}\n

\n\n {/* Modal for expanded image */}\n {expandedImage && (\n

setExpandedImage(null)}\n >\n

\n \n

\n )}\n

\n );\n}",[],[203,224,274],{"_103":281,"_95":282,"_157":283,"_159":225,"_160":140,"_161":284,"_163":117,"_105":285,"_100":162,"_165":177,"_167":286,"_168":22,"_169":-5,"_170":287,"_99":288},"e6d86cd2-09b5-11f0-8950-569c3dd06744","Login.tsx","e4da71b0-2ba0-47b8-ae8e-d63ef8eb5bda",21,["D",1742933731507],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\nexport function Login() {\n const [bearerToken, setBearerToken] = React.useState(\"\");\n const [anthropicApiKey, setAnthropicApiKey] = React.useState(\"\");\n\n const handleLogin = () => {\n if (bearerToken) {\n localStorage.setItem(\"bearer\", bearerToken);\n if (anthropicApiKey) {\n localStorage.setItem(\"anthropic_api_key\", anthropicApiKey);\n }\n window.location.reload(); // Force reload to apply login\n }\n };\n\n return (\n

Login

\n \n

\n \n \n Val Town API Token\n \n {\" \"}(with projects:write and users:read permission)\n \n setBearerToken(e.target.value)}\n placeholder=\"vtwn-xxxx\"\n autoComplete=\"off\"\n style={{ \n padding: '12px', \n borderRadius: '8px', \n border: '1px solid #d1d5db',\n outline: 'none',\n width: '100%'\n }}\n />\n

\n \n

\n Anthropic API Key\n setAnthropicApiKey(e.target.value)}\n placeholder=\"sk-ant-xxxxx\"\n autoComplete=\"off\"\n style={{ \n padding: '12px', \n borderRadius: '8px', \n border: '1px solid #d1d5db',\n outline: 'none',\n width: '100%'\n }}\n />\n

\n \n \n Login\n \n

\n );\n}",[],[203,224,282],{"_103":290,"_95":291,"_157":292,"_159":225,"_160":140,"_161":162,"_163":117,"_105":293,"_100":32,"_165":177,"_167":294,"_168":22,"_169":-5,"_170":295,"_99":296},"789026a4-09b3-11f0-bd40-569c3dd06744","MessagePart.tsx","43f7b533-242c-4d57-aaf0-606addd04fdd",["D",1742932687486],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport { type Message } from \"https://esm.sh/@ai-sdk/react?dev&deps=react@18.2.0&react-dom@18.2.0\";\nimport ReactMarkdown from \"https://esm.sh/react-markdown?dev&deps=react@18.2.0&react-dom@18.2.0\";\nimport { ImagePreview } from \"./ImageUpload.tsx\";\n\nexport function MessagePart({ part }: { part: NonNullable[number] }) {\n if (part.type === \"text\") return {part.text};\n if (part.type === \"reasoning\")\n return (\n

\n Reasoning...\n

\n {part.reasoning}\n {part.details && part.details.map((detail, index) => (\n

\n {detail.text}\n

\n ))}\n

\n );\n if (part.type === \"tool-invocation\") {\n let { step, state, toolName, args } = part.toolInvocation;\n \n // Properly conjugate command verbs to present participle form\n const getCommandVerb = (command: string): string => {\n switch (command) {\n case \"view\": return \"viewing\";\n case \"create\": return \"creating\";\n case \"str_replace\": return \"replacing\";\n case \"insert\": return \"inserting\";\n case \"undo_edit\": return \"undoing edit\";\n default: return command + \"ing\"; // Fallback for unknown commands\n }\n };\n \n let name = toolName === \"str_replace_editor\"\n ? getCommandVerb(args.command) + \" \" + args.path + (args.view_range ?? \"\")\n : toolName;\n return (\n

\n {name}\n

\n          {JSON.stringify(part.toolInvocation, null, 2)}\n

\n );\n }\n if (part.type === \"source\") {\n return

TODO Source: {JSON.stringify(part.source)}

;\n }\n if (part.type === \"file\") {\n return (\n

{atob(part.data)}

\n );\n }\n if (part.type === \"image\") {\n // Handle both formats: {image: {url: string}} and {image: string}\n const imageUrl = typeof part.image === 'string' \n ? part.image \n : part.image.url || (part.image as any).source?.url;\n \n return (\n

\n $\"Uploaded$ \n

\n );\n }\n // Handle multiple images in a single part\n if (part.type === \"images\") {\n return img.url)} />;\n }\n}",[],[203,224,291],{"_103":298,"_95":299,"_157":300,"_159":225,"_160":140,"_161":162,"_163":117,"_105":301,"_100":32,"_165":177,"_167":302,"_168":22,"_169":-5,"_170":303,"_99":304},"78902a5a-09b3-11f0-bd40-569c3dd06744","Projects.tsx","a602c7b7-7bcd-4068-95ba-d2f6711e11c7",["D",1742932687486],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0?dev\";\n\n// Component for the loading spinner\nconst LoadingSpinner = () => (\n

\n);\n\nasync function loader({ bearerToken }: { bearerToken: string }) {\n const data = await (await fetch(\"/api/projects-loader\", {\n headers: {\n \"Authorization\": \"Bearer \" + bearerToken,\n },\n })).json();\n return data;\n}\n\nexport function Projects({ bearerToken, setProject }: { bearerToken: string; setProject: any }) {\n const [loaderData, setLoaderData] = useState();\n const [isLoading, setIsLoading] = useState(true);\n\n useEffect(\n () => {\n setIsLoading(true);\n loader({ bearerToken })\n .then(setLoaderData)\n .finally(() => setIsLoading(false));\n },\n [],\n );\n\n return (\n

\n {isLoading ? (\n
\n Loading projects\n
\n
\n ) : loaderData?.profile?.username ? (\n <>\n \n @{loaderData?.profile?.username}\n \n 's Projects\n \n ) : (\n \"Your Projects\"\n )}\n

\n \n {isLoading ? (\n \n ) : (\n loaderData?.projects?.map((p: any) => (\n setProject({...p, username: loaderData?.profile?.username})}\n >\n

{p.name}

\n ))\n )}\n

\n );\n}",[],[203,224,299],{"_103":306,"_95":307,"_157":308,"_159":225,"_160":140,"_161":309,"_163":117,"_105":310,"_100":32,"_165":196,"_167":311,"_168":22,"_169":-5,"_170":312,"_99":313},"0289ed7c-09b9-11f0-a09a-569c3dd06744","RealChat.tsx","0289ee3a-09b9-11f0-a09a-569c3dd06744",30,["D",1742935066457],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { useChat } from \"https://esm.sh/@ai-sdk/react?deps=react@18.2.0&react-dom@18.2.0\";\nimport { ChatMessagesList, handleQuickQuestionHelper, sampleQuestions } from \"./ChatUtils.tsx\";\n\n// Integration with Claude AI and message display\nexport function RealChat({ bearerToken, anthropicApiKey, onSvgUpdate }) {\n const [images, setImages] = React.useState([]);\n const [messageEndTimes, setMessageEndTimes] = React.useState({});\n \n // Hardcoded project ID for the current svgEditor project\n const projectId = \"1ba372e0-09ac-11f0-bac1-569c3dd06744\";\n const branchId = \"788cd12a-09b3-11f0-bd40-569c3dd06744\"; // svg-preview-feature branch\n \n // Auto-detect current project information\n React.useEffect(() => {\n // Get the current URL\n const url = window.location.href;\n console.log(\"Current URL:\", url);\n \n // Log the detected project ID and branch\n console.log(\"Using project ID:\", projectId);\n console.log(\"Using branch ID:\", branchId);\n }, []);\n\n const {\n messages,\n error,\n input,\n handleInputChange,\n handleSubmit: originalHandleSubmit,\n setInput,\n stop,\n status,\n } = useChat({\n api: \"/api/send-message\",\n body: {\n project: { id: projectId },\n branchId: branchId,\n anthropicApiKey,\n images: [],\n },\n headers: {\n \"Authorization\": `Bearer ${bearerToken}`,\n },\n onFinish: (message) => {\n // When message finishes, record the end time\n setMessageEndTimes(prev => ({\n ...prev,\n [message.id]: Date.now(),\n }));\n \n // Check if the message contains SVG code\n if (message.content) {\n const svgMatch = message.content.match(//);\n if (svgMatch) {\n // Extract SVG content and update parent component\n onSvgUpdate(svgMatch[0]);\n }\n }\n },\n });\n\n const handleSubmit = (e) => {\n e.preventDefault();\n if (input.trim()) {\n originalHandleSubmit(e);\n }\n };\n \n const handleQuickQuestion = (question) => {\n handleQuickQuestionHelper(question, setInput, originalHandleSubmit);\n };\n\n const running = status === \"streaming\" || status === \"submitted\";\n\n return (\n

\n {/* Quick questions section */}\n {messages.length === 0 && (\n

Start with a sample question:

\n {sampleQuestions.map((question, index) => (\n handleQuickQuestion(question)}\n style={{\n backgroundColor: '#e0f2fe',\n border: '1px solid #bae6fd',\n borderRadius: '16px',\n padding: '4px 12px',\n fontSize: '14px',\n cursor: 'pointer'\n }}\n >\n {question}\n \n ))}\n

\n )}\n \n {/* Messages area */}\n \n \n {/* Input area */}\n \n

\n );\n}",[],[203,224,307],{"_103":315,"_95":316,"_157":317,"_159":225,"_160":140,"_161":318,"_163":117,"_105":319,"_100":162,"_165":196,"_167":320,"_168":22,"_169":-5,"_170":321,"_99":322},"5a40080c-09b5-11f0-b99b-569c3dd06744","SvgEditor.tsx","35146331-edf5-457e-a184-577929dd2230",15,["D",1742933495622],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport React, { useState, useRef, useEffect } from \"https://esm.sh/react@18.2.0?dev\";\n\ninterface SvgEditorProps {\n initialSvg?: string;\n onSvgChange?: (svgString: string) => void;\n}\n\n// SVG templates\nconst TEMPLATES = {\n wideIcon: {\n name: \"Wide Icon (352x132)\",\n svg: ``,\n },\n squareIcon: {\n name: \"Square App Icon (512x512)\",\n svg: ``,\n },\n landscape: {\n name: \"Landscape Scene\",\n svg: ``,\n },\n blank: {\n name: \"Blank Canvas\",\n svg: ``,\n }\n};\n\nexport function SvgEditor({ initialSvg, onSvgChange }: SvgEditorProps) {\n const [svgContent, setSvgContent] = useState(initialSvg || TEMPLATES.landscape.svg);\n const [editMode, setEditMode] = useState<'source' | 'visual'>('visual');\n const [selectedTemplate, setSelectedTemplate] = useState('landscape');\n const svgRef = useRef(null);\n const textareaRef = useRef(null);\n \n // Emit initial SVG on component mount\n useEffect(() => {\n console.log(\"SvgEditor mounted, emitting initial SVG\");\n if (onSvgChange) {\n onSvgChange(svgContent);\n \n // Also dispatch a global event for any other components that might need it\n const event = new CustomEvent('svgUpdate', { \n detail: { svgContent: svgContent } \n });\n window.dispatchEvent(event);\n }\n }, []);\n \n // Handle template change\n const handleTemplateChange = (templateKey: string) => {\n if (TEMPLATES[templateKey as keyof typeof TEMPLATES]) {\n setSelectedTemplate(templateKey);\n const newSvg = TEMPLATES[templateKey as keyof typeof TEMPLATES].svg;\n setSvgContent(newSvg);\n if (onSvgChange) {\n onSvgChange(newSvg);\n \n // Also dispatch a global event\n const event = new CustomEvent('svgUpdate', { \n detail: { svgContent: newSvg } \n });\n window.dispatchEvent(event);\n }\n }\n };\n\n // Handle SVG code editing\n const handleCodeChange = (e: React.ChangeEvent) => {\n const newContent = e.target.value;\n setSvgContent(newContent);\n if (onSvgChange) {\n onSvgChange(newContent);\n \n // Also dispatch a global event\n const event = new CustomEvent('svgUpdate', { \n detail: { svgContent: newContent } \n });\n window.dispatchEvent(event);\n }\n };\n\n // Handle SVG file upload\n const handleFileUpload = (e: React.ChangeEvent) => {\n const file = e.target.files?.[0];\n if (!file) return;\n\n // Only accept SVG files\n if (!file.type.includes('svg')) {\n alert('Please upload an SVG file');\n return;\n }\n\n const reader = new FileReader();\n reader.onload = (event) => {\n const content = event.target?.result as string;\n setSvgContent(content);\n setSelectedTemplate('');\n if (onSvgChange) {\n onSvgChange(content);\n \n // Also dispatch a global event\n const event = new CustomEvent('svgUpdate', { \n detail: { svgContent: content } \n });\n window.dispatchEvent(event);\n }\n };\n reader.readAsText(file);\n };\n\n // Handle downloading the SVG\n const handleDownload = () => {\n const blob = new Blob([svgContent], { type: 'image/svg+xml' });\n const url = URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.href = url;\n a.download = 'icon.svg';\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n URL.revokeObjectURL(url);\n };\n\n // Adjust textarea height to match content\n useEffect(() => {\n if (editMode === 'source' && textareaRef.current) {\n textareaRef.current.style.height = 'auto';\n textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;\n }\n }, [svgContent, editMode]);\n\n return (\n

\n \n \n \n \n Upload SVG\n \n

\n \n

\n \n \n

\n \n

\n {editMode === 'visual' ? (\n

\n ) : (\n \n )}\n

\n );\n}",[],[203,224,316],{"_103":324,"_95":325,"_157":326,"_159":225,"_160":140,"_161":327,"_163":117,"_105":328,"_100":195,"_165":196,"_167":329,"_168":22,"_169":-5,"_170":330,"_99":331},"008b1176-09b5-11f0-9a62-569c3dd06744","SvgPreview.tsx","95f3bda0-09b3-11f0-a8eb-569c3dd06744",13,["D",1742933345124],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0?dev\";\n\ninterface SvgPreviewProps {\n currentSvg: string;\n onSvgChange: (svgString: string) => void;\n}\n\nexport function SvgPreview({ currentSvg, onSvgChange }: SvgPreviewProps) {\n // Hard-coded sample SVG (fallback if loading fails)\n const hardcodedSampleSvg = ``;\n\n const [sampleSvg, setSampleSvg] = useState(hardcodedSampleSvg);\n const [displaySvg, setDisplaySvg] = useState(hardcodedSampleSvg);\n const [selectedSvg, setSelectedSvg] = useState<\"current\" | \"sample\">(\"sample\");\n \n // Update the displayed SVG when the current SVG changes\n useEffect(() => {\n if (currentSvg && selectedSvg === \"current\") {\n setDisplaySvg(currentSvg);\n }\n }, [currentSvg, selectedSvg]);\n\n // Toggle between current SVG and sample SVG\n const toggleSvgSource = () => {\n console.log(\"Toggling SVG source\");\n if (selectedSvg === \"current\") {\n setSelectedSvg(\"sample\");\n setDisplaySvg(sampleSvg);\n onSvgChange(sampleSvg);\n } else {\n setSelectedSvg(\"current\");\n if (currentSvg) {\n setDisplaySvg(currentSvg);\n onSvgChange(currentSvg);\n }\n }\n };\n\n return (\n

SVG Preview

\n \n

\n {selectedSvg === \"current\" ? \"Showing current SVG from editor\" : \"Showing sample SVG\"}\n

\n );\n}",[],[203,224,325],[203,224],{"_103":334,"_95":335,"_157":336,"_159":204,"_160":140,"_161":162,"_163":117,"_105":337,"_100":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":338,"_99":347},"7890712c-09b3-11f0-bd40-569c3dd06744","utils","7660c675-bdca-446f-bb4e-0757254d6c36",["D",1742932687486],[339],{"_103":340,"_95":341,"_157":342,"_159":336,"_160":140,"_161":162,"_163":117,"_105":343,"_100":32,"_165":177,"_167":344,"_168":22,"_169":-5,"_170":345,"_99":346},"78906de4-09b3-11f0-bd40-569c3dd06744","soundEffects.ts","52943e6e-bebf-492c-b42e-efb97e6d5b14",["D",1742932687486],"/**\n * Sound effects utility functions for the application\n */\n\n/**\n * Plays a bell sound notification using the Web Audio API\n * @returns A Promise that resolves when the sound has started playing\n */\nexport function playBellSound(): Promise {\n return new Promise((resolve) => {\n try {\n // Create audio context\n const AudioContext = window.AudioContext || (window as any).webkitAudioContext;\n if (!AudioContext) {\n console.warn(\"Web Audio API not supported in this browser\");\n resolve();\n return;\n }\n \n const audioCtx = new AudioContext();\n const masterGain = audioCtx.createGain();\n masterGain.connect(audioCtx.destination);\n \n // Bell frequency ratios (fundamental and overtones)\n const ratios = [1, 2, 2.4, 3, 4, 5.4];\n const baseFreq = 440; // Fundamental frequency\n \n // Create and connect oscillators for each frequency component\n ratios.forEach((ratio, i) => {\n const osc = audioCtx.createOscillator();\n const gain = audioCtx.createGain();\n \n // Connect this oscillator chain\n osc.connect(gain);\n gain.connect(masterGain);\n \n // Set frequency based on ratio\n osc.frequency.value = baseFreq * ratio;\n \n // Amplitude decreases for higher overtones\n const volume = 0.2 / (i + 1);\n \n // Set envelope\n const now = audioCtx.currentTime;\n gain.gain.setValueAtTime(0, now);\n gain.gain.linearRampToValueAtTime(volume, now + 0.01);\n \n // Different decay times for different harmonics\n const decayTime = 1.0 + (i * 0.3);\n gain.gain.exponentialRampToValueAtTime(0.001, now + decayTime);\n \n // Start and stop\n osc.start(now);\n osc.stop(now + decayTime);\n });\n \n // Resolve the promise after a short delay to ensure sound has started\n setTimeout(resolve, 50);\n } catch (error) {\n console.error(\"Error playing bell sound:\", error);\n resolve(); // Resolve anyway to prevent hanging promises\n }\n });\n}\n\n/**\n * Plays a simple notification sound using the Web Audio API\n * This is a simpler, shorter bell sound\n * @returns A Promise that resolves when the sound has started playing\n */\nexport function playSimpleNotification(): Promise {\n return new Promise((resolve) => {\n try {\n // Create audio context\n const AudioContext = window.AudioContext || (window as any).webkitAudioContext;\n if (!AudioContext) {\n console.warn(\"Web Audio API not supported in this browser\");\n resolve();\n return;\n }\n \n const audioCtx = new AudioContext();\n \n // Create oscillator (sound generator)\n const oscillator = audioCtx.createOscillator();\n oscillator.type = 'sine';\n oscillator.frequency.value = 900;\n \n // Create gain node for volume control\n const gainNode = audioCtx.createGain();\n \n // Connect the audio nodes\n oscillator.connect(gainNode);\n gainNode.connect(audioCtx.destination);\n \n // Get current time reference\n const now = audioCtx.currentTime;\n \n // Set volume envelope for bell-like sound\n gainNode.gain.setValueAtTime(0, now);\n gainNode.gain.linearRampToValueAtTime(0.3, now + 0.01);\n gainNode.gain.exponentialRampToValueAtTime(0.001, now + 0.5);\n \n // Start and stop the sound\n oscillator.start(now);\n oscillator.stop(now + 0.5);\n \n // Resolve the promise after a short delay\n setTimeout(resolve, 50);\n } catch (error) {\n console.error(\"Error playing notification sound:\", error);\n resolve(); // Resolve anyway to prevent hanging promises\n }\n });\n}",[],[203,335,341],[203,335],{"_103":349,"_95":350,"_157":351,"_159":204,"_160":140,"_161":139,"_163":117,"_105":352,"_100":353,"_165":177,"_167":354,"_168":22,"_169":-5,"_170":355,"_99":356},"7d0afcbc-09b9-11f0-baab-569c3dd06744","index.tsx","cfafbf76-0aad-4201-aa2d-3c81a86e6b8d",["D",1742935271987],5,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\n// Extremely simple App component for testing\nconst SimpleApp = () => {\n return (\n

SVG Editor

Basic React app is working!

\n \n

This is a simplified version of the app for testing.

\n alert('Button clicked!')}\n style={{\n marginTop: '10px',\n padding: '8px 16px',\n backgroundColor: '#3b82f6',\n color: 'white',\n border: 'none',\n borderRadius: '4px',\n cursor: 'pointer'\n }}\n >\n Test Button\n \n

\n );\n};\n\n// Basic error handler\ntry {\n console.log(\"Starting application...\");\n \n // Clear the root to remove the fallback content\n const rootElement = document.getElementById(\"root\");\n if (rootElement) {\n rootElement.innerHTML = '';\n \n createRoot(rootElement).render();\n console.log(\"App rendered successfully!\");\n } else {\n console.error(\"Root element not found!\");\n }\n} catch (error) {\n console.error(\"Fatal error in application startup:\", error);\n \n // Display error in the DOM\n const errorMessage = document.createElement(\"div\");\n errorMessage.innerHTML = `\n

Error

${error instanceof Error ? error.message : \"Unknown error\"}

\n `;\n document.body.appendChild(errorMessage);\n}",[],[203,350],[203],{"_103":359,"_95":360,"_157":361,"_159":-5,"_160":140,"_161":162,"_163":117,"_105":362,"_100":32,"_165":196,"_167":363,"_168":22,"_169":-5,"_170":364,"_99":365},"78908d42-09b3-11f0-bd40-569c3dd06744","README.md","d3495ee3-3641-4b6c-93c1-8ed55d2a565f",["D",1742932687486],"# OpenTownie\n\nOpenTownie is a Val Town Project that lets you edit other Val Town Projects with Claude 3.7 Sonnet.\n\nIt uses agentic tool-calling, taking manh read, write, and thinking steps autonomously when carrying out your instructions. \n\n### Todos\n\n- [ ] Give it all the code (except maybe .txt files) as initial context (like cursor sonnet max)\n- [ ] Rebuild as React Router?\n- [ ] Persistent threads?\n- [ ] Have it default to creating a new branch off main and then embedding and iframe to the resulting http val and give you a link to a pr opening url\n- [ ] A way to upload docs, by URL? A mini site to recursively crawl docs and markdownify?\n- [x] Show reasoning in a detail\n- [x] Consider asking it to write the minimum code possible \n- [x] Add caching (post in the vercel ai discussion about how it's not working)\n- [x] For login, have a button that reloads the page\n- [x] Start a timer for messages\n- [x] Add more indicators that it's \"still working\"\n- [x] Require users supply their own Anthropic token?\n- [x] Add cost indications on messages\n- [x] Add a bell noise when the message is done to let us know\n- [x] Launch!\n- [x] Let it select the branch name from a dropdown\n- [x] Consider giving it a tool to replace whole files\n- [x] prompt it to use the thinking tool\n- [x] delete file command",[],[360],{"_103":367,"_95":183,"_157":368,"_159":-5,"_160":140,"_161":369,"_163":117,"_105":370,"_100":353,"_165":371,"_167":372,"_168":22,"_169":-5,"_170":373,"_99":374},"760c2486-09b9-11f0-bf72-569c3dd06744","97102b80-3aed-4dc7-90f6-716088926a83",33,["D",1742935260248],"http","import { Hono } from \"npm:hono\";\nimport { app as backend } from \"./backend/index.ts\";\n\nconst app = new Hono();\n\napp.route(\"/api\", backend);\napp.get(\"/\", async (c) => {\n return c.html(\n `\n \n SVG Editor\n \n \n \n \n \n

\n \n

SVG Editor

If you're seeing this, the application is still loading or there was an error.

\n \n

\n \n \n \n \n `,\n );\n});\n\napp.onError((err, c) => {\n console.error(\"Server error:\", err);\n throw err;\n});\n\nexport default app.fetch;",[],[183],"files",[154,172,181,189,201,207,213,222,228,238,246,255,264,272,280,289,297,305,314,323,333,339,348,358,366],"counts",{"_379":32,"_380":381,"_382":32,"_383":32},"pulls","branches",4,"forks","envVars","contents",[386,389,392,395],{"_103":155,"_95":156,"_157":158,"_159":-5,"_160":140,"_161":162,"_163":117,"_105":387,"_100":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_99":388},["D",1742932687486],[156],{"_103":202,"_95":203,"_157":204,"_159":-5,"_160":140,"_161":162,"_163":117,"_105":390,"_100":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_99":391},["D",1742932687486],[203],{"_103":359,"_95":360,"_157":361,"_159":-5,"_160":140,"_161":162,"_163":117,"_105":393,"_100":32,"_165":196,"_167":363,"_168":22,"_169":-5,"_99":394},["D",1742932687486],[360],{"_103":367,"_95":183,"_157":368,"_159":-5,"_160":140,"_161":369,"_163":117,"_105":396,"_100":353,"_165":371,"_167":372,"_168":22,"_169":-5,"_99":397},["D",1742935260248],[183],"upstreamProject","upstreamBranch",{"_103":143,"_105":401,"_402":403,"_95":43,"_141":104,"_100":145,"_142":-5,"_144":-5,"_404":405,"_107":-5,"_151":22,"_109":110,"_150":94,"_16":121,"_149":96},["D",1742929525118],"updatedAt",["D",1742931736146],"lockfileKey","1745103976739-esm.town_v_dcm31_svgEditor@25-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.compare.$branch",{"_93":94,"_95":96,"_97":98,"_101":412,"_417":369,"_418":32,"_419":420,"_551":117,"_552":416,"_553":554,"_557":-5},{"_103":104,"_95":96,"_105":413,"_107":-5,"_108":22,"_109":110,"_111":-5,"_112":-5,"_14":113,"_114":115,"_116":117,"_118":119,"_120":32,"_16":121,"_122":123,"_124":123,"_125":126,"_127":126,"_128":126,"_129":123,"_130":123,"_23":414,"_134":415,"_137":416,"_151":22},["D",1742929525118],{"_93":94,"_132":133},{"_93":94,"_136":133},{"_100":139,"_95":98,"_103":140,"_141":104,"_142":143,"_144":145,"_146":110,"_147":104,"_148":121,"_149":96,"_150":94},"ahead","behind","diff",{"_421":422,"_168":445,"_446":447},"added",[423,430,435,440],{"_99":424,"_425":-7,"_426":427},"frontend/assets","targetFile","sourceFile",{"_103":208,"_95":209,"_157":210,"_159":204,"_160":140,"_161":195,"_163":117,"_105":211,"_100":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":-7,"_99":428,"_429":-5},[203,209],"contentHash",{"_99":431,"_425":-7,"_426":432},"frontend/assets/sample-svg.svg",{"_103":214,"_95":215,"_157":216,"_159":210,"_160":140,"_161":195,"_163":117,"_105":217,"_100":32,"_165":196,"_167":218,"_168":22,"_169":-5,"_170":-7,"_99":433,"_429":434},[203,209,215],"f1dcd8e11620fa42616f493476270b000bd8bbb2c10cdaae9ca332f24e7f7d72",{"_99":436,"_425":-7,"_426":437},"frontend/components/RealChat.tsx",{"_103":306,"_95":307,"_157":308,"_159":225,"_160":140,"_161":309,"_163":117,"_105":310,"_100":32,"_165":196,"_167":311,"_168":22,"_169":-5,"_170":-7,"_99":438,"_429":439},[203,224,307],"b0f8c1f7c053e5517019bbbcb12d8ca1a50b08a4c9e902453d09a2f71ad63c01",{"_99":441,"_425":-7,"_426":442},"frontend/components/SvgPreview.tsx",{"_103":324,"_95":325,"_157":326,"_159":225,"_160":140,"_161":327,"_163":117,"_105":328,"_100":195,"_165":196,"_167":329,"_168":22,"_169":-5,"_170":-7,"_99":443,"_429":444},[203,224,325],"4072fcae027f3b5e2cd9be409b7e793df66860ff22ce822cc7103c22273fbe73",[],"modified",[448,461,475,488,501,514,527,541],{"_99":449,"_425":450,"_426":458},"backend/system_prompt.txt",{"_103":451,"_95":191,"_157":452,"_159":453,"_160":143,"_161":162,"_163":117,"_105":454,"_100":32,"_165":196,"_167":455,"_168":22,"_169":-5,"_170":-7,"_99":456,"_429":457},"1bb0213e-09ac-11f0-8e1d-569c3dd06744","1bb021e8-09ac-11f0-8e1d-569c3dd06744","9a8e96fa-713b-47d6-8af7-24017dbfb805",["D",1742929525196],"# Val Town Assistant Prompt\n\nYou are an advanced assistant specialized in generating Val Town code.\n\n## Core Guidelines\n\n- Respond in a friendly and concise manner\n- Ask clarifying questions when requirements are ambiguous\n- Provide complete, functional solutions rather than skeleton implementations\n- Test your logic against edge cases before presenting the final solution\n- Ensure all code follows Val Town's specific platform requirements\n- If a section of code that you're working on is getting too complex, consider refactoring it into subcomponents\n\n## Image Handling\n\n- When users upload images, carefully analyze them to understand their content\n- Reference specific details from the images in your responses\n- If multiple images are uploaded, consider their relationship to each other\n- For code-related images (screenshots, diagrams), extract relevant information and incorporate it into your solutions\n- For UI mockups or design images, use them as reference for layout and design, use the colors from the image\n- When images contain text or code, transcribe relevant portions as needed\n- If image content is unclear, ask clarifying questions about what the user wants you to focus on\n\n## Technical Requirements\n\n### Code Standards\n- Generate code in TypeScript by default unless JavaScript is specifically requested\n- Add appropriate TypeScript types and interfaces for all data structures\n- If there is an official SDK or library for the service you are integrating with, use it to simplify the implementation\n- **Never bake in secrets into the code** - always use environment variables\n- Include comments explaining complex logic (avoid commenting obvious operations)\n- Follow modern ES6+ conventions and functional programming practices where appropriate\n\n### Val Town Utility Functions\n\nVal Town provides several utility functions to help with common project tasks. These utilities handle file management, project information, and testing.\n\n### Importing Utilities\nAlways import utilities with version pins to avoid breaking changes:\n```ts\nimport { parseProject, readFile, serveFile } from \"https://esm.town/v/std/utils@71-main/index.ts\";\n```\n\n### Available Utilities\n\n1. **parseProject** - Extract information about the current project from import.meta.url:\n```ts\nconst projectVal = parseProject(import.meta.url);\nconsole.log(projectVal.username); // Owner of the project\nconsole.log(projectVal.name); // Project name\nconsole.log(projectVal.version); // Version number\nconsole.log(projectVal.branch); // Branch name\nconsole.log(projectVal.links.self.project); // URL to the project page\n```\n\n2. **readFile** - Read files from within the project:\n```ts\n// Read a file from the project\nconst fileContent = await readFile(\"/frontend/index.html\", import.meta.url);\n```\n\n3. **serveFile** - Serve project files with proper content types:\n```ts\n// Serve a file from the project with proper Content-Type header\napp.get(\"/public/style.css\", c => serveFile(\"/frontend/style.css\", import.meta.url));\n```\n\n4. **listFiles** - List all files in the project:\n```ts\nconst files = await listFiles(import.meta.url);\n```\n\n5. **fetchTranspiledJavaScript** - Fetch and transpile TypeScript to JavaScript:\n```ts\nconst jsCode = await fetchTranspiledJavaScript(\"https://esm.town/v/username/project/path/to/file.ts\");\n```\n\n6. **testServer** - Create a test server for running test suites:\n```ts\nexport default testServer([\n {\n name: \"Feature Tests\",\n tests: [\n {\n name: \"should add numbers correctly\",\n function: () => {\n expect(1 + 1).toBe(2);\n },\n }\n ],\n }\n]);\n```\n\n## Val Town Platform Specifics\n- **Redirects:** Use `return new Response(null, { status: 302, headers: { Location: \"/place/to/redirect\" }})` instead of `Response.redirect` which is broken\n- **Images:** Avoid external images or base64 images. Use emojis, unicode symbols, or icon fonts/libraries instead\n- For AI-generated images, use: `https://maxm-imggenurl.web.val.run/the-description-of-your-image`\n- **Storage:** DO NOT use the Deno KV module for storage\n- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods\n- **Weather Data:** Use open-meteo for weather data (doesn't require API keys) unless otherwise specified\n- **View Source:** Add a view source link with `import.meta.url.replace(\"esm.town\", \"val.town\")` and include `target=\"_top\"` attribute\n- **Error Debugging:** Add `` to HTML to capture client-side errors\n- **Error Handling:** Only use try...catch when there's a clear local resolution; avoid catches that merely log or return 500s - let errors bubble up with full context\n- **Environment Variables:** Use `Deno.env.get('keyname')` and minimize their use - prefer APIs without keys\n- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure compatibility on server and browser\n- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites\n- For persistence, use Val Town SQLite or Blob storage with `import.meta.url` for keys/table names\n- **React Configuration:** When using React libraries, pin versions with `?deps=react@18.2.0,react-dom@18.2.0` and include the `@jsxImportSource` pragma\n- When facing client-side render issues, check if all React dependencies are pinned to the same version\n- **Styling:** Default to using TailwindCSS via `` unless otherwise specified\n\n## Val Town Standard Libraries\n\n### Blob Storage\n```ts\nimport { blob } from \"https://esm.town/v/std/blob\";\nawait blob.setJSON(\"myKey\", { hello: \"world\" });\nlet blobDemo = await blob.getJSON(\"myKey\");\nlet appKeys = await blob.list(\"app_\");\nawait blob.delete(\"myKey\");\n```\n\n### SQLite\n```ts\nimport { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nconst TABLE_NAME = 'todo_app_users_2';\n// Create table - do this before usage and change table name when modifying schema\nawait sqlite.execute(`CREATE TABLE IF NOT EXISTS ${TABLE_NAME} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL\n)`);\n// Query data\nconst result = await sqlite.execute(`SELECT * FROM ${TABLE_NAME} WHERE id = ?`, [1]);\n```\n\nNote: When changing a SQLite table's schema, change the table's name (e.g., add _2 or _3) to create a fresh table.\n\n### OpenAI\n```ts\nimport { OpenAI } from \"https://esm.town/v/std/openai\";\nconst openai = new OpenAI();\nconst completion = await openai.chat.completions.create({\n messages: [\n { role: \"user\", content: \"Say hello in a creative way\" },\n ],\n model: \"gpt-4o-mini\",\n max_tokens: 30,\n});\n```\n\n### Email\n```ts\nimport { email } from \"https://esm.town/v/std/email\";\n// By default emails the owner of the val\nawait email({ \n subject: \"Hi\", \n text: \"Hi\", \n html: \"

Hi

\"\n});\n```\n\n## Project Structure and Design Patterns\n\n### Recommended Directory Structure\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Schema definitions\n│ │ ├── queries.ts # DB query functions\n│ │ └── README.md\n│ ├── index.ts # Main entry point\n│ └── README.md\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx\n│ │ └── [Component].tsx\n│ ├── favicon.svg\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # JS entry point\n│ ├── README.md\n│ └── style.css\n├── README.md\n└── shared/\n ├── README.md\n └── utils.ts # Shared types and functions\n```\n\n### Backend (Hono) Best Practices\n- Hono is the recommended API framework (similar to Express, Flask, or Sinatra)\n- Main entry point should be `backend/index.ts`\n- **Static asset serving:** Use the utility functions to read and serve project files:\n ```ts\n // Use the serveFile utility to handle content types automatically\n app.get(\"/public/*\", c => serveFile(c.req.path.replace(\"/public\", \"/frontend\"), import.meta.url));\n \n // For index.html, often you'll want to bootstrap with initial data\n app.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n \n // Inject data to avoid extra round-trips\n const initialData = await fetchInitialData();\n const dataScript = ``;\n \n html = html.replace(\"\", `${dataScript}`);\n return c.html(html);\n });\n ```\n- Create RESTful API routes for CRUD operations\n- Be careful with error handling as Hono tends to swallow errors\n- Consider re-throwing errors to see full stack traces:\n ```ts\n // Unwrap Hono errors to see original error details\n app.onError((err, c) => {\n throw err;\n });\n ```\n\n### Frontend Best Practices\n- Structure as a standard client-side React app\n- Use SVG for favicons (Val Town only supports text files)\n- Separate components into individual files\n- Access bootstrapped data from `window.__INITIAL_DATA__`\n- Use React 18.2.0 consistently in all imports and the `@jsxImportSource` pragma\n- Follow the React component pattern from the example project\n- Handle API calls properly with proper error catching\n\n### Database Patterns\n- Run migrations on startup or comment out for performance\n- Change table names when modifying schemas rather than altering\n- Export clear query functions with proper TypeScript typing\n- Follow the queries and migrations pattern from the example\n\n## Common Gotchas and Solutions\n\n1. **Environment Limitations:** \n - Val Town runs on Deno in a serverless context, not Node.js\n - Code in `shared/` must work in both frontend and backend environments\n - Cannot use `Deno` keyword in shared code\n - Use `https://esm.sh` for imports that work in both environments\n\n2. **SQLite Peculiarities:**\n - Limited support for ALTER TABLE operations\n - Create new tables with updated schemas and copy data when needed\n - Always run table creation before querying\n\n3. **React Configuration:**\n - All React dependencies must be pinned to 18.2.0\n - Always include `@jsxImportSource https://esm.sh/react@18.2.0` at the top of React files\n - Rendering issues often come from mismatched React versions\n\n4. **File Handling:**\n - Val Town only supports text files, not binary\n - Use the provided utilities to read files across branches and forks\n - For files in the project, use `readFile` helpers\n\n5. **API Design:**\n - `fetch` handler is the entry point for HTTP vals\n - Run the Hono app with `export default app.fetch // This is the entry point for HTTP vals`\n - Properly handle CORS if needed for external access",[156,191],"9d05784db0dec806a284422efa1214de2a0400ced6668d83b4f33421701667e6",{"_103":190,"_95":191,"_157":192,"_159":158,"_160":140,"_161":193,"_163":117,"_105":194,"_100":195,"_165":196,"_167":197,"_168":22,"_169":-5,"_170":-7,"_99":459,"_429":460},[156,191],"761cc83862674290081f2527051be64addffbf62205a489b52aaa84193bf3460",{"_99":462,"_425":463,"_426":472},"frontend/components/App.tsx",{"_103":464,"_95":230,"_157":465,"_159":466,"_160":143,"_161":145,"_163":117,"_105":467,"_100":468,"_165":177,"_167":469,"_168":22,"_169":-5,"_170":-7,"_99":470,"_429":471},"4184dc56-09b1-11f0-b8c9-569c3dd06744","1c2f1ac0-09ac-11f0-b60d-569c3dd06744","e9fce728-44af-4ad0-a9a1-cce962a5768b",["D",1742931736146],3,"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport { useLocalStorage } from \"https://esm.sh/react-use?dev&deps=react@18.2.0&react-dom@18.2.0\";\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0?dev\";\nimport { Chat } from \"./Chat.tsx\";\nimport { Login } from \"./Login.tsx\";\nimport { SvgEditor } from \"./SvgEditor.tsx\";\n\nexport function App() {\n const [bearerToken, setBearerToken] = useLocalStorage(\"bearer\", \"\");\n const [anthropicApiKey, setAnthropicApiKey] = useLocalStorage(\"anthropic_api_key\", \"\");\n \n // Create a default project for SVG editing - no need to store this in state\n const defaultProject = {\n name: \"SVG Editor\",\n id: \"svg-editor\",\n username: \"user\"\n };\n\n // Clear any saved project in localStorage\n useEffect(() => {\n localStorage.removeItem(\"project\");\n }, []);\n\n function handleLogout() {\n setBearerToken(\"\");\n // Keep the anthropic API key in case the user wants to reuse it\n }\n\n return (\n

SVG Editor

\n \n Logout\n \n

\n {bearerToken ? (\n {}} // Empty function since we don't need to change projects\n />\n ) : (\n \n )}\n

\n );\n}",[203,224,230],"d8c855947c7991d848fedd4ca587496fb86e830cd2ef9c4597a77265ad00b7fa",{"_103":229,"_95":230,"_157":231,"_159":225,"_160":140,"_161":232,"_163":117,"_105":233,"_100":234,"_165":177,"_167":235,"_168":22,"_169":-5,"_170":-7,"_99":473,"_429":474},[203,224,230],"41ac86e8e6bfcc327c47a6213be04c36be2b07538dc3f1d6a1cad44802b00ce2",{"_99":476,"_425":477,"_426":485},"frontend/components/Chat.tsx",{"_103":478,"_95":248,"_157":479,"_159":466,"_160":143,"_161":480,"_163":117,"_105":481,"_100":468,"_165":177,"_167":482,"_168":22,"_169":-5,"_170":-7,"_99":483,"_429":484},"e6a883fa-09b0-11f0-8c22-569c3dd06744","1c1885c6-09ac-11f0-98f2-569c3dd06744",23,["D",1742931583709],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport { useChat } from \"https://esm.sh/@ai-sdk/react?dev&deps=react@18.2.0&react-dom@18.2.0\";\nimport { useLocalStorage } from \"https://esm.sh/react-use?dev&deps=react@18.2.0&react-dom@18.2.0\";\nimport React, { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0?dev\";\nimport { playBellSound } from \"../utils/soundEffects.ts\";\nimport { ImageUpload, PROMPT_IMAGE_LIMIT } from \"./ImageUpload.tsx\";\nimport { MessagePart } from \"./MessagePart.tsx\";\nimport { SvgEditor } from \"./SvgEditor.tsx\";\nimport { LoadingSpinner, MessageTimer, calculateCost } from \"./ChatUtils.tsx\";\n\nexport function Chat({\n project,\n bearerToken,\n anthropicApiKey,\n setProject,\n}: {\n project: any;\n bearerToken: string;\n anthropicApiKey: string;\n setProject: (project: any) => void;\n}) {\n const [usages, setUsages] = useState>({});\n const [soundEnabled, setSoundEnabled] = useLocalStorage(\"soundEnabled\", true);\n const [images, setImages] = useState<(string | null)[]>([]);\n const [currentSvg, setCurrentSvg] = useState(\"\");\n const [showSvgEditor, setShowSvgEditor] = useState(true);\n\n // Only track message end times - we'll use message.createdAt for start times\n const [messageEndTimes, setMessageEndTimes] = useState>({});\n\n // State to detect if the user is on a mobile device\n const [isMobile, setIsMobile] = useState(false);\n\n // Check if user is on mobile when component mounts\n useEffect(() => {\n const checkMobile = () => {\n const userAgent = navigator.userAgent || navigator.vendor || (window as any).opera;\n const mobileRegex = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i;\n setIsMobile(mobileRegex.test(userAgent.toLowerCase()));\n };\n\n checkMobile();\n\n // Also check on resize, as user might switch device orientation\n window.addEventListener(\"resize\", checkMobile);\n return () => window.removeEventListener(\"resize\", checkMobile);\n }, []);\n\n // Custom stop handler reference to handle stopping timers and spinners\n const customStopRef = useRef<(() => void) | null>(null);\n\n const {\n messages,\n error,\n input,\n handleInputChange,\n handleSubmit: originalHandleSubmit,\n stop,\n status,\n } = useChat({\n api: \"/api/send-message\",\n body: {\n project,\n anthropicApiKey,\n images: images\n .filter((img): img is string => {\n // Make sure it's a string and a valid data URL\n const isValid = typeof img === \"string\" && img.startsWith(\"data:\");\n if (!isValid && img !== null) {\n console.warn(\"Invalid image format:\", img?.substring(0, 50) + \"...\");\n }\n return isValid;\n })\n // Just pass the data URL directly\n .map(img => ({ url: img })),\n },\n headers: {\n \"Authorization\": `Bearer ${bearerToken}`,\n },\n onFinish: (message, options) => {\n // When message finishes, update usage data\n setUsages(prev => ({\n ...prev,\n [message.id]: options.usage,\n }));\n\n // Record the end time\n setMessageEndTimes(prev => ({\n ...prev,\n [message.id]: Date.now(),\n }));\n\n // Play notification sound when message is finished\n if (soundEnabled) {\n playBellSound().catch(error => {\n console.log(\"Error playing bell sound:\", error);\n });\n }\n },\n });\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n const validImages = images.filter((img): img is string => typeof img === \"string\");\n console.log(\"Submitting with images:\", validImages);\n if (input.trim() || validImages.length > 0) {\n originalHandleSubmit(e);\n setImages([]);\n }\n };\n\n const running = status === \"streaming\" || status === \"submitted\";\n\n // Keep track of the most recent assistant message that's still streaming\n const pendingMessageId = React.useMemo(() => {\n if (!running) return null;\n // Find the most recent assistant message that doesn't have an end time\n const pendingMessages = messages\n .filter(msg => msg.role === \"assistant\" && !messageEndTimes[msg.id]);\n return pendingMessages.length > 0 ? pendingMessages[pendingMessages.length - 1].id : null;\n }, [messages, messageEndTimes, running]);\n\n // Custom stop handler that also handles UI elements (timer and spinner)\n const handleStop = React.useCallback(() => {\n // Call the original stop function\n stop();\n\n // Also mark any pending messages as ended to stop timers and spinners\n if (pendingMessageId) {\n setMessageEndTimes(prev => ({\n ...prev,\n [pendingMessageId]: Date.now(),\n }));\n\n // Play notification sound when message is manually stopped\n if (soundEnabled) {\n playBellSound().catch(error => {\n console.log(\"Error playing bell sound:\", error);\n });\n }\n }\n }, [stop, pendingMessageId, soundEnabled]);\n\n // Update the custom stop function ref when the dependencies change\n React.useEffect(() => {\n customStopRef.current = handleStop;\n }, [handleStop]);\n\n // Show a warning message if no anthropicApiKey is provided\n const showAnthropicKeyWarning = !anthropicApiKey;\n\n // Handle SVG change from the editor\n const handleSvgChange = (svgString: string) => {\n setCurrentSvg(svgString);\n // We could potentially update the chat here if needed\n };\n\n // Toggle SVG editor visibility\n const toggleSvgEditor = () => {\n setShowSvgEditor(!showSvgEditor);\n };\n\n return (\n

\n {showAnthropicKeyWarning && (\n

Anthropic API Key Missing

Please log out and add your Anthropic API key to use this app.

\n )}\n \n {/* SVG Editor Section */}\n {showSvgEditor && (\n

\n \n

\n )}\n \n

\n {messages.map((message) => (\n \n

\n {message.parts.map((part, index) => (\n

\n \n

\n ))}\n

\n {/* Show timer for assistant messages using createdAt for start time */}\n {message.role === \"assistant\" && message.createdAt && (\n \n )}\n {usages[message.id]\n ? (\n

\n {calculateCost(usages[message.id])}\n

\n                      {JSON.stringify(usages[message.id], null, 2)}\n

\n ))}\n {error\n ? (\n

{error.stack}

\n )\n : undefined}\n

\n\n \n {(images.length > 0 || !running) && }\n\n

\n \n

\n );\n}",[203,224,248],"b87eec087e2485d493d6acd030aadc64fd7af7b1b00245665b329f5430919530",{"_103":247,"_95":248,"_157":249,"_159":225,"_160":140,"_161":250,"_163":117,"_105":251,"_100":195,"_165":177,"_167":252,"_168":22,"_169":-5,"_170":-7,"_99":486,"_429":487},[203,224,248],"feb4d4fa5857b15b42af08296d5223f71be87460efef34a219ef54e2b4cc195f",{"_99":489,"_425":490,"_426":498},"frontend/components/ChatUtils.tsx",{"_103":491,"_95":257,"_157":492,"_159":466,"_160":143,"_161":493,"_163":117,"_105":494,"_100":32,"_165":196,"_167":495,"_168":22,"_169":-5,"_170":-7,"_99":496,"_429":497},"c34b1b8a-09af-11f0-b5e7-569c3dd06744","c34b1c52-09af-11f0-b5e7-569c3dd06744",19,["D",1742931094883],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0?dev\";\n\n// Component for the loading spinner\nexport const LoadingSpinner = () => (\n

\n);\n\n// Utility to format milliseconds into a readable time string\nexport const formatTime = (ms: number): string => {\n const seconds = Math.floor(ms / 1000);\n const minutes = Math.floor(seconds / 60);\n const remainingSeconds = seconds % 60;\n return `${minutes}:${remainingSeconds.toString().padStart(2, \"0\")}`;\n};\n\n// Calculate cost based on token usage\nexport const calculateCost = (usage: any): string => {\n if (!usage || !usage.promptTokens) {\n return \"0.00\";\n }\n\n // Cost per million tokens\n const PROMPT_COST_PER_MILLION = 3;\n const COMPLETION_COST_PER_MILLION = 15;\n const CACHE_WRITE_COST_PER_MILLION = 3.75;\n const CACHE_READ_COST_PER_MILLION = 0.3;\n\n // Get reported values\n const promptTokens = usage.promptTokens || 0;\n const completionTokens = usage.completionTokens || 0;\n\n // Estimate cache read tokens\n // Approach: Estimate that 40% of prompt tokens come from cache read\n // This percentage can be adjusted based on observed patterns\n const estimatedCacheReadTokens = Math.round(promptTokens * 0.4);\n\n // Estimate cache write tokens\n // Approach: Assume cache write tokens are a portion of prompt tokens that aren't from cache read\n let estimatedCacheWriteTokens = 0;\n\n // If we have more prompt tokens than estimated cache read tokens,\n // estimate that 70% of the difference are cache write tokens\n estimatedCacheWriteTokens = Math.round((promptTokens - estimatedCacheReadTokens) * 0.7);\n\n // Calculate costs\n // Subtract both cache read and write tokens from prompt tokens to avoid double counting\n const promptCost = ((promptTokens - estimatedCacheWriteTokens - estimatedCacheReadTokens) / 1000000)\n * PROMPT_COST_PER_MILLION;\n const completionCost = (completionTokens / 1000000) * COMPLETION_COST_PER_MILLION;\n const cacheWriteCost = (estimatedCacheWriteTokens / 1000000) * CACHE_WRITE_COST_PER_MILLION;\n const cacheReadCost = (estimatedCacheReadTokens / 1000000) * CACHE_READ_COST_PER_MILLION;\n\n // Total cost\n const totalCost = promptCost + completionCost + cacheWriteCost + cacheReadCost;\n\n // Add both estimated cache tokens to the usage object for transparency\n usage.estimatedCacheReadTokens = estimatedCacheReadTokens;\n usage.estimatedCacheWriteTokens = estimatedCacheWriteTokens;\n\n // Store the raw cost with more precision for debugging\n usage.rawCost = totalCost.toFixed(5);\n\n // Format to the nearest penny (2 decimal places)\n // If less than 1 penny, show \"< $0.01\"\n if (totalCost < 0.01) {\n return \"< $0.01\";\n } else {\n return \"$\" + totalCost.toFixed(2);\n }\n};\n\n// Component for the message timer\nexport const MessageTimer = (\n { createdAt, endTime, isStopped }: { createdAt: number; endTime?: number; isStopped?: boolean },\n) => {\n const [currentTime, setCurrentTime] = useState(Date.now());\n\n // Update currentTime periodically when message is still running (no endTime) and not stopped\n useEffect(() => {\n if (endTime !== undefined || isStopped) return;\n\n const interval = setInterval(() => {\n setCurrentTime(Date.now());\n }, 100);\n\n return () => clearInterval(interval);\n }, [endTime, isStopped]);\n\n // Calculate elapsed time: either from start to end (if finished) or from start to current time (if running)\n const elapsedTime = endTime !== undefined\n ? endTime - createdAt\n : currentTime - createdAt;\n\n return (\n

\n Time: {formatTime(elapsedTime)}\n

\n );\n};",[203,224,257],"9b22da4eecce1e32b0807209457b925219ddae601bbebe892a9bd7ca80ef671e",{"_103":256,"_95":257,"_157":258,"_159":225,"_160":140,"_161":259,"_163":117,"_105":260,"_100":162,"_165":196,"_167":261,"_168":22,"_169":-5,"_170":-7,"_99":499,"_429":500},[203,224,257],"6668565866c4afa0bc7b1fe8bcdb8006494a430f04ef7dd906f643644da8bec6",{"_99":502,"_425":503,"_426":511},"frontend/components/Login.tsx",{"_103":504,"_95":282,"_157":505,"_159":466,"_160":143,"_161":506,"_163":117,"_105":507,"_100":32,"_165":177,"_167":508,"_168":22,"_169":-5,"_170":-7,"_99":509,"_429":510},"1bde35ec-09ac-11f0-b0ec-569c3dd06744","1bde36c8-09ac-11f0-b0ec-569c3dd06744",6,["D",1742929525498],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport { useLocalStorage } from \"https://esm.sh/react-use?dev&deps=react@18.2.0&react-dom@18.2.0\";\n\nexport function Login() {\n const [bearerToken, setBearerToken] = useLocalStorage(\"bearer\", \"\");\n const [anthropicApiKey, setAnthropicApiKey] = useLocalStorage(\"anthropic_api_key\", \"\");\n\n return (\n

Login

\n \n \n Val Town API Token\n \n {\"\"}(with projects:write and users:read permission)\n \n setBearerToken(e.target.value)}\n placeholder=\"vtwn-xxxx\"\n autoComplete=\"off\"\n className=\"w-full p-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none\"\n />\n

\n Anthropic API Key\n setAnthropicApiKey(e.target.value)}\n placeholder=\"sk-ant-xxxxx\"\n autoComplete=\"off\"\n className=\"w-full p-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none\"\n />\n

\n \n Login\n \n

\n );\n}",[203,224,282],"774a4e38dac8c6a8af6c152231736682da07c129dfb6468589435494d028f6be",{"_103":281,"_95":282,"_157":283,"_159":225,"_160":140,"_161":284,"_163":117,"_105":285,"_100":162,"_165":177,"_167":286,"_168":22,"_169":-5,"_170":-7,"_99":512,"_429":513},[203,224,282],"2fbe0a9c70bbc4a3b8ffd131eb3b051532571967a2b14dcc0035ac60e7d56750",{"_99":515,"_425":516,"_426":524},"frontend/components/SvgEditor.tsx",{"_103":517,"_95":316,"_157":518,"_159":466,"_160":143,"_161":519,"_163":117,"_105":520,"_100":162,"_165":196,"_167":521,"_168":22,"_169":-5,"_170":-7,"_99":522,"_429":523},"02800af8-09b1-11f0-8267-569c3dd06744","c79840ce-09ae-11f0-979a-569c3dd06744",24,["D",1742931630417],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport React, { useState, useRef, useEffect } from \"https://esm.sh/react@18.2.0?dev\";\n\ninterface SvgEditorProps {\n initialSvg?: string;\n onSvgChange?: (svgString: string) => void;\n}\n\n// SVG templates\nconst TEMPLATES = {\n wideIcon: {\n name: \"Wide Icon (352x132)\",\n svg: ``,\n },\n squareIcon: {\n name: \"Square App Icon (512x512)\",\n svg: ``,\n },\n blank: {\n name: \"Blank Canvas\",\n svg: ``,\n }\n};\n\nexport function SvgEditor({ initialSvg, onSvgChange }: SvgEditorProps) {\n const [svgContent, setSvgContent] = useState(initialSvg || TEMPLATES.blank.svg);\n const [editMode, setEditMode] = useState<'source' | 'visual'>('visual');\n const [selectedTemplate, setSelectedTemplate] = useState('blank');\n const svgRef = useRef(null);\n const textareaRef = useRef(null);\n \n // Handle template change\n const handleTemplateChange = (templateKey: string) => {\n if (TEMPLATES[templateKey as keyof typeof TEMPLATES]) {\n setSelectedTemplate(templateKey);\n const newSvg = TEMPLATES[templateKey as keyof typeof TEMPLATES].svg;\n setSvgContent(newSvg);\n if (onSvgChange) {\n onSvgChange(newSvg);\n }\n }\n };\n\n // Handle SVG code editing\n const handleCodeChange = (e: React.ChangeEvent) => {\n const newContent = e.target.value;\n setSvgContent(newContent);\n if (onSvgChange) {\n onSvgChange(newContent);\n }\n };\n\n // Handle SVG file upload\n const handleFileUpload = (e: React.ChangeEvent) => {\n const file = e.target.files?.[0];\n if (!file) return;\n\n // Only accept SVG files\n if (!file.type.includes('svg')) {\n alert('Please upload an SVG file');\n return;\n }\n\n const reader = new FileReader();\n reader.onload = (event) => {\n const content = event.target?.result as string;\n setSvgContent(content);\n setSelectedTemplate('');\n if (onSvgChange) {\n onSvgChange(content);\n }\n };\n reader.readAsText(file);\n };\n\n // Handle downloading the SVG\n const handleDownload = () => {\n const blob = new Blob([svgContent], { type: 'image/svg+xml' });\n const url = URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.href = url;\n a.download = 'icon.svg';\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n URL.revokeObjectURL(url);\n };\n\n // Image to SVG conversion\n const handleImageToSvg = (imageDataUrl: string) => {\n // Create a placeholder SVG that embeds the image\n // This is a simple embedding, not a true vector conversion\n const imgSvg = ``;\n \n setSvgContent(imgSvg);\n setSelectedTemplate('');\n if (onSvgChange) {\n onSvgChange(imgSvg);\n }\n };\n\n // Adjust textarea height to match content\n useEffect(() => {\n if (editMode === 'source' && textareaRef.current) {\n textareaRef.current.style.height = 'auto';\n textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;\n }\n }, [svgContent, editMode]);\n\n return (\n

\n \n \n \n \n Upload SVG\n \n

\n \n

\n \n \n

\n \n

\n {editMode === 'visual' ? (\n

\n ) : (\n \n )}\n

\n );\n}",[203,224,316],"b2448914a0e6bac56bb9055c920a26795038c3bcc6a5710715ef0816b178bca3",{"_103":315,"_95":316,"_157":317,"_159":225,"_160":140,"_161":318,"_163":117,"_105":319,"_100":162,"_165":196,"_167":320,"_168":22,"_169":-5,"_170":-7,"_99":525,"_429":526},[203,224,316],"6415681dce8d75f24745eb16adbc8445c3be6d61847b943bb4ed94f41471fe91",{"_99":528,"_425":529,"_426":538},"frontend/index.tsx",{"_103":530,"_95":350,"_157":531,"_159":532,"_160":143,"_161":533,"_163":117,"_105":534,"_100":32,"_165":177,"_167":535,"_168":22,"_169":-5,"_170":-7,"_99":536,"_429":537},"1be6a2c2-09ac-11f0-b60d-569c3dd06744","1be6a358-09ac-11f0-b60d-569c3dd06744","26ccac1d-07f7-404b-a3ef-d1a0b65f100b",7,["D",1742929525556],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client?dev\";\nimport { App } from \"./components/App.tsx\";\n\ncreateRoot(document.getElementById(\"root\")).render();",[203,350],"e98970c8bc520f6a0a8c5d7a990a321c54527692523e5a6a4d10214347b601f0",{"_103":349,"_95":350,"_157":351,"_159":204,"_160":140,"_161":139,"_163":117,"_105":352,"_100":353,"_165":177,"_167":354,"_168":22,"_169":-5,"_170":-7,"_99":539,"_429":540},[203,350],"3f4cfa40cfe38d96c48f3511cfdcf70bf5c922ff769b0f5fa4eae26b8d0a3f38",{"_99":183,"_425":542,"_426":548},{"_103":543,"_95":183,"_157":115,"_159":-5,"_160":143,"_161":119,"_163":117,"_105":544,"_100":162,"_165":371,"_167":545,"_168":22,"_169":-5,"_170":-7,"_99":546,"_429":547},"f48d1208-09ae-11f0-95a8-569c3dd06744",["D",1742930748025],"import { Hono } from \"npm:hono\";\nimport { app as backend } from \"./backend/index.ts\";\n\nconst app = new Hono();\n\napp.route(\"/api\", backend);\napp.get(\"/\", async (c) => {\n return c.html(\n `\n \n SVG Editor\n \n \n \n \n

\n \n \n \n `,\n );\n});\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err, c) => {\n throw err;\n});\n\nexport default app.fetch;",[183],"3383b800eae9983baceb8dca9d52e335233644a811dbda581499ceba09eecf60",{"_103":367,"_95":183,"_157":368,"_159":-5,"_160":140,"_161":369,"_163":117,"_105":370,"_100":353,"_165":371,"_167":372,"_168":22,"_169":-5,"_170":-7,"_99":549,"_429":550},[183],"74446d6561f7f65b5294773ae11bb097e76ae4cdf20f115b3fc2598fbd49a4a5","hasChanges","sourceBranch","targetBranch",{"_103":143,"_105":555,"_402":556,"_95":43,"_141":104,"_100":145,"_142":-5,"_144":-5,"_404":405,"_107":-5,"_151":22,"_109":110,"_150":94,"_16":121,"_149":96},["D",1742929525118],["D",1742931736146],"pull","actionData","errors"]

SVG Preview

SVG Editor

Create New Branch

Login

\n {isLoading ? (\n \n Loading projects\n \n \n ) : loaderData?.profile?.username ? (\n <>\n \n @{loaderData?.profile?.username}\n \n 's Projects\n \n ) : (\n \"Your Projects\"\n )}\n

Start with a sample question:

SVG Preview

SVG Editor

Error

SVG Editor

Hi

SVG Editor

Login

\n {isLoading ? (\n
\n Loading projects\n
\n
\n ) : loaderData?.profile?.username ? (\n <>\n \n @{loaderData?.profile?.username}\n \n 's Projects\n \n ) : (\n \"Your Projects\"\n )}\n

dcm31

svgEditor

Mergesvg-preview-featureintomain

backend/system_prompt.txt+126-227

frontend/components/App.tsx+160-36

frontend/components/Chat.tsx+20-6

frontend/components/ChatUtils.tsx+191-91

frontend/components/Login.tsx+65-20

frontend/components/SvgEditor.tsx+63-17

frontend/index.tsx+64-4

Hindex.ts+26-3

frontend/assets

frontend/assets/sample-svg.svg+29-0

frontend/components/RealChat.tsx+176-0

frontend/components/SvgPreview.tsx+92-0