/** * Centralized tool prompts/descriptions. * Each prompt is either a string constant or a template function. */ // ============================================================================ // JavaScript REPL Tool // ============================================================================ export const JAVASCRIPT_REPL_BASE_DESCRIPTION = `Execute JavaScript code in a sandboxed browser environment with full modern browser capabilities. Environment: Modern browser with ALL Web APIs available: - ES2023+ JavaScript (async/await, optional chaining, nullish coalescing, etc.) - DOM APIs (document, window, Canvas, WebGL, etc.) - Fetch API for HTTP requests Loading external libraries via dynamic imports (use esm.run): - XLSX (Excel files): const XLSX = await import('https://esm.run/xlsx'); - Papa Parse (CSV): const Papa = (await import('https://esm.run/papaparse')).default; - Lodash: const _ = await import('https://esm.run/lodash-es'); - D3.js: const d3 = await import('https://esm.run/d3'); - Chart.js: const Chart = (await import('https://esm.run/chart.js/auto')).default; - Three.js: const THREE = await import('https://esm.run/three'); - Any npm package: await import('https://esm.run/package-name') IMPORTANT for graphics/canvas: - Use fixed dimensions like 400x400 or 800x600, NOT window.innerWidth/Height - For Three.js: renderer.setSize(400, 400) and camera aspect ratio of 1 - For Chart.js: Set options: { responsive: false, animation: false } to ensure immediate rendering - Web Storage (localStorage, sessionStorage, IndexedDB) - Web Workers, WebAssembly, WebSockets - Media APIs (Audio, Video, WebRTC) - File APIs (Blob, FileReader, etc.) - Crypto API for cryptography - And much more - anything a modern browser supports! Output: - console.log() - All output is captured as text`; export const JAVASCRIPT_REPL_CHART_EXAMPLE = ` - Chart.js example: const Chart = (await import('https://esm.run/chart.js/auto')).default; const canvas = document.createElement('canvas'); canvas.width = 400; canvas.height = 300; document.body.appendChild(canvas); new Chart(canvas, { type: 'line', data: { labels: ['Jan', 'Feb', 'Mar', 'Apr'], datasets: [{ label: 'Sales', data: [10, 20, 15, 25], borderColor: 'blue' }] }, options: { responsive: false, animation: false } }); const blob = await new Promise(resolve => canvas.toBlob(resolve, 'image/png')); await returnDownloadableFile('chart.png', blob, 'image/png');`; export const JAVASCRIPT_REPL_FOOTER = ` - All standard browser globals (window, document, fetch, etc.)`; /** * Build complete JavaScript REPL description with optional provider docs. */ export function buildJavaScriptReplDescription(providerDocs?: string): string { return ( JAVASCRIPT_REPL_BASE_DESCRIPTION + (providerDocs ? "\n" + providerDocs + JAVASCRIPT_REPL_CHART_EXAMPLE : "") + JAVASCRIPT_REPL_FOOTER ); } // ============================================================================ // Artifacts Tool // ============================================================================ export const ARTIFACTS_BASE_DESCRIPTION = `Creates and manages file artifacts. Each artifact is a file with a filename and content. CRITICAL - ARTIFACT UPDATE WORKFLOW: 1. Creating new file? → Use 'create' 2. Changing specific section(s)? → Use 'update' (PREFERRED - token efficient) 3. Complete structural overhaul? → Use 'rewrite' (last resort only) ❌ NEVER regenerate entire documents to change small sections ✅ ALWAYS use 'update' for targeted edits (adding sources, fixing sections, appending to lists) Commands: 1. create: Create a new file - filename: Name with extension (required, e.g., 'summary.md', 'index.html') - title: Display name for the tab (optional, defaults to filename) - content: File content (required) - Use for: Brand new files only 2. update: Update part of an existing file (PREFERRED for edits) - filename: File to update (required) - old_str: Exact string to replace (required, can be multi-line) - new_str: Replacement string (required) - Use for: Adding sources, fixing typos, updating sections, appending content - Token efficient - only transmits the changed portion - Example: Adding source link to a section 3. rewrite: Completely replace a file's content (LAST RESORT) - filename: File to rewrite (required) - content: New content (required) - Use ONLY when: Complete structural overhaul needed - DO NOT use for: Adding one line, fixing one section, appending content 4. get: Retrieve the full content of a file - filename: File to retrieve (required) - Returns the complete file content 5. delete: Delete a file - filename: File to delete (required) 6. logs: Get console logs and errors (HTML files only) - filename: HTML file to get logs for (required) ANTI-PATTERNS TO AVOID: ❌ Using 'get' + modifying content + 'rewrite' to change one section ❌ Using createOrUpdateArtifact() in code for manual edits YOU make ✅ Use 'update' command for surgical, targeted modifications`; export const ARTIFACTS_RUNTIME_EXAMPLE = `- Example HTML artifact that processes a CSV attachment: `; export const ARTIFACTS_HTML_SECTION = ` For text/html artifacts: - Must be a single self-contained file - External scripts: Use CDNs like https://esm.sh, https://unpkg.com, or https://cdnjs.cloudflare.com - Preferred: Use https://esm.sh for npm packages (e.g., https://esm.sh/three for Three.js) - For ES modules, use: - For Three.js specifically: import from 'https://esm.sh/three' or 'https://esm.sh/three@0.160.0' - For addons: import from 'https://esm.sh/three/examples/jsm/controls/OrbitControls.js' - No localStorage/sessionStorage - use in-memory variables only - CSS should be included inline - CRITICAL REMINDER FOR HTML ARTIFACTS: - ALWAYS set a background color inline in