\n);\n\n// Utility to format milliseconds into a readable time string\nconst 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\nconst 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\nconst 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};\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 [branchId, setBranchId] = useLocalStorage(\"branchId\", undefined);\n const [soundEnabled, setSoundEnabled] = useLocalStorage(\"soundEnabled\", true);\n const [images, setImages] = useState<(string | null)[]>([]);\n const [lastModifiedFile, setLastModifiedFile] = useState(null);\n const [isReverting, setIsReverting] = useState(false);\n const [revertResult, setRevertResult] = useState<{ success: boolean; message: string } | null>(null);\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 branchId,\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 // Check if there's a modified file in the message content\n if (message.role === \"assistant\" && message.content) {\n // Look for tool calls in the message\n const toolCalls = message.toolCalls || [];\n for (const toolCall of toolCalls) {\n if (toolCall.type === \"function\" && \n toolCall.function?.name === \"str_replace_editor\" && \n toolCall.function?.output) {\n try {\n // Try to parse the output as JSON\n const output = typeof toolCall.function.output === 'string' \n ? JSON.parse(toolCall.function.output) \n : toolCall.function.output;\n \n // If the output contains a modifiedFile property, update the lastModifiedFile state\n if (output && output.modifiedFile) {\n setLastModifiedFile(output.modifiedFile);\n }\n } catch (e) {\n // If parsing fails, just ignore\n console.warn(\"Failed to parse tool output:\", e);\n }\n }\n }\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 // Add keyboard shortcut (Escape key) to cancel generation\n React.useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'Escape' && running && customStopRef.current) {\n customStopRef.current();\n }\n };\n\n window.addEventListener('keydown', handleKeyDown);\n return () => {\n window.removeEventListener('keydown', handleKeyDown);\n };\n }, [running]);\n\n // Function to handle reverting changes\n const handleRevert = async () => {\n if (!lastModifiedFile || isReverting) return;\n \n setIsReverting(true);\n setRevertResult(null);\n \n try {\n const response = await fetch(\"/api/revert-file\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"Authorization\": `Bearer ${bearerToken}`,\n },\n body: JSON.stringify({\n path: lastModifiedFile,\n branchId,\n project,\n }),\n });\n \n if (!response.ok) {\n const error = await response.json();\n throw new Error(error.error || \"Failed to revert changes\");\n }\n \n const result = await response.json();\n setRevertResult({ \n success: true, \n message: `Successfully reverted changes to ${lastModifiedFile}!` \n });\n \n // Clear the last modified file after successful revert\n setTimeout(() => {\n setLastModifiedFile(null);\n setRevertResult(null);\n }, 3000);\n } catch (error) {\n setRevertResult({ \n success: false, \n message: error instanceof Error ? error.message : \"Failed to revert changes\" \n });\n } finally {\n setIsReverting(false);\n }\n };\n\n // Effect to add animation when lastModifiedFile changes\n useEffect(() => {\n if (lastModifiedFile) {\n // Add a class to the revert button to animate it\n const revertButton = document.querySelector('.revert-button');\n if (revertButton) {\n revertButton.classList.add('pulse-animation');\n setTimeout(() => {\n revertButton.classList.remove('pulse-animation');\n }, 1000);\n }\n }\n }, [lastModifiedFile]);\n\n // Add CSS for pulse animation\n useEffect(() => {\n const style = document.createElement('style');\n style.textContent = `\n @keyframes pulse {\n 0% {\n box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);\n }\n 70% {\n box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);\n }\n 100% {\n box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);\n }\n }\n \n .pulse-animation {\n animation: pulse 1.5s infinite;\n }\n `;\n document.head.appendChild(style);\n \n return () => {\n document.head.removeChild(style);\n };\n }, []);\n\n // Show a warning message if no anthropicApiKey is provided\n const showAnthropicKeyWarning = !anthropicApiKey;\n\n return (\n

\n setProject(undefined)}\n title=\"Back to projects\"\n >\n ←\n \n

{project.name}

\n\n \n\n setSoundEnabled(!soundEnabled)}\n title={soundEnabled ? \"Mute notification sound\" : \"Enable notification sound\"}\n >\n {soundEnabled ? \"🔔\" : \"🔕\"}\n \n\n {lastModifiedFile && (\n \n {isReverting ? (\n <>\n \n Reverting...\n \n ) : (\n <>\n \n Revert Last Change\n \n )}\n \n )}\n

\n {showAnthropicKeyWarning && (\n

\n \n

Anthropic API Key Missing

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

\n )}\n \n {revertResult && (\n

\n {revertResult.success ? (\n \n ) : (\n \n )}\n

{revertResult.success ? 'File Reverted' : 'Revert Failed'}

{revertResult.message}

\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

\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 occurred:

{error.stack}

\n )\n : undefined}\n

\n\n \n {running && (\n

\n \n \n Cancel Generation\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 fontFamily: \"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif\",\n lineHeight: \"1.5\",\n }}\n />\n\n {running ? (\n \n \n \n ) : (\n {\n const fileInput = document.querySelector(\"input[type=\\\"file\\\"]\");\n if (fileInput) {\n fileInput.click();\n }\n }}\n title=\"Attach images\"\n >\n 📎","deleted","label",[175,176,158],"frontend","components","permalink","https://www.val.town/x/loading/OpenTownie/code/frontend/components/Chat.tsx","extension","actionData","errors"]