From d261e06a5a7db65a6dac40046d92264f2d9af77f Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 30 Jan 2026 16:14:29 +0000 Subject: [PATCH 1/8] Initial plan From 879bb809bd1cd14de98f6e34a39d92630584b8d2 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 30 Jan 2026 16:27:21 +0000 Subject: [PATCH 2/8] Add Boxy AI Assistant addon scaffolding with movable character Co-authored-by: supervoidcoder <88671013+supervoidcoder@users.noreply.github.com> --- src/addons/addons.js | 6 +- .../addons/boxy-assistant/_manifest_entry.js | 33 +++ .../addons/boxy-assistant/_runtime_entry.js | 7 + src/addons/addons/boxy-assistant/style.css | 184 +++++++++++++++ .../addons/boxy-assistant/userscript.js | 209 ++++++++++++++++++ src/addons/generated/addon-entries.js | 1 + src/addons/generated/addon-manifests.js | 2 + 7 files changed, 440 insertions(+), 2 deletions(-) create mode 100644 src/addons/addons/boxy-assistant/_manifest_entry.js create mode 100644 src/addons/addons/boxy-assistant/_runtime_entry.js create mode 100644 src/addons/addons/boxy-assistant/style.css create mode 100644 src/addons/addons/boxy-assistant/userscript.js diff --git a/src/addons/addons.js b/src/addons/addons.js index c58158695..7c8148bc2 100644 --- a/src/addons/addons.js +++ b/src/addons/addons.js @@ -81,12 +81,14 @@ const addons = [ 'tw-disable-cloud-variables', 'tw-disable-compiler', 'editor-stepping', - 'qcode' + 'qcode', + 'boxy-assistant' ]; const newAddons = [ 'expanded-backpack', - 'qcode' + 'qcode', + 'boxy-assistant' ]; // eslint-disable-next-line import/no-commonjs diff --git a/src/addons/addons/boxy-assistant/_manifest_entry.js b/src/addons/addons/boxy-assistant/_manifest_entry.js new file mode 100644 index 000000000..b1c6d7bb2 --- /dev/null +++ b/src/addons/addons/boxy-assistant/_manifest_entry.js @@ -0,0 +1,33 @@ +/* OmniBlocks custom addon */ +const manifest = { + "editorOnly": true, + "noTranslations": true, + "name": "Boxy AI Assistant", + "description": "An AI-powered assistant in the form of Boxy to help you learn and code better. Features local AI models and helpful animations.", + "credits": [ + { + "name": "supervoidcoder", + "link": "https://github.com/supervoidcoder" + }, + { + "name": "OmniBlocks Team" + } + ], + "dynamicDisable": true, + "userscripts": [ + { + "url": "userscript.js" + } + ], + "userstyles": [ + { + "url": "style.css" + } + ], + "tags": [ + "featured", + "new" + ], + "enabledByDefault": false +}; +export default manifest; diff --git a/src/addons/addons/boxy-assistant/_runtime_entry.js b/src/addons/addons/boxy-assistant/_runtime_entry.js new file mode 100644 index 000000000..f8ac5750a --- /dev/null +++ b/src/addons/addons/boxy-assistant/_runtime_entry.js @@ -0,0 +1,7 @@ +/* OmniBlocks custom addon */ +import _js from "./userscript.js"; +import _css from "!css-loader!./style.css"; +export const resources = { + "userscript.js": _js, + "style.css": _css, +}; diff --git a/src/addons/addons/boxy-assistant/style.css b/src/addons/addons/boxy-assistant/style.css new file mode 100644 index 000000000..cc3a9e42d --- /dev/null +++ b/src/addons/addons/boxy-assistant/style.css @@ -0,0 +1,184 @@ +/* Boxy AI Assistant Styles */ + +/* Container that overlays the entire editor */ +.boxy-assistant-container { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + pointer-events: none; /* Allow clicks to pass through container */ + z-index: 9999; + overflow: hidden; +} + +/* Boxy character */ +.boxy-character { + position: absolute; + width: 150px; + height: 156px; + pointer-events: auto; /* Enable interactions on Boxy */ + cursor: move; + transition: transform 0.3s ease; + transform-origin: center center; + user-select: none; +} + +.boxy-character.dragging { + transition: none; + cursor: grabbing; +} + +.boxy-character:hover { + filter: drop-shadow(0 0 10px rgba(0, 186, 135, 0.5)); +} + +.boxy-svg-wrapper { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} + +.boxy-svg-wrapper svg { + width: 100%; + height: auto; +} + +/* Boxy's eyes - for future animations */ +.boxy-eye { + transition: fill 0.2s ease; +} + +.boxy-character.excited .boxy-eye { + fill: #ff69b4; /* Star eyes color */ +} + +/* Text bubble */ +.boxy-text-bubble { + position: absolute; + bottom: 170px; + right: 180px; + max-width: 300px; + min-width: 200px; + background: linear-gradient(135deg, #0067bb 0%, #00ba87 100%); + border-radius: 20px; + padding: 15px 20px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); + pointer-events: auto; + animation: bubbleAppear 0.3s ease; + z-index: 10000; +} + +@keyframes bubbleAppear { + from { + opacity: 0; + transform: scale(0.8) translateY(10px); + } + to { + opacity: 1; + transform: scale(1) translateY(0); + } +} + +/* Bubble tail */ +.boxy-text-bubble::after { + content: ""; + position: absolute; + bottom: -10px; + right: 20px; + width: 0; + height: 0; + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-top: 15px solid #00ba87; +} + +.boxy-bubble-content { + color: white; + font-family: "Helvetica Neue", Arial, sans-serif; + font-size: 14px; + line-height: 1.5; +} + +.boxy-message { + margin: 0; + font-weight: 500; +} + +/* Animation states */ +.boxy-character.waving { + animation: wave 0.6s ease; +} + +@keyframes wave { + 0%, 100% { + transform: rotate(0deg); + } + 25% { + transform: rotate(-15deg); + } + 75% { + transform: rotate(15deg); + } +} + +.boxy-character.bouncing { + animation: bounce 0.5s ease; +} + +@keyframes bounce { + 0%, 100% { + transform: translateY(0); + } + 50% { + transform: translateY(-20px); + } +} + +/* Thinking animation */ +.boxy-character.thinking::before { + content: "..."; + position: absolute; + top: -30px; + left: 50%; + transform: translateX(-50%); + background: rgba(0, 103, 187, 0.9); + color: white; + padding: 5px 15px; + border-radius: 15px; + font-size: 20px; + font-weight: bold; + animation: thinking 1.5s infinite; +} + +@keyframes thinking { + 0%, 100% { + opacity: 0.5; + } + 50% { + opacity: 1; + } +} + +/* Responsive adjustments */ +@media (max-width: 768px) { + .boxy-character { + width: 100px; + height: 104px; + } + + .boxy-text-bubble { + max-width: 200px; + font-size: 12px; + padding: 10px 15px; + } +} + +/* Dark mode support */ +@media (prefers-color-scheme: dark) { + .boxy-text-bubble { + box-shadow: 0 4px 20px rgba(255, 255, 255, 0.1); + } +} diff --git a/src/addons/addons/boxy-assistant/userscript.js b/src/addons/addons/boxy-assistant/userscript.js new file mode 100644 index 000000000..735201bb8 --- /dev/null +++ b/src/addons/addons/boxy-assistant/userscript.js @@ -0,0 +1,209 @@ +/* Boxy AI Assistant - Main Userscript */ + +export default async function ({ addon, console }) { + console.log("Boxy AI Assistant initializing..."); + + // Create the Boxy container that overlays the entire editor + const boxyContainer = document.createElement("div"); + boxyContainer.className = "boxy-assistant-container"; + addon.tab.displayNoneWhileDisabled(boxyContainer, { display: "block" }); + + // Create the Boxy character element + const boxyCharacter = document.createElement("div"); + boxyCharacter.className = "boxy-character"; + boxyCharacter.innerHTML = ` +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ `; + + // Create text bubble for Boxy's messages + const textBubble = document.createElement("div"); + textBubble.className = "boxy-text-bubble"; + textBubble.style.display = "none"; // Hidden by default + textBubble.innerHTML = ` +
+

Hi! I'm Boxy, your AI assistant!

+
+ `; + + // Assemble the components + boxyContainer.appendChild(boxyCharacter); + boxyContainer.appendChild(textBubble); + + // Wait for the editor to be ready + while (true) { + const stageWrapper = await addon.tab.waitForElement('[class*="stage-wrapper"]', { + markAsSeen: true, + reduxEvents: ["scratch-gui/mode/SET_PLAYER", "fontsLoaded/SET_FONTS_LOADED"], + }); + + if (addon.tab.editorMode === "editor") { + // Add Boxy to the editor + document.body.appendChild(boxyContainer); + console.log("Boxy added to editor!"); + + // Initialize Boxy's position (bottom right corner) + initializeBoxyPosition(); + + // Make Boxy draggable + makeBoxyDraggable(); + + // Show welcome message after a short delay + setTimeout(() => { + showBoxyMessage("Hi! I'm Boxy, your AI assistant! Click and drag me to move me around!"); + }, 1000); + + break; + } + } + + // Initialize Boxy's starting position + function initializeBoxyPosition() { + boxyCharacter.style.left = "calc(100vw - 200px)"; + boxyCharacter.style.top = "calc(100vh - 300px)"; + } + + // Make Boxy draggable + function makeBoxyDraggable() { + let isDragging = false; + let currentX; + let currentY; + let initialX; + let initialY; + let xOffset = 0; + let yOffset = 0; + + boxyCharacter.addEventListener("mousedown", dragStart); + document.addEventListener("mousemove", drag); + document.addEventListener("mouseup", dragEnd); + + function dragStart(e) { + initialX = e.clientX - xOffset; + initialY = e.clientY - yOffset; + + if (e.target === boxyCharacter || boxyCharacter.contains(e.target)) { + isDragging = true; + boxyCharacter.classList.add("dragging"); + } + } + + function drag(e) { + if (isDragging) { + e.preventDefault(); + + currentX = e.clientX - initialX; + currentY = e.clientY - initialY; + + xOffset = currentX; + yOffset = currentY; + + setBoxyTranslate(currentX, currentY); + } + } + + function dragEnd(e) { + initialX = currentX; + initialY = currentY; + + isDragging = false; + boxyCharacter.classList.remove("dragging"); + } + + function setBoxyTranslate(xPos, yPos) { + boxyCharacter.style.transform = `translate3d(${xPos}px, ${yPos}px, 0)`; + } + } + + // Show a message in Boxy's text bubble + function showBoxyMessage(message, duration = 5000) { + const messageElement = textBubble.querySelector(".boxy-message"); + messageElement.textContent = message; + textBubble.style.display = "block"; + + // Auto-hide after duration + if (duration > 0) { + setTimeout(() => { + textBubble.style.display = "none"; + }, duration); + } + } + + // Animation system (placeholder for future animations) + const animationState = { + current: "idle", + isAnimating: false + }; + + // Future: Wave animation + function playWaveAnimation() { + console.log("Wave animation would play here"); + // TODO: Implement wave animation + } + + // Future: Point animation (for pointing at blocks/buttons) + function playPointAnimation(targetElement) { + console.log("Point animation would play here", targetElement); + // TODO: Implement pointing animation + } + + // Expose API for future AI integration + window.boxyAPI = { + showMessage: showBoxyMessage, + moveTo: (x, y) => { + boxyCharacter.style.transform = `translate3d(${x}px, ${y}px, 0)`; + }, + playAnimation: (animationName) => { + console.log(`Playing animation: ${animationName}`); + // TODO: Implement animation system + } + }; + + console.log("Boxy AI Assistant fully initialized!"); +} diff --git a/src/addons/generated/addon-entries.js b/src/addons/generated/addon-entries.js index 2a369010f..9d0bfad51 100644 --- a/src/addons/generated/addon-entries.js +++ b/src/addons/generated/addon-entries.js @@ -81,4 +81,5 @@ export default { "tw-disable-cloud-variables": () => import(/* webpackChunkName: "addon-entry-tw-disable-cloud-variables" */ "../addons/tw-disable-cloud-variables/_runtime_entry.js"), "tw-disable-compiler": () => import(/* webpackChunkName: "addon-entry-tw-disable-compiler" */ "../addons/tw-disable-compiler/_runtime_entry.js"), "editor-stepping": () => import(/* webpackChunkName: "addon-entry-editor-stepping" */ "../addons/editor-stepping/_runtime_entry.js"), + "boxy-assistant": () => import(/* webpackChunkName: "addon-entry-boxy-assistant" */ "../addons/boxy-assistant/_runtime_entry.js"), }; diff --git a/src/addons/generated/addon-manifests.js b/src/addons/generated/addon-manifests.js index 9f0a4ea1a..5a578b40c 100644 --- a/src/addons/generated/addon-manifests.js +++ b/src/addons/generated/addon-manifests.js @@ -79,6 +79,7 @@ import _tw_remove_feedback from "../addons/tw-remove-feedback/_manifest_entry.js import _tw_disable_cloud_variables from "../addons/tw-disable-cloud-variables/_manifest_entry.js"; import _tw_disable_compiler from "../addons/tw-disable-compiler/_manifest_entry.js"; import _editor_stepping from "../addons/editor-stepping/_manifest_entry.js"; +import _boxy_assistant from "../addons/boxy-assistant/_manifest_entry.js"; import santa from "../addons/santa/_manifest_entry.js"; export default { santa, @@ -162,4 +163,5 @@ export default { "tw-disable-cloud-variables": _tw_disable_cloud_variables, "tw-disable-compiler": _tw_disable_compiler, "editor-stepping": _editor_stepping, + "boxy-assistant": _boxy_assistant, }; From 4dfde663f90153e607905de64b14b62f38325797 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 30 Jan 2026 16:28:20 +0000 Subject: [PATCH 3/8] Add comprehensive README for Boxy AI Assistant addon Co-authored-by: supervoidcoder <88671013+supervoidcoder@users.noreply.github.com> --- src/addons/addons/boxy-assistant/README.md | 171 +++++++++++++++++++++ 1 file changed, 171 insertions(+) create mode 100644 src/addons/addons/boxy-assistant/README.md diff --git a/src/addons/addons/boxy-assistant/README.md b/src/addons/addons/boxy-assistant/README.md new file mode 100644 index 000000000..5be4f4c25 --- /dev/null +++ b/src/addons/addons/boxy-assistant/README.md @@ -0,0 +1,171 @@ +# Boxy AI Assistant Addon + +An AI-powered assistant addon for OmniBlocks that provides helpful guidance and feedback through an interactive character. + +## Overview + +Boxy is an animated AI assistant mascot that appears in the OmniBlocks editor. Unlike traditional chatbots, Boxy is designed to be: +- **Visual and Interactive**: Appears as a draggable character with animations +- **Educational**: Focuses on teaching concepts rather than just generating code +- **Privacy-First**: Runs locally using WebGPU or user-provided API keys +- **Non-Intrusive**: Tucked away like Clippy, not taking over the interface + +## Current Status + +### โœ… Implemented +- Basic addon scaffolding and registration +- Draggable Boxy character with smooth animations +- Text bubble system for displaying messages +- CSS animations (wave, bounce, thinking) +- API exposed for future AI integration +- Responsive design with proper positioning + +### ๐Ÿšง In Progress +- Animation system for pointing and gesturing +- 48-frame star eyes animation sequence +- Arm growing animation for block manipulation + +### ๐Ÿ“‹ Planned +- ONNX Runtime WebGPU integration +- Local AI model loading with progress indicator +- Tool calling system for precise UI interactions +- Chat interface with context awareness +- Code editing capabilities with visual feedback +- Optional API key support (with strong warnings) + +## Features + +### Draggable Character +Boxy can be moved anywhere on the screen by clicking and dragging. Position is maintained across sessions (planned). + +### Smart Text Bubbles +Messages appear in styled speech bubbles with: +- Gradient background matching OmniBlocks theme +- Auto-hide after 5 seconds (configurable) +- Proper positioning relative to Boxy +- Smooth appear/disappear animations + +### Animation System +Pre-built CSS animations include: +- **Wave**: Friendly greeting animation +- **Bounce**: Excitement or success indicator +- **Thinking**: Shows processing/loading state +- **Excited**: Eye color change for enthusiasm + +### API Interface +Exposed via `window.boxyAPI`: +```javascript +// Show a message +window.boxyAPI.showMessage("Hello!", 5000); + +// Move Boxy to a specific position +window.boxyAPI.moveTo(100, 200); + +// Play an animation +window.boxyAPI.playAnimation("wave"); +``` + +## File Structure + +``` +boxy-assistant/ +โ”œโ”€โ”€ _manifest_entry.js # Addon metadata and configuration +โ”œโ”€โ”€ _runtime_entry.js # Resource imports for webpack +โ”œโ”€โ”€ userscript.js # Main addon logic +โ””โ”€โ”€ style.css # Styling and animations +``` + +## How It Works + +1. **Initialization**: Addon waits for the editor to be ready +2. **DOM Injection**: Creates overlay container with Boxy character +3. **Event Handlers**: Sets up drag-and-drop functionality +4. **Welcome Message**: Shows greeting after 1 second +5. **API Exposure**: Makes boxyAPI available globally + +## Design Philosophy + +### Why Not a Traditional Chatbot? +- **For Kids**: Anthropomorphized characters are more engaging +- **Context Focused**: Small, specific feedback is better than long responses +- **Visual Learning**: Pointing and gesturing > text explanations +- **Reduced Context**: Less AI processing = works on slower devices + +### Why Local AI? +- **Privacy**: Kids' code shouldn't be sent to corporations +- **Education**: Teaches about local vs. cloud computing +- **Accessibility**: Works without internet connection +- **Performance**: WebGPU acceleration on modern devices + +### Why Animations? +- **Teaching**: Shows *how* to do things, not just *what* to do +- **Engagement**: Movement keeps attention +- **Feedback**: Visual confirmation of actions +- **Personality**: Makes the assistant feel alive + +## Future Development + +### Animation Improvements +- Implement frame-by-frame animation system +- Add sprite sheet support for complex animations +- Create library of gestures and expressions +- Add blinking and idle animations + +### AI Integration +1. **Model Selection**: Small, efficient models (< 1GB) +2. **WebGPU Acceleration**: Use ONNX Runtime Web +3. **Tool Calling**: Enable Boxy to: + - Point at specific blocks + - Navigate to categories + - Highlight UI elements + - Demonstrate actions + +### User Experience +- Settings panel for customization +- Animation speed controls +- Voice toggle (text-to-speech) +- Personality options +- Theme integration + +## Technical Details + +### Dependencies +- OmniBlocks addon system +- Scratch GUI framework +- Future: ONNX Runtime Web + WebGPU + +### Browser Compatibility +- Chrome/Edge: Full support (WebGPU available) +- Firefox: Basic support (CSS animations only) +- Safari: Basic support (limited WebGPU) + +### Performance +- Lightweight: < 10KB minified +- No runtime dependencies +- CSS-based animations (hardware accelerated) +- Future AI: GPU-accelerated inference + +## Contributing + +When adding features to Boxy: +1. Keep the code clean and documented +2. Test animations on slow devices +3. Consider accessibility (screen readers, etc.) +4. Maintain the friendly, helpful personality +5. Respect user privacy always + +## Philosophy Quote + +> "Sorry, buddy. I can suggest things to you, help you learn a concept, or brainstorm fun things, but if you're here to vibe code, this ain't the place for you, pal." +> โ€” Boxy, on being asked to write code for users + +## Credits + +- Created by: @supervoidcoder +- OmniBlocks Team +- Boxy character design: OmniBlocks (CC BY-SA 4.0) + +## License + +Part of OmniBlocks, licensed under GNU GPLv3. +Boxy character is licensed under CC BY-SA 4.0. From c0c5fc38b2a92e5dcb04070eceebebf332339ba1 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 30 Jan 2026 16:29:50 +0000 Subject: [PATCH 4/8] Add usage guide and unit tests for Boxy addon Co-authored-by: supervoidcoder <88671013+supervoidcoder@users.noreply.github.com> --- src/addons/addons/boxy-assistant/USAGE.md | 97 +++++++++++++++++++++++ test/unit/addons/boxy-assistant.test.js | 53 +++++++++++++ 2 files changed, 150 insertions(+) create mode 100644 src/addons/addons/boxy-assistant/USAGE.md create mode 100644 test/unit/addons/boxy-assistant.test.js diff --git a/src/addons/addons/boxy-assistant/USAGE.md b/src/addons/addons/boxy-assistant/USAGE.md new file mode 100644 index 000000000..039ce76f9 --- /dev/null +++ b/src/addons/addons/boxy-assistant/USAGE.md @@ -0,0 +1,97 @@ +# Boxy AI Assistant - Quick Start Guide + +## Enabling Boxy + +1. **Open OmniBlocks** in your browser +2. Click the **Settings** icon (โš™๏ธ gear icon) in the top-right corner +3. Look for **"Boxy AI Assistant"** in the addons list + - It should be in the "Featured" or "New" section +4. **Toggle the switch** to enable it +5. Return to the editor + +## Using Boxy + +### First Interaction +When you enable Boxy for the first time, you'll see: +- A small robot character appear in the bottom-right corner +- A speech bubble saying "Hi! I'm Boxy, your AI assistant!" + +### Moving Boxy Around +- **Click and drag** Boxy to move him anywhere on screen +- Release to place him in a new position +- Boxy has a subtle glow effect when you hover over him + +### Current Features (v1.0) +- โœ… Draggable character +- โœ… Welcome message +- โœ… Smooth animations +- โœ… Text bubble system + +### Upcoming Features +- ๐Ÿšง AI-powered assistance +- ๐Ÿšง Block suggestions +- ๐Ÿšง Code explanations +- ๐Ÿšง Local AI model (no internet required!) +- ๐Ÿšง Optional API key support + +## Technical Details + +### Browser Compatibility +- **Chrome/Edge**: Full support โœ… +- **Firefox**: Basic support โœ… +- **Safari**: Basic support โœ… + +### Performance +- **Lightweight**: Adds minimal overhead +- **Hardware Accelerated**: Uses CSS transforms for smooth animations +- **No External Dependencies**: Works completely offline + +### Privacy +- **Local First**: All data stays on your device +- **No Tracking**: Boxy doesn't send any information anywhere +- **Open Source**: You can review all the code + +## API for Developers + +If you want to interact with Boxy programmatically, use the global API: + +```javascript +// Show a custom message +window.boxyAPI.showMessage("Great job!", 3000); + +// Move Boxy to a specific position +window.boxyAPI.moveTo(150, 200); + +// Trigger an animation +window.boxyAPI.playAnimation("wave"); +``` + +## Troubleshooting + +### Boxy doesn't appear +1. Make sure the addon is enabled in settings +2. Refresh the page +3. Check browser console for errors (F12) + +### Boxy is in the way +- Just drag him to a different corner! +- Or disable the addon temporarily in settings + +### Animation issues +- Make sure your browser supports CSS animations +- Try disabling hardware acceleration if animations are choppy + +## Feedback + +Found a bug or have a suggestion? Open an issue on our GitHub! + +## What's Next? + +The Boxy AI Assistant is just getting started. Future updates will include: +- **Smart Suggestions**: Context-aware help +- **Code Review**: Boxy can review your code and suggest improvements +- **Interactive Tutorials**: Step-by-step guidance with visual cues +- **Voice Support**: Boxy can speak (optional) +- **Customization**: Change Boxy's appearance and personality + +Stay tuned! ๐ŸŽ‰ diff --git a/test/unit/addons/boxy-assistant.test.js b/test/unit/addons/boxy-assistant.test.js new file mode 100644 index 000000000..ad5e6fd1d --- /dev/null +++ b/test/unit/addons/boxy-assistant.test.js @@ -0,0 +1,53 @@ +/** + * @jest-environment jsdom + */ + +describe('Boxy Assistant Addon', () => { + test('addon manifest exists and has correct structure', () => { + const manifest = require('../../../src/addons/addons/boxy-assistant/_manifest_entry.js').default; + + expect(manifest).toBeDefined(); + expect(manifest.name).toBe('Boxy AI Assistant'); + expect(manifest.editorOnly).toBe(true); + expect(manifest.noTranslations).toBe(true); + expect(manifest.enabledByDefault).toBe(false); + expect(manifest.tags).toContain('featured'); + expect(manifest.tags).toContain('new'); + }); + + test('addon has required files defined', () => { + const manifest = require('../../../src/addons/addons/boxy-assistant/_manifest_entry.js').default; + + expect(manifest.userscripts).toBeDefined(); + expect(manifest.userscripts.length).toBe(1); + expect(manifest.userscripts[0].url).toBe('userscript.js'); + + expect(manifest.userstyles).toBeDefined(); + expect(manifest.userstyles.length).toBe(1); + expect(manifest.userstyles[0].url).toBe('style.css'); + }); + + test('addon is registered in addons.js', () => { + const addonsModule = require('../../../src/addons/addons.js'); + + expect(addonsModule.addons).toContain('boxy-assistant'); + expect(addonsModule.newAddons).toContain('boxy-assistant'); + }); + + test('addon has proper credits', () => { + const manifest = require('../../../src/addons/addons/boxy-assistant/_manifest_entry.js').default; + + expect(manifest.credits).toBeDefined(); + expect(manifest.credits.length).toBeGreaterThan(0); + expect(manifest.credits[0].name).toBe('supervoidcoder'); + }); + + test('addon description is informative', () => { + const manifest = require('../../../src/addons/addons/boxy-assistant/_manifest_entry.js').default; + + expect(manifest.description).toBeDefined(); + expect(manifest.description.length).toBeGreaterThan(50); + expect(manifest.description).toContain('AI'); + expect(manifest.description).toContain('Boxy'); + }); +}); From 7df671e5e6c84a16fad82ef0cfc86a5e8693548e Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 30 Jan 2026 16:31:02 +0000 Subject: [PATCH 5/8] Add visual preview documentation for Boxy addon Co-authored-by: supervoidcoder <88671013+supervoidcoder@users.noreply.github.com> --- .../addons/boxy-assistant/VISUAL_PREVIEW.md | 254 ++++++++++++++++++ 1 file changed, 254 insertions(+) create mode 100644 src/addons/addons/boxy-assistant/VISUAL_PREVIEW.md diff --git a/src/addons/addons/boxy-assistant/VISUAL_PREVIEW.md b/src/addons/addons/boxy-assistant/VISUAL_PREVIEW.md new file mode 100644 index 000000000..edea4b4c7 --- /dev/null +++ b/src/addons/addons/boxy-assistant/VISUAL_PREVIEW.md @@ -0,0 +1,254 @@ +# Boxy AI Assistant - Visual Preview + +## What You'll See + +When you enable the Boxy AI Assistant addon, here's what appears: + +``` +โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” +โ”‚ OmniBlocks Editor [โš™๏ธ Settings] โ”‚ +โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค +โ”‚ โ”‚ +โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ +โ”‚ โ”‚ Code Blocks โ”‚ โ”‚ +โ”‚ โ”‚ โ”‚ โ”‚ +โ”‚ โ”‚ โ€ข Motion โ”‚ โ”‚ +โ”‚ โ”‚ โ€ข Looks โ”‚ [Stage Preview Area] โ”‚ +โ”‚ โ”‚ โ€ข Sound โ”‚ โ”‚ +โ”‚ โ”‚ ... โ”‚ โ”‚ +โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ +โ”‚ โ”‚ +โ”‚ โ”‚ +โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ +โ”‚ โ”‚ Hi! I'm Boxy, โ”‚ โ”‚ +โ”‚ โ”‚ your AI assistant! โ”‚ โ”‚ +โ”‚ โ”‚ Click and drag me โ”‚ โ”‚ +โ”‚ โ”‚ to move me around! โ”‚ โ”‚ +โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ +โ”‚ โ”‚ โ”‚ +โ”‚ โ•”โ•โ•โ•โ–ผโ•โ•โ•— โ”‚ +โ”‚ โ•‘ ๐Ÿ‘€ โ•‘ โ† Boxy โ”‚ +โ”‚ โ•‘ โ•‘ โ”‚ +โ”‚ โ•‘ ๐Ÿ˜Š โ•‘ โ”‚ +โ”‚ โ•šโ•โ•โ•โ•โ•โ•โ• โ”‚ +โ”‚ โ”‚ +โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ +``` + +## Boxy Character Details + +``` + Antennae + โ”‚ โ”‚ + โ•”โ•โ•โ•โ•งโ•โ•งโ•โ•โ•โ•— + โ•‘ [โ—] [โ—] โ•‘ โ† Eyes (can animate!) + โ•‘ โ•‘ + โ•‘ _ โ•‘ โ† Mouth (smile) + โ•šโ•โ•โ•โ•โ•โ•โ•โ•โ•โ• + โ•‘โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•‘ โ† Body with display + โ•‘ โ— ||| โ—โ•‘ + โ•šโ•โ•โ•โ•โ•โ•โ•โ•โ•โ• +``` + +### Boxy Specifications: +- **Size**: 150px ร— 156px (adjustable) +- **Position**: Bottom-right corner (default) +- **Colors**: OmniBlocks gradient (blue to teal) +- **Features**: + - Draggable anywhere on screen + - Glow effect on hover + - Animated eyes and expressions + - Speech bubble for messages + +## States & Animations + +### 1. Idle State +``` +โ•”โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•— +โ•‘ โ€ข โ€ข โ•‘ Regular eyes, slight breathing animation +โ•‘ _ โ•‘ +โ•šโ•โ•โ•โ•โ•โ•โ•โ•โ•โ• +``` + +### 2. Excited State (Star Eyes) +``` +โ•”โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•— +โ•‘ โ˜… โ˜… โ•‘ Star eyes when celebrating or excited +โ•‘ โ—ก โ•‘ Big smile +โ•šโ•โ•โ•โ•โ•โ•โ•โ•โ•โ• +``` + +### 3. Thinking State +``` +โ•”โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•— +โ•‘ โ€ข โ€ข โ•‘ Regular eyes +โ•‘ ~ โ•‘ +โ•šโ•โ•โ•โ•โ•โ•โ•โ•โ•โ• + ... โ† Floating dots above head +``` + +### 4. Waving Animation +``` +Frame 1: Frame 2: Frame 3: +โ•”โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•— โ•”โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•— โ•”โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•— +โ•‘ โ€ข โ€ข โ•‘ โ•‘ โ€ข โ€ข โ•‘ โ•‘ โ€ข โ€ข โ•‘ +โ•‘ _ โ•‘ โ†’ โ•‘ _ โ•‘ โ†’ โ•‘ _ โ•‘ +โ•šโ•โ•โ•โ•โ•โ•โ•โ•โ•โ• โ•šโ•โ•โ•โ•โ•โ•โ•โ•โ•โ• โ•šโ•โ•โ•โ•โ•โ•โ•โ•โ•โ• + \o |o o| +``` + +## Text Bubble Examples + +### Welcome Message +``` + โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” + โ”‚ Hi! I'm Boxy, your AI โ”‚ + โ”‚ assistant! Drag me around! โ”‚ + โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ + โ”‚ + โ•”โ•โ•โ–ผโ•โ•— + โ•‘ โ€ข โ€ข โ•‘ + โ•šโ•โ•โ•โ•โ• +``` + +### Help Message +``` + โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” + โ”‚ Great job! That block โ”‚ + โ”‚ makes your sprite move. โ”‚ + โ”‚ Try adding a sound! โ”‚ + โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ + โ”‚ + โ•”โ•โ•โ–ผโ•โ•— + โ•‘ โ˜… โ˜… โ•‘ (Excited!) + โ•šโ•โ•โ•โ•โ• +``` + +### Error/Tip Message +``` + โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” + โ”‚ Hmm, that loop might run โ”‚ + โ”‚ forever. Want to add a โ”‚ + โ”‚ condition? โ”‚ + โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ + โ”‚ + โ•”โ•โ•โ–ผโ•โ•— + โ•‘ ~ ~โ•‘ (Concerned) + โ•šโ•โ•โ•โ•โ• +``` + +## Interaction Patterns + +### Dragging Boxy +``` +1. Hover over Boxy + โ•”โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•— + โ•‘ โ€ข โ€ข โ•‘ โ† Cursor: move (grab hand) + โ•‘ _ โ•‘ Glow appears + โ•šโ•โ•โ•โ•โ•โ•โ•โ•โ•โ• + +2. Click and hold + โ•”โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•— + โ•‘ โ€ข โ€ข โ•‘ โ† Cursor: grabbing (closed hand) + โ•‘ _ โ•‘ Slightly larger + โ•šโ•โ•โ•โ•โ•โ•โ•โ•โ•โ• + +3. Drag to new position + โ•”โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•— + โ•‘ โ€ข โ€ข โ•‘ โ†’ โ†’ โ†’ โ†’ New position! + โ•‘ _ โ•‘ + โ•šโ•โ•โ•โ•โ•โ•โ•โ•โ•โ• +``` + +## Settings Panel Appearance + +``` +โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” +โ”‚ Addons Settings โ”‚ +โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค +โ”‚ โ”‚ +โ”‚ โ˜… Featured โ”‚ +โ”‚ โ”‚ +โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ +โ”‚ โ”‚ ๐Ÿค– Boxy AI Assistant [OFF] โ”‚ โ”‚ +โ”‚ โ”‚ โ”‚ โ”‚ +โ”‚ โ”‚ An AI-powered assistant to help โ”‚ โ”‚ +โ”‚ โ”‚ you learn and code better. โ”‚ โ”‚ +โ”‚ โ”‚ โ”‚ โ”‚ +โ”‚ โ”‚ Tags: featured, new โ”‚ โ”‚ +โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ +โ”‚ โ”‚ +โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ +``` + +## Real-World Screenshot Placeholder + +``` +[When you build and run OmniBlocks, take a screenshot here!] + +Expected location for screenshot: +/docs/images/boxy-assistant-screenshot.png + +To capture: +1. Enable the addon +2. Let Boxy appear with welcome message +3. Take screenshot showing: + - Boxy character + - Speech bubble + - OmniBlocks interface +``` + +## Color Scheme + +- **Primary**: #0067bb to #00ba87 (gradient) +- **Eyes**: #ffcd00 (yellow/gold) +- **Mouth**: #00ff2a (green - happy) +- **Body**: #032500 (dark green) +- **Speech Bubble**: Same gradient as primary +- **Text**: White (#ffffff) + +## Responsive Behavior + +### Desktop (> 768px) +- Boxy: 150px ร— 156px +- Speech bubble: Max 300px wide +- Font: 14px + +### Mobile/Tablet (< 768px) +- Boxy: 100px ร— 104px +- Speech bubble: Max 200px wide +- Font: 12px + +## Z-Index Layering + +``` +Layer Stack (bottom to top): +โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ” +10000 - Speech Bubble + 9999 - Boxy Character + -- - Boxy Container + 1 - Editor UI + 0 - Base elements +``` + +## Future Visual Enhancements + +- [ ] Blinking animation for eyes +- [ ] Arm/hand animations for gestures +- [ ] Particle effects for celebrations +- [ ] Customizable colors/themes +- [ ] Multiple expressions/emotions +- [ ] Shadow effects for depth +- [ ] Smooth position interpolation + +--- + +## For Developers + +To modify Boxy's appearance, edit: +- **SVG Structure**: `userscript.js` (inline SVG) +- **Styling**: `style.css` +- **Animations**: `style.css` (@keyframes) +- **Positioning**: `userscript.js` (JavaScript) + +For color changes, update the gradient stops in the SVG's `` elements. From 228d7356cb76b328fd808d908d88eb00d14297c5 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 30 Jan 2026 16:32:58 +0000 Subject: [PATCH 6/8] Add comprehensive development roadmap for Boxy addon Co-authored-by: supervoidcoder <88671013+supervoidcoder@users.noreply.github.com> --- src/addons/addons/boxy-assistant/ROADMAP.md | 474 ++++++++++++++++++++ 1 file changed, 474 insertions(+) create mode 100644 src/addons/addons/boxy-assistant/ROADMAP.md diff --git a/src/addons/addons/boxy-assistant/ROADMAP.md b/src/addons/addons/boxy-assistant/ROADMAP.md new file mode 100644 index 000000000..92009390b --- /dev/null +++ b/src/addons/addons/boxy-assistant/ROADMAP.md @@ -0,0 +1,474 @@ +# Boxy AI Assistant - Development Roadmap + +## Current Status: v1.0 - Foundation Complete โœ… + +The basic addon scaffolding and character display system is complete and working. + +--- + +## Roadmap Phases + +### Phase 1: Foundation & Scaffolding โœ… COMPLETED +**Status**: Released in PR #[TBD] +**Completed**: January 2026 + +#### What's Done: +- [x] Addon registration and configuration +- [x] Basic Boxy character display (SVG inline) +- [x] Drag-and-drop functionality +- [x] Text bubble system +- [x] Animation state machine foundation +- [x] CSS animations (wave, bounce, thinking) +- [x] Developer API (`window.boxyAPI`) +- [x] Comprehensive documentation +- [x] Unit tests + +#### Files Created: +- `_manifest_entry.js` +- `_runtime_entry.js` +- `userscript.js` (209 lines) +- `style.css` (184 lines) +- `README.md` +- `USAGE.md` +- `VISUAL_PREVIEW.md` +- `test/unit/addons/boxy-assistant.test.js` + +**Total**: ~955 lines of code + documentation + +--- + +### Phase 2: Enhanced Animations ๐Ÿ”„ NEXT UP +**Target**: Q1 2026 +**Priority**: Medium + +#### Goals: +Implement the full animation system to make Boxy feel alive and expressive. + +#### Tasks: +- [ ] **Eye Animations** + - [ ] Implement 48-frame "star eyes" animation sequence + - [ ] Add blinking animation (random intervals) + - [ ] Add "looking around" idle animation + - [ ] Eye color changes based on state + +- [ ] **Body Animations** + - [ ] Add subtle breathing animation (idle state) + - [ ] Create "jumping" animation for excitement + - [ ] Add "nodding" animation for acknowledgment + - [ ] Add "shaking head" animation for corrections + +- [ ] **Arm/Hand System** + - [ ] Design arm sprite system + - [ ] Implement "growing arms" animation + - [ ] Create pointing gesture (left, right, up, down) + - [ ] Add "grabbing" animation for block manipulation + - [ ] Add waving animation refinement + +- [ ] **Expression System** + - [ ] Happy (default) + - [ ] Excited (star eyes) + - [ ] Thinking (dots, neutral eyes) + - [ ] Confused (tilted, questioning) + - [ ] Sad (downturned mouth) + - [ ] Celebrating (confetti particles?) + +#### Files to Modify: +- `userscript.js` - Add animation frame system +- `style.css` - Add new @keyframes +- Create: `animations.js` - Dedicated animation controller + +#### Testing: +- Add animation performance tests +- Test on low-end devices +- Verify no memory leaks from animations + +**Estimated Effort**: 40-60 hours + +--- + +### Phase 3: AI Integration - Local Models ๐Ÿค– PRIORITY +**Target**: Q2 2026 +**Priority**: High + +#### Goals: +Integrate local AI using ONNX Runtime WebGPU for privacy-first assistance. + +#### Tasks: +- [ ] **ONNX Runtime Setup** + - [ ] Add ONNX Runtime Web dependency + - [ ] Implement WebGPU detection and fallback + - [ ] Test on multiple GPU vendors (NVIDIA, AMD, Intel) + +- [ ] **Model Selection** + - [ ] Research small models (< 1GB) + - Options: Phi-2, Gemma 2B, TinyLlama + - [ ] Quantize models for size/speed + - [ ] Test inference performance on various devices + - [ ] Choose best model for education use case + +- [ ] **Model Loading UI** + - [ ] Design "brain installation" interface + - [ ] Implement download progress indicator + - [ ] Add model compilation progress (for WebGPU) + - [ ] Handle errors gracefully (storage, memory, etc.) + - [ ] Cache model in IndexedDB + +- [ ] **Inference System** + - [ ] Implement streaming inference + - [ ] Add token-by-token display in speech bubble + - [ ] Optimize prompt engineering for education + - [ ] Add stop sequences and max token limits + +- [ ] **Context Management** + - [ ] Track conversation history (limited buffer) + - [ ] Include current project context + - [ ] Add block/sprite descriptions + - [ ] Clear context management + +#### Files to Create: +- `ai/onnx-runtime.js` - ONNX wrapper +- `ai/model-loader.js` - Model download/cache +- `ai/inference.js` - Inference engine +- `ai/context.js` - Context builder +- `ui/model-installer.jsx` - Installation UI + +#### Testing: +- Test on devices with varying RAM (4GB, 8GB, 16GB+) +- Test on integrated vs. dedicated GPUs +- Measure inference speed (tokens/sec) +- Test model quality (educational prompts) + +**Estimated Effort**: 80-120 hours + +--- + +### Phase 4: Tool Calling & UI Interaction ๐ŸŽฏ +**Target**: Q2-Q3 2026 +**Priority**: High + +#### Goals: +Enable Boxy to interact with the OmniBlocks interface programmatically. + +#### Tasks: +- [ ] **Tool System Architecture** + - [ ] Define tool schema/interface + - [ ] Implement tool registry + - [ ] Add tool calling parser (from LLM output) + - [ ] Add tool result formatter + +- [ ] **Movement Tools** + - [ ] `moveTo(x, y)` - Move Boxy to coordinates + - [ ] `pointAt(element)` - Point at UI element + - [ ] `lookAt(element)` - Turn to face element + - [ ] `moveToBlock(blockId)` - Move to specific block + +- [ ] **UI Query Tools** + - [ ] `getBlockPosition(blockId)` - Get block coordinates + - [ ] `getButtonPosition(name)` - Get button coordinates + - [ ] `getCategoryPosition(name)` - Get category position + - [ ] `getSpritePosition(name)` - Get sprite list item position + +- [ ] **Code Analysis Tools** + - [ ] `getProjectBlocks()` - Get all blocks in project + - [ ] `getSelectedSprite()` - Get current sprite + - [ ] `getVariables()` - Get project variables + - [ ] `analyzeCode()` - Basic code analysis + +- [ ] **UI Interaction Tools** (Read-only first!) + - [ ] `highlightBlock(blockId)` - Visually highlight + - [ ] `highlightCategory(name)` - Highlight category + - [ ] `showTooltip(element, text)` - Show tooltip + +- [ ] **Code Modification Tools** (Future, with user confirmation!) + - [ ] `suggestBlock(category, block)` - Show suggestion + - [ ] `addBlock(location, block)` - Add block with animation + - [ ] `moveBlock(blockId, x, y)` - Move block + - [ ] `deleteBlock(blockId)` - Delete block (with undo!) + +#### Files to Create: +- `tools/registry.js` - Tool system +- `tools/movement.js` - Movement tools +- `tools/ui-query.js` - UI query tools +- `tools/code-analysis.js` - Code analysis +- `tools/interaction.js` - UI interaction + +#### Testing: +- Test tool calling accuracy (LLM->function calls) +- Test coordinate calculations on different screen sizes +- Test performance with many tools available +- Test safety (can't break projects) + +**Estimated Effort**: 60-80 hours + +--- + +### Phase 5: Chat Interface & Interaction ๐Ÿ’ฌ +**Target**: Q3 2026 +**Priority**: Medium + +#### Goals: +Create a proper chat interface for extended conversations with Boxy. + +#### Tasks: +- [ ] **Chat UI** + - [ ] Design chat panel (collapsible sidebar?) + - [ ] Implement message history + - [ ] Add input field with send button + - [ ] Add voice input (speech-to-text) + - [ ] Add voice output (text-to-speech) + +- [ ] **Conversation Management** + - [ ] Track conversation context + - [ ] Add conversation reset button + - [ ] Save conversation history (localStorage) + - [ ] Add export conversation feature + +- [ ] **Smart Features** + - [ ] Code block suggestions in chat + - [ ] Inline previews of blocks + - [ ] Quick action buttons + - [ ] Context-aware suggestions + +- [ ] **Settings** + - [ ] Personality slider (helpful โ†” sassy) + - [ ] Verbosity control (brief โ†” detailed) + - [ ] Voice selection + - [ ] Animation speed control + +#### Files to Create: +- `ui/chat-panel.jsx` - Main chat UI +- `ui/message-list.jsx` - Message history +- `ui/input-field.jsx` - Input component +- `conversation/manager.js` - Conversation state + +#### Testing: +- Test chat performance with long histories +- Test voice input accuracy +- Test accessibility (screen readers) +- User experience testing + +**Estimated Effort**: 40-60 hours + +--- + +### Phase 6: API Key Support (Optional) โš ๏ธ +**Target**: Q3 2026 +**Priority**: Low + +#### Goals: +Support cloud AI as fallback for low-end devices, with strong privacy warnings. + +#### Tasks: +- [ ] **API Integration** + - [ ] OpenAI API support + - [ ] Anthropic Claude API support + - [ ] Google Gemini API support + - [ ] Groq API support (fast inference) + +- [ ] **Privacy Warnings** + - [ ] Design scary warning dialog + - [ ] Explain data implications clearly + - [ ] Require explicit consent + - [ ] Show warning on every session start + +- [ ] **API Key Management** + - [ ] Secure storage (not plaintext!) + - [ ] Key validation + - [ ] Usage tracking + - [ ] Cost warnings (if applicable) + +- [ ] **Fallback Logic** + - [ ] Detect insufficient resources + - [ ] Offer API key option + - [ ] Guide user through setup + - [ ] Always prefer local first + +#### Files to Create: +- `ai/api/openai.js` - OpenAI integration +- `ai/api/anthropic.js` - Claude integration +- `ai/api/google.js` - Gemini integration +- `ui/api-warning.jsx` - Warning dialog +- `settings/api-keys.jsx` - Key management + +**Estimated Effort**: 20-30 hours + +--- + +### Phase 7: Advanced Features ๐Ÿš€ +**Target**: Q4 2026 and beyond +**Priority**: Low + +#### Ideas: +- [ ] **Project Analysis** + - [ ] Detect common patterns + - [ ] Suggest optimizations + - [ ] Find potential bugs + - [ ] Code quality metrics + +- [ ] **Tutorial Integration** + - [ ] Guided tutorials with Boxy + - [ ] Step-by-step walkthroughs + - [ ] Interactive challenges + - [ ] Achievement system + +- [ ] **Customization** + - [ ] Custom Boxy skins + - [ ] Different AI personalities + - [ ] Custom prompts/behavior + - [ ] Theme integration + +- [ ] **Collaboration** + - [ ] Multi-user hints (if applicable) + - [ ] Share helpful tips + - [ ] Community prompts + +- [ ] **Accessibility** + - [ ] Screen reader support + - [ ] High contrast mode + - [ ] Keyboard navigation + - [ ] Reduced motion option + +#### Estimated Effort: Ongoing + +--- + +## Development Guidelines + +### Code Style +- Follow existing OmniBlocks conventions +- Write clear, commented code +- Keep functions small and focused +- Use meaningful variable names + +### Testing +- Write unit tests for new features +- Test on multiple browsers +- Test on low-end devices +- User testing before major releases + +### Documentation +- Update README for new features +- Add inline code comments +- Update USAGE guide +- Create examples for complex features + +### Performance +- Optimize for 60 FPS animations +- Minimize memory usage +- Lazy-load AI models +- Profile regularly + +### Privacy +- Local-first always +- Clear data handling +- User consent required +- Open about data usage + +--- + +## Contributing + +Want to help build Boxy? Here's how: + +1. **Pick a Task**: Choose from roadmap phases above +2. **Open an Issue**: Discuss your approach first +3. **Create a Branch**: `feature/boxy-[feature-name]` +4. **Implement**: Follow guidelines above +5. **Test Thoroughly**: Multiple devices/browsers +6. **Document**: Update relevant docs +7. **Submit PR**: Link to original issue + +### Priority Areas: +๐Ÿ”ด **High Priority**: AI Integration, Tool Calling +๐ŸŸก **Medium Priority**: Enhanced Animations, Chat Interface +๐ŸŸข **Low Priority**: API Key Support, Advanced Features + +--- + +## Technical Debt + +Things to address as we grow: + +- [ ] Refactor userscript.js into modules +- [ ] Extract SVG to separate file/component +- [ ] Improve animation performance profiling +- [ ] Add proper error boundaries +- [ ] Implement state machine pattern properly +- [ ] Add telemetry (privacy-preserving!) +- [ ] Optimize bundle size + +--- + +## Questions & Design Decisions + +### Open Questions: +- **Model Selection**: Which small model works best for education? +- **Voice**: Built-in TTS or external service? +- **Customization**: How much is too much? +- **Performance**: What's the minimum viable device? + +### Decided: +โœ… **Local-First**: AI runs locally, cloud is optional +โœ… **Privacy-First**: No tracking, no data collection +โœ… **Educational Focus**: Teach concepts, not write code +โœ… **Non-Intrusive**: Toggleable, movable, dismissible +โœ… **Open Source**: All code is visible and auditable + +--- + +## Success Metrics + +How do we know Boxy is successful? + +- **Adoption**: % of OmniBlocks users who enable Boxy +- **Retention**: % who keep it enabled after 1 week +- **Engagement**: Average interactions per session +- **Helpfulness**: User feedback/ratings +- **Learning**: Do users understand concepts better? +- **Privacy**: 0 data leaks or privacy violations +- **Performance**: < 5% impact on editor performance + +--- + +## Long-Term Vision + +Boxy should become: +- ๐ŸŽ“ The best AI teaching assistant for kids learning to code +- ๐Ÿ”’ A model of privacy-preserving AI +- ๐ŸŒŸ A fun, engaging character kids want to interact with +- ๐Ÿš€ A showcase of what's possible with local AI +- ๐ŸŽจ A platform for creative AI interactions + +**Goal**: Make learning to code fun, safe, and effective with AI assistance. + +--- + +## Resources + +### Useful Links: +- [ONNX Runtime Web](https://onnxruntime.ai/docs/tutorials/web/) +- [WebGPU Specification](https://www.w3.org/TR/webgpu/) +- [Hugging Face Models](https://huggingface.co/models) +- [Scratch Addons Documentation](https://scratchaddons.com/) + +### Model Options: +- [Phi-2 (2.7B)](https://huggingface.co/microsoft/phi-2) +- [Gemma 2B](https://huggingface.co/google/gemma-2b) +- [TinyLlama (1.1B)](https://huggingface.co/TinyLlama/TinyLlama-1.1B-Chat-v1.0) +- [Qwen2-0.5B](https://huggingface.co/Qwen/Qwen2-0.5B) + +### Learning Resources: +- [WebGPU Fundamentals](https://webgpufundamentals.org/) +- [ONNX Model Zoo](https://github.com/onnx/models) +- [LLM Tool Calling](https://platform.openai.com/docs/guides/function-calling) + +--- + +**Last Updated**: January 30, 2026 +**Maintainers**: @supervoidcoder, OmniBlocks Team +**Status**: Phase 1 Complete, Phase 2 Planning + +--- + +_"Sorry, buddy. I can suggest things to you, help you learn a concept, or brainstorm fun things, but if you're here to vibe code, this ain't the place for you, pal."_ +โ€” Boxy's Philosophy From f93ad12bbd62f72be921cb5f00f990cf7a0e768e Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 30 Jan 2026 20:56:03 +0000 Subject: [PATCH 7/8] Fix all review comments and add chat interface with Pollinations AI Co-authored-by: supervoidcoder <88671013+supervoidcoder@users.noreply.github.com> --- src/addons/addons/boxy-assistant/README.md | 171 ------- src/addons/addons/boxy-assistant/ROADMAP.md | 474 ------------------ src/addons/addons/boxy-assistant/USAGE.md | 97 ---- .../addons/boxy-assistant/VISUAL_PREVIEW.md | 254 ---------- src/addons/addons/boxy-assistant/style.css | 293 ++++++++--- .../addons/boxy-assistant/userscript.js | 367 +++++++++++--- 6 files changed, 543 insertions(+), 1113 deletions(-) delete mode 100644 src/addons/addons/boxy-assistant/README.md delete mode 100644 src/addons/addons/boxy-assistant/ROADMAP.md delete mode 100644 src/addons/addons/boxy-assistant/USAGE.md delete mode 100644 src/addons/addons/boxy-assistant/VISUAL_PREVIEW.md diff --git a/src/addons/addons/boxy-assistant/README.md b/src/addons/addons/boxy-assistant/README.md deleted file mode 100644 index 5be4f4c25..000000000 --- a/src/addons/addons/boxy-assistant/README.md +++ /dev/null @@ -1,171 +0,0 @@ -# Boxy AI Assistant Addon - -An AI-powered assistant addon for OmniBlocks that provides helpful guidance and feedback through an interactive character. - -## Overview - -Boxy is an animated AI assistant mascot that appears in the OmniBlocks editor. Unlike traditional chatbots, Boxy is designed to be: -- **Visual and Interactive**: Appears as a draggable character with animations -- **Educational**: Focuses on teaching concepts rather than just generating code -- **Privacy-First**: Runs locally using WebGPU or user-provided API keys -- **Non-Intrusive**: Tucked away like Clippy, not taking over the interface - -## Current Status - -### โœ… Implemented -- Basic addon scaffolding and registration -- Draggable Boxy character with smooth animations -- Text bubble system for displaying messages -- CSS animations (wave, bounce, thinking) -- API exposed for future AI integration -- Responsive design with proper positioning - -### ๐Ÿšง In Progress -- Animation system for pointing and gesturing -- 48-frame star eyes animation sequence -- Arm growing animation for block manipulation - -### ๐Ÿ“‹ Planned -- ONNX Runtime WebGPU integration -- Local AI model loading with progress indicator -- Tool calling system for precise UI interactions -- Chat interface with context awareness -- Code editing capabilities with visual feedback -- Optional API key support (with strong warnings) - -## Features - -### Draggable Character -Boxy can be moved anywhere on the screen by clicking and dragging. Position is maintained across sessions (planned). - -### Smart Text Bubbles -Messages appear in styled speech bubbles with: -- Gradient background matching OmniBlocks theme -- Auto-hide after 5 seconds (configurable) -- Proper positioning relative to Boxy -- Smooth appear/disappear animations - -### Animation System -Pre-built CSS animations include: -- **Wave**: Friendly greeting animation -- **Bounce**: Excitement or success indicator -- **Thinking**: Shows processing/loading state -- **Excited**: Eye color change for enthusiasm - -### API Interface -Exposed via `window.boxyAPI`: -```javascript -// Show a message -window.boxyAPI.showMessage("Hello!", 5000); - -// Move Boxy to a specific position -window.boxyAPI.moveTo(100, 200); - -// Play an animation -window.boxyAPI.playAnimation("wave"); -``` - -## File Structure - -``` -boxy-assistant/ -โ”œโ”€โ”€ _manifest_entry.js # Addon metadata and configuration -โ”œโ”€โ”€ _runtime_entry.js # Resource imports for webpack -โ”œโ”€โ”€ userscript.js # Main addon logic -โ””โ”€โ”€ style.css # Styling and animations -``` - -## How It Works - -1. **Initialization**: Addon waits for the editor to be ready -2. **DOM Injection**: Creates overlay container with Boxy character -3. **Event Handlers**: Sets up drag-and-drop functionality -4. **Welcome Message**: Shows greeting after 1 second -5. **API Exposure**: Makes boxyAPI available globally - -## Design Philosophy - -### Why Not a Traditional Chatbot? -- **For Kids**: Anthropomorphized characters are more engaging -- **Context Focused**: Small, specific feedback is better than long responses -- **Visual Learning**: Pointing and gesturing > text explanations -- **Reduced Context**: Less AI processing = works on slower devices - -### Why Local AI? -- **Privacy**: Kids' code shouldn't be sent to corporations -- **Education**: Teaches about local vs. cloud computing -- **Accessibility**: Works without internet connection -- **Performance**: WebGPU acceleration on modern devices - -### Why Animations? -- **Teaching**: Shows *how* to do things, not just *what* to do -- **Engagement**: Movement keeps attention -- **Feedback**: Visual confirmation of actions -- **Personality**: Makes the assistant feel alive - -## Future Development - -### Animation Improvements -- Implement frame-by-frame animation system -- Add sprite sheet support for complex animations -- Create library of gestures and expressions -- Add blinking and idle animations - -### AI Integration -1. **Model Selection**: Small, efficient models (< 1GB) -2. **WebGPU Acceleration**: Use ONNX Runtime Web -3. **Tool Calling**: Enable Boxy to: - - Point at specific blocks - - Navigate to categories - - Highlight UI elements - - Demonstrate actions - -### User Experience -- Settings panel for customization -- Animation speed controls -- Voice toggle (text-to-speech) -- Personality options -- Theme integration - -## Technical Details - -### Dependencies -- OmniBlocks addon system -- Scratch GUI framework -- Future: ONNX Runtime Web + WebGPU - -### Browser Compatibility -- Chrome/Edge: Full support (WebGPU available) -- Firefox: Basic support (CSS animations only) -- Safari: Basic support (limited WebGPU) - -### Performance -- Lightweight: < 10KB minified -- No runtime dependencies -- CSS-based animations (hardware accelerated) -- Future AI: GPU-accelerated inference - -## Contributing - -When adding features to Boxy: -1. Keep the code clean and documented -2. Test animations on slow devices -3. Consider accessibility (screen readers, etc.) -4. Maintain the friendly, helpful personality -5. Respect user privacy always - -## Philosophy Quote - -> "Sorry, buddy. I can suggest things to you, help you learn a concept, or brainstorm fun things, but if you're here to vibe code, this ain't the place for you, pal." -> โ€” Boxy, on being asked to write code for users - -## Credits - -- Created by: @supervoidcoder -- OmniBlocks Team -- Boxy character design: OmniBlocks (CC BY-SA 4.0) - -## License - -Part of OmniBlocks, licensed under GNU GPLv3. -Boxy character is licensed under CC BY-SA 4.0. diff --git a/src/addons/addons/boxy-assistant/ROADMAP.md b/src/addons/addons/boxy-assistant/ROADMAP.md deleted file mode 100644 index 92009390b..000000000 --- a/src/addons/addons/boxy-assistant/ROADMAP.md +++ /dev/null @@ -1,474 +0,0 @@ -# Boxy AI Assistant - Development Roadmap - -## Current Status: v1.0 - Foundation Complete โœ… - -The basic addon scaffolding and character display system is complete and working. - ---- - -## Roadmap Phases - -### Phase 1: Foundation & Scaffolding โœ… COMPLETED -**Status**: Released in PR #[TBD] -**Completed**: January 2026 - -#### What's Done: -- [x] Addon registration and configuration -- [x] Basic Boxy character display (SVG inline) -- [x] Drag-and-drop functionality -- [x] Text bubble system -- [x] Animation state machine foundation -- [x] CSS animations (wave, bounce, thinking) -- [x] Developer API (`window.boxyAPI`) -- [x] Comprehensive documentation -- [x] Unit tests - -#### Files Created: -- `_manifest_entry.js` -- `_runtime_entry.js` -- `userscript.js` (209 lines) -- `style.css` (184 lines) -- `README.md` -- `USAGE.md` -- `VISUAL_PREVIEW.md` -- `test/unit/addons/boxy-assistant.test.js` - -**Total**: ~955 lines of code + documentation - ---- - -### Phase 2: Enhanced Animations ๐Ÿ”„ NEXT UP -**Target**: Q1 2026 -**Priority**: Medium - -#### Goals: -Implement the full animation system to make Boxy feel alive and expressive. - -#### Tasks: -- [ ] **Eye Animations** - - [ ] Implement 48-frame "star eyes" animation sequence - - [ ] Add blinking animation (random intervals) - - [ ] Add "looking around" idle animation - - [ ] Eye color changes based on state - -- [ ] **Body Animations** - - [ ] Add subtle breathing animation (idle state) - - [ ] Create "jumping" animation for excitement - - [ ] Add "nodding" animation for acknowledgment - - [ ] Add "shaking head" animation for corrections - -- [ ] **Arm/Hand System** - - [ ] Design arm sprite system - - [ ] Implement "growing arms" animation - - [ ] Create pointing gesture (left, right, up, down) - - [ ] Add "grabbing" animation for block manipulation - - [ ] Add waving animation refinement - -- [ ] **Expression System** - - [ ] Happy (default) - - [ ] Excited (star eyes) - - [ ] Thinking (dots, neutral eyes) - - [ ] Confused (tilted, questioning) - - [ ] Sad (downturned mouth) - - [ ] Celebrating (confetti particles?) - -#### Files to Modify: -- `userscript.js` - Add animation frame system -- `style.css` - Add new @keyframes -- Create: `animations.js` - Dedicated animation controller - -#### Testing: -- Add animation performance tests -- Test on low-end devices -- Verify no memory leaks from animations - -**Estimated Effort**: 40-60 hours - ---- - -### Phase 3: AI Integration - Local Models ๐Ÿค– PRIORITY -**Target**: Q2 2026 -**Priority**: High - -#### Goals: -Integrate local AI using ONNX Runtime WebGPU for privacy-first assistance. - -#### Tasks: -- [ ] **ONNX Runtime Setup** - - [ ] Add ONNX Runtime Web dependency - - [ ] Implement WebGPU detection and fallback - - [ ] Test on multiple GPU vendors (NVIDIA, AMD, Intel) - -- [ ] **Model Selection** - - [ ] Research small models (< 1GB) - - Options: Phi-2, Gemma 2B, TinyLlama - - [ ] Quantize models for size/speed - - [ ] Test inference performance on various devices - - [ ] Choose best model for education use case - -- [ ] **Model Loading UI** - - [ ] Design "brain installation" interface - - [ ] Implement download progress indicator - - [ ] Add model compilation progress (for WebGPU) - - [ ] Handle errors gracefully (storage, memory, etc.) - - [ ] Cache model in IndexedDB - -- [ ] **Inference System** - - [ ] Implement streaming inference - - [ ] Add token-by-token display in speech bubble - - [ ] Optimize prompt engineering for education - - [ ] Add stop sequences and max token limits - -- [ ] **Context Management** - - [ ] Track conversation history (limited buffer) - - [ ] Include current project context - - [ ] Add block/sprite descriptions - - [ ] Clear context management - -#### Files to Create: -- `ai/onnx-runtime.js` - ONNX wrapper -- `ai/model-loader.js` - Model download/cache -- `ai/inference.js` - Inference engine -- `ai/context.js` - Context builder -- `ui/model-installer.jsx` - Installation UI - -#### Testing: -- Test on devices with varying RAM (4GB, 8GB, 16GB+) -- Test on integrated vs. dedicated GPUs -- Measure inference speed (tokens/sec) -- Test model quality (educational prompts) - -**Estimated Effort**: 80-120 hours - ---- - -### Phase 4: Tool Calling & UI Interaction ๐ŸŽฏ -**Target**: Q2-Q3 2026 -**Priority**: High - -#### Goals: -Enable Boxy to interact with the OmniBlocks interface programmatically. - -#### Tasks: -- [ ] **Tool System Architecture** - - [ ] Define tool schema/interface - - [ ] Implement tool registry - - [ ] Add tool calling parser (from LLM output) - - [ ] Add tool result formatter - -- [ ] **Movement Tools** - - [ ] `moveTo(x, y)` - Move Boxy to coordinates - - [ ] `pointAt(element)` - Point at UI element - - [ ] `lookAt(element)` - Turn to face element - - [ ] `moveToBlock(blockId)` - Move to specific block - -- [ ] **UI Query Tools** - - [ ] `getBlockPosition(blockId)` - Get block coordinates - - [ ] `getButtonPosition(name)` - Get button coordinates - - [ ] `getCategoryPosition(name)` - Get category position - - [ ] `getSpritePosition(name)` - Get sprite list item position - -- [ ] **Code Analysis Tools** - - [ ] `getProjectBlocks()` - Get all blocks in project - - [ ] `getSelectedSprite()` - Get current sprite - - [ ] `getVariables()` - Get project variables - - [ ] `analyzeCode()` - Basic code analysis - -- [ ] **UI Interaction Tools** (Read-only first!) - - [ ] `highlightBlock(blockId)` - Visually highlight - - [ ] `highlightCategory(name)` - Highlight category - - [ ] `showTooltip(element, text)` - Show tooltip - -- [ ] **Code Modification Tools** (Future, with user confirmation!) - - [ ] `suggestBlock(category, block)` - Show suggestion - - [ ] `addBlock(location, block)` - Add block with animation - - [ ] `moveBlock(blockId, x, y)` - Move block - - [ ] `deleteBlock(blockId)` - Delete block (with undo!) - -#### Files to Create: -- `tools/registry.js` - Tool system -- `tools/movement.js` - Movement tools -- `tools/ui-query.js` - UI query tools -- `tools/code-analysis.js` - Code analysis -- `tools/interaction.js` - UI interaction - -#### Testing: -- Test tool calling accuracy (LLM->function calls) -- Test coordinate calculations on different screen sizes -- Test performance with many tools available -- Test safety (can't break projects) - -**Estimated Effort**: 60-80 hours - ---- - -### Phase 5: Chat Interface & Interaction ๐Ÿ’ฌ -**Target**: Q3 2026 -**Priority**: Medium - -#### Goals: -Create a proper chat interface for extended conversations with Boxy. - -#### Tasks: -- [ ] **Chat UI** - - [ ] Design chat panel (collapsible sidebar?) - - [ ] Implement message history - - [ ] Add input field with send button - - [ ] Add voice input (speech-to-text) - - [ ] Add voice output (text-to-speech) - -- [ ] **Conversation Management** - - [ ] Track conversation context - - [ ] Add conversation reset button - - [ ] Save conversation history (localStorage) - - [ ] Add export conversation feature - -- [ ] **Smart Features** - - [ ] Code block suggestions in chat - - [ ] Inline previews of blocks - - [ ] Quick action buttons - - [ ] Context-aware suggestions - -- [ ] **Settings** - - [ ] Personality slider (helpful โ†” sassy) - - [ ] Verbosity control (brief โ†” detailed) - - [ ] Voice selection - - [ ] Animation speed control - -#### Files to Create: -- `ui/chat-panel.jsx` - Main chat UI -- `ui/message-list.jsx` - Message history -- `ui/input-field.jsx` - Input component -- `conversation/manager.js` - Conversation state - -#### Testing: -- Test chat performance with long histories -- Test voice input accuracy -- Test accessibility (screen readers) -- User experience testing - -**Estimated Effort**: 40-60 hours - ---- - -### Phase 6: API Key Support (Optional) โš ๏ธ -**Target**: Q3 2026 -**Priority**: Low - -#### Goals: -Support cloud AI as fallback for low-end devices, with strong privacy warnings. - -#### Tasks: -- [ ] **API Integration** - - [ ] OpenAI API support - - [ ] Anthropic Claude API support - - [ ] Google Gemini API support - - [ ] Groq API support (fast inference) - -- [ ] **Privacy Warnings** - - [ ] Design scary warning dialog - - [ ] Explain data implications clearly - - [ ] Require explicit consent - - [ ] Show warning on every session start - -- [ ] **API Key Management** - - [ ] Secure storage (not plaintext!) - - [ ] Key validation - - [ ] Usage tracking - - [ ] Cost warnings (if applicable) - -- [ ] **Fallback Logic** - - [ ] Detect insufficient resources - - [ ] Offer API key option - - [ ] Guide user through setup - - [ ] Always prefer local first - -#### Files to Create: -- `ai/api/openai.js` - OpenAI integration -- `ai/api/anthropic.js` - Claude integration -- `ai/api/google.js` - Gemini integration -- `ui/api-warning.jsx` - Warning dialog -- `settings/api-keys.jsx` - Key management - -**Estimated Effort**: 20-30 hours - ---- - -### Phase 7: Advanced Features ๐Ÿš€ -**Target**: Q4 2026 and beyond -**Priority**: Low - -#### Ideas: -- [ ] **Project Analysis** - - [ ] Detect common patterns - - [ ] Suggest optimizations - - [ ] Find potential bugs - - [ ] Code quality metrics - -- [ ] **Tutorial Integration** - - [ ] Guided tutorials with Boxy - - [ ] Step-by-step walkthroughs - - [ ] Interactive challenges - - [ ] Achievement system - -- [ ] **Customization** - - [ ] Custom Boxy skins - - [ ] Different AI personalities - - [ ] Custom prompts/behavior - - [ ] Theme integration - -- [ ] **Collaboration** - - [ ] Multi-user hints (if applicable) - - [ ] Share helpful tips - - [ ] Community prompts - -- [ ] **Accessibility** - - [ ] Screen reader support - - [ ] High contrast mode - - [ ] Keyboard navigation - - [ ] Reduced motion option - -#### Estimated Effort: Ongoing - ---- - -## Development Guidelines - -### Code Style -- Follow existing OmniBlocks conventions -- Write clear, commented code -- Keep functions small and focused -- Use meaningful variable names - -### Testing -- Write unit tests for new features -- Test on multiple browsers -- Test on low-end devices -- User testing before major releases - -### Documentation -- Update README for new features -- Add inline code comments -- Update USAGE guide -- Create examples for complex features - -### Performance -- Optimize for 60 FPS animations -- Minimize memory usage -- Lazy-load AI models -- Profile regularly - -### Privacy -- Local-first always -- Clear data handling -- User consent required -- Open about data usage - ---- - -## Contributing - -Want to help build Boxy? Here's how: - -1. **Pick a Task**: Choose from roadmap phases above -2. **Open an Issue**: Discuss your approach first -3. **Create a Branch**: `feature/boxy-[feature-name]` -4. **Implement**: Follow guidelines above -5. **Test Thoroughly**: Multiple devices/browsers -6. **Document**: Update relevant docs -7. **Submit PR**: Link to original issue - -### Priority Areas: -๐Ÿ”ด **High Priority**: AI Integration, Tool Calling -๐ŸŸก **Medium Priority**: Enhanced Animations, Chat Interface -๐ŸŸข **Low Priority**: API Key Support, Advanced Features - ---- - -## Technical Debt - -Things to address as we grow: - -- [ ] Refactor userscript.js into modules -- [ ] Extract SVG to separate file/component -- [ ] Improve animation performance profiling -- [ ] Add proper error boundaries -- [ ] Implement state machine pattern properly -- [ ] Add telemetry (privacy-preserving!) -- [ ] Optimize bundle size - ---- - -## Questions & Design Decisions - -### Open Questions: -- **Model Selection**: Which small model works best for education? -- **Voice**: Built-in TTS or external service? -- **Customization**: How much is too much? -- **Performance**: What's the minimum viable device? - -### Decided: -โœ… **Local-First**: AI runs locally, cloud is optional -โœ… **Privacy-First**: No tracking, no data collection -โœ… **Educational Focus**: Teach concepts, not write code -โœ… **Non-Intrusive**: Toggleable, movable, dismissible -โœ… **Open Source**: All code is visible and auditable - ---- - -## Success Metrics - -How do we know Boxy is successful? - -- **Adoption**: % of OmniBlocks users who enable Boxy -- **Retention**: % who keep it enabled after 1 week -- **Engagement**: Average interactions per session -- **Helpfulness**: User feedback/ratings -- **Learning**: Do users understand concepts better? -- **Privacy**: 0 data leaks or privacy violations -- **Performance**: < 5% impact on editor performance - ---- - -## Long-Term Vision - -Boxy should become: -- ๐ŸŽ“ The best AI teaching assistant for kids learning to code -- ๐Ÿ”’ A model of privacy-preserving AI -- ๐ŸŒŸ A fun, engaging character kids want to interact with -- ๐Ÿš€ A showcase of what's possible with local AI -- ๐ŸŽจ A platform for creative AI interactions - -**Goal**: Make learning to code fun, safe, and effective with AI assistance. - ---- - -## Resources - -### Useful Links: -- [ONNX Runtime Web](https://onnxruntime.ai/docs/tutorials/web/) -- [WebGPU Specification](https://www.w3.org/TR/webgpu/) -- [Hugging Face Models](https://huggingface.co/models) -- [Scratch Addons Documentation](https://scratchaddons.com/) - -### Model Options: -- [Phi-2 (2.7B)](https://huggingface.co/microsoft/phi-2) -- [Gemma 2B](https://huggingface.co/google/gemma-2b) -- [TinyLlama (1.1B)](https://huggingface.co/TinyLlama/TinyLlama-1.1B-Chat-v1.0) -- [Qwen2-0.5B](https://huggingface.co/Qwen/Qwen2-0.5B) - -### Learning Resources: -- [WebGPU Fundamentals](https://webgpufundamentals.org/) -- [ONNX Model Zoo](https://github.com/onnx/models) -- [LLM Tool Calling](https://platform.openai.com/docs/guides/function-calling) - ---- - -**Last Updated**: January 30, 2026 -**Maintainers**: @supervoidcoder, OmniBlocks Team -**Status**: Phase 1 Complete, Phase 2 Planning - ---- - -_"Sorry, buddy. I can suggest things to you, help you learn a concept, or brainstorm fun things, but if you're here to vibe code, this ain't the place for you, pal."_ -โ€” Boxy's Philosophy diff --git a/src/addons/addons/boxy-assistant/USAGE.md b/src/addons/addons/boxy-assistant/USAGE.md deleted file mode 100644 index 039ce76f9..000000000 --- a/src/addons/addons/boxy-assistant/USAGE.md +++ /dev/null @@ -1,97 +0,0 @@ -# Boxy AI Assistant - Quick Start Guide - -## Enabling Boxy - -1. **Open OmniBlocks** in your browser -2. Click the **Settings** icon (โš™๏ธ gear icon) in the top-right corner -3. Look for **"Boxy AI Assistant"** in the addons list - - It should be in the "Featured" or "New" section -4. **Toggle the switch** to enable it -5. Return to the editor - -## Using Boxy - -### First Interaction -When you enable Boxy for the first time, you'll see: -- A small robot character appear in the bottom-right corner -- A speech bubble saying "Hi! I'm Boxy, your AI assistant!" - -### Moving Boxy Around -- **Click and drag** Boxy to move him anywhere on screen -- Release to place him in a new position -- Boxy has a subtle glow effect when you hover over him - -### Current Features (v1.0) -- โœ… Draggable character -- โœ… Welcome message -- โœ… Smooth animations -- โœ… Text bubble system - -### Upcoming Features -- ๐Ÿšง AI-powered assistance -- ๐Ÿšง Block suggestions -- ๐Ÿšง Code explanations -- ๐Ÿšง Local AI model (no internet required!) -- ๐Ÿšง Optional API key support - -## Technical Details - -### Browser Compatibility -- **Chrome/Edge**: Full support โœ… -- **Firefox**: Basic support โœ… -- **Safari**: Basic support โœ… - -### Performance -- **Lightweight**: Adds minimal overhead -- **Hardware Accelerated**: Uses CSS transforms for smooth animations -- **No External Dependencies**: Works completely offline - -### Privacy -- **Local First**: All data stays on your device -- **No Tracking**: Boxy doesn't send any information anywhere -- **Open Source**: You can review all the code - -## API for Developers - -If you want to interact with Boxy programmatically, use the global API: - -```javascript -// Show a custom message -window.boxyAPI.showMessage("Great job!", 3000); - -// Move Boxy to a specific position -window.boxyAPI.moveTo(150, 200); - -// Trigger an animation -window.boxyAPI.playAnimation("wave"); -``` - -## Troubleshooting - -### Boxy doesn't appear -1. Make sure the addon is enabled in settings -2. Refresh the page -3. Check browser console for errors (F12) - -### Boxy is in the way -- Just drag him to a different corner! -- Or disable the addon temporarily in settings - -### Animation issues -- Make sure your browser supports CSS animations -- Try disabling hardware acceleration if animations are choppy - -## Feedback - -Found a bug or have a suggestion? Open an issue on our GitHub! - -## What's Next? - -The Boxy AI Assistant is just getting started. Future updates will include: -- **Smart Suggestions**: Context-aware help -- **Code Review**: Boxy can review your code and suggest improvements -- **Interactive Tutorials**: Step-by-step guidance with visual cues -- **Voice Support**: Boxy can speak (optional) -- **Customization**: Change Boxy's appearance and personality - -Stay tuned! ๐ŸŽ‰ diff --git a/src/addons/addons/boxy-assistant/VISUAL_PREVIEW.md b/src/addons/addons/boxy-assistant/VISUAL_PREVIEW.md deleted file mode 100644 index edea4b4c7..000000000 --- a/src/addons/addons/boxy-assistant/VISUAL_PREVIEW.md +++ /dev/null @@ -1,254 +0,0 @@ -# Boxy AI Assistant - Visual Preview - -## What You'll See - -When you enable the Boxy AI Assistant addon, here's what appears: - -``` -โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” -โ”‚ OmniBlocks Editor [โš™๏ธ Settings] โ”‚ -โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค -โ”‚ โ”‚ -โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ -โ”‚ โ”‚ Code Blocks โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ โ€ข Motion โ”‚ โ”‚ -โ”‚ โ”‚ โ€ข Looks โ”‚ [Stage Preview Area] โ”‚ -โ”‚ โ”‚ โ€ข Sound โ”‚ โ”‚ -โ”‚ โ”‚ ... โ”‚ โ”‚ -โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ -โ”‚ โ”‚ -โ”‚ โ”‚ -โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ -โ”‚ โ”‚ Hi! I'm Boxy, โ”‚ โ”‚ -โ”‚ โ”‚ your AI assistant! โ”‚ โ”‚ -โ”‚ โ”‚ Click and drag me โ”‚ โ”‚ -โ”‚ โ”‚ to move me around! โ”‚ โ”‚ -โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ -โ”‚ โ”‚ โ”‚ -โ”‚ โ•”โ•โ•โ•โ–ผโ•โ•โ•— โ”‚ -โ”‚ โ•‘ ๐Ÿ‘€ โ•‘ โ† Boxy โ”‚ -โ”‚ โ•‘ โ•‘ โ”‚ -โ”‚ โ•‘ ๐Ÿ˜Š โ•‘ โ”‚ -โ”‚ โ•šโ•โ•โ•โ•โ•โ•โ• โ”‚ -โ”‚ โ”‚ -โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ -``` - -## Boxy Character Details - -``` - Antennae - โ”‚ โ”‚ - โ•”โ•โ•โ•โ•งโ•โ•งโ•โ•โ•โ•— - โ•‘ [โ—] [โ—] โ•‘ โ† Eyes (can animate!) - โ•‘ โ•‘ - โ•‘ _ โ•‘ โ† Mouth (smile) - โ•šโ•โ•โ•โ•โ•โ•โ•โ•โ•โ• - โ•‘โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•‘ โ† Body with display - โ•‘ โ— ||| โ—โ•‘ - โ•šโ•โ•โ•โ•โ•โ•โ•โ•โ•โ• -``` - -### Boxy Specifications: -- **Size**: 150px ร— 156px (adjustable) -- **Position**: Bottom-right corner (default) -- **Colors**: OmniBlocks gradient (blue to teal) -- **Features**: - - Draggable anywhere on screen - - Glow effect on hover - - Animated eyes and expressions - - Speech bubble for messages - -## States & Animations - -### 1. Idle State -``` -โ•”โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•— -โ•‘ โ€ข โ€ข โ•‘ Regular eyes, slight breathing animation -โ•‘ _ โ•‘ -โ•šโ•โ•โ•โ•โ•โ•โ•โ•โ•โ• -``` - -### 2. Excited State (Star Eyes) -``` -โ•”โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•— -โ•‘ โ˜… โ˜… โ•‘ Star eyes when celebrating or excited -โ•‘ โ—ก โ•‘ Big smile -โ•šโ•โ•โ•โ•โ•โ•โ•โ•โ•โ• -``` - -### 3. Thinking State -``` -โ•”โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•— -โ•‘ โ€ข โ€ข โ•‘ Regular eyes -โ•‘ ~ โ•‘ -โ•šโ•โ•โ•โ•โ•โ•โ•โ•โ•โ• - ... โ† Floating dots above head -``` - -### 4. Waving Animation -``` -Frame 1: Frame 2: Frame 3: -โ•”โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•— โ•”โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•— โ•”โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•— -โ•‘ โ€ข โ€ข โ•‘ โ•‘ โ€ข โ€ข โ•‘ โ•‘ โ€ข โ€ข โ•‘ -โ•‘ _ โ•‘ โ†’ โ•‘ _ โ•‘ โ†’ โ•‘ _ โ•‘ -โ•šโ•โ•โ•โ•โ•โ•โ•โ•โ•โ• โ•šโ•โ•โ•โ•โ•โ•โ•โ•โ•โ• โ•šโ•โ•โ•โ•โ•โ•โ•โ•โ•โ• - \o |o o| -``` - -## Text Bubble Examples - -### Welcome Message -``` - โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” - โ”‚ Hi! I'm Boxy, your AI โ”‚ - โ”‚ assistant! Drag me around! โ”‚ - โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ - โ”‚ - โ•”โ•โ•โ–ผโ•โ•— - โ•‘ โ€ข โ€ข โ•‘ - โ•šโ•โ•โ•โ•โ• -``` - -### Help Message -``` - โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” - โ”‚ Great job! That block โ”‚ - โ”‚ makes your sprite move. โ”‚ - โ”‚ Try adding a sound! โ”‚ - โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ - โ”‚ - โ•”โ•โ•โ–ผโ•โ•— - โ•‘ โ˜… โ˜… โ•‘ (Excited!) - โ•šโ•โ•โ•โ•โ• -``` - -### Error/Tip Message -``` - โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” - โ”‚ Hmm, that loop might run โ”‚ - โ”‚ forever. Want to add a โ”‚ - โ”‚ condition? โ”‚ - โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ - โ”‚ - โ•”โ•โ•โ–ผโ•โ•— - โ•‘ ~ ~โ•‘ (Concerned) - โ•šโ•โ•โ•โ•โ• -``` - -## Interaction Patterns - -### Dragging Boxy -``` -1. Hover over Boxy - โ•”โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•— - โ•‘ โ€ข โ€ข โ•‘ โ† Cursor: move (grab hand) - โ•‘ _ โ•‘ Glow appears - โ•šโ•โ•โ•โ•โ•โ•โ•โ•โ•โ• - -2. Click and hold - โ•”โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•— - โ•‘ โ€ข โ€ข โ•‘ โ† Cursor: grabbing (closed hand) - โ•‘ _ โ•‘ Slightly larger - โ•šโ•โ•โ•โ•โ•โ•โ•โ•โ•โ• - -3. Drag to new position - โ•”โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•— - โ•‘ โ€ข โ€ข โ•‘ โ†’ โ†’ โ†’ โ†’ New position! - โ•‘ _ โ•‘ - โ•šโ•โ•โ•โ•โ•โ•โ•โ•โ•โ• -``` - -## Settings Panel Appearance - -``` -โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” -โ”‚ Addons Settings โ”‚ -โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค -โ”‚ โ”‚ -โ”‚ โ˜… Featured โ”‚ -โ”‚ โ”‚ -โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ -โ”‚ โ”‚ ๐Ÿค– Boxy AI Assistant [OFF] โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ An AI-powered assistant to help โ”‚ โ”‚ -โ”‚ โ”‚ you learn and code better. โ”‚ โ”‚ -โ”‚ โ”‚ โ”‚ โ”‚ -โ”‚ โ”‚ Tags: featured, new โ”‚ โ”‚ -โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ -โ”‚ โ”‚ -โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ -``` - -## Real-World Screenshot Placeholder - -``` -[When you build and run OmniBlocks, take a screenshot here!] - -Expected location for screenshot: -/docs/images/boxy-assistant-screenshot.png - -To capture: -1. Enable the addon -2. Let Boxy appear with welcome message -3. Take screenshot showing: - - Boxy character - - Speech bubble - - OmniBlocks interface -``` - -## Color Scheme - -- **Primary**: #0067bb to #00ba87 (gradient) -- **Eyes**: #ffcd00 (yellow/gold) -- **Mouth**: #00ff2a (green - happy) -- **Body**: #032500 (dark green) -- **Speech Bubble**: Same gradient as primary -- **Text**: White (#ffffff) - -## Responsive Behavior - -### Desktop (> 768px) -- Boxy: 150px ร— 156px -- Speech bubble: Max 300px wide -- Font: 14px - -### Mobile/Tablet (< 768px) -- Boxy: 100px ร— 104px -- Speech bubble: Max 200px wide -- Font: 12px - -## Z-Index Layering - -``` -Layer Stack (bottom to top): -โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ” -10000 - Speech Bubble - 9999 - Boxy Character - -- - Boxy Container - 1 - Editor UI - 0 - Base elements -``` - -## Future Visual Enhancements - -- [ ] Blinking animation for eyes -- [ ] Arm/hand animations for gestures -- [ ] Particle effects for celebrations -- [ ] Customizable colors/themes -- [ ] Multiple expressions/emotions -- [ ] Shadow effects for depth -- [ ] Smooth position interpolation - ---- - -## For Developers - -To modify Boxy's appearance, edit: -- **SVG Structure**: `userscript.js` (inline SVG) -- **Styling**: `style.css` -- **Animations**: `style.css` (@keyframes) -- **Positioning**: `userscript.js` (JavaScript) - -For color changes, update the gradient stops in the SVG's `` elements. diff --git a/src/addons/addons/boxy-assistant/style.css b/src/addons/addons/boxy-assistant/style.css index cc3a9e42d..c5c1db7f0 100644 --- a/src/addons/addons/boxy-assistant/style.css +++ b/src/addons/addons/boxy-assistant/style.css @@ -7,7 +7,7 @@ left: 0; width: 100vw; height: 100vh; - pointer-events: none; /* Allow clicks to pass through container */ + pointer-events: none; z-index: 9999; overflow: hidden; } @@ -17,15 +17,13 @@ position: absolute; width: 150px; height: 156px; - pointer-events: auto; /* Enable interactions on Boxy */ - cursor: move; - transition: transform 0.3s ease; + pointer-events: auto; + cursor: pointer; transform-origin: center center; user-select: none; } .boxy-character.dragging { - transition: none; cursor: grabbing; } @@ -33,6 +31,11 @@ filter: drop-shadow(0 0 10px rgba(0, 186, 135, 0.5)); } +.boxy-character:focus { + outline: 3px solid #00ba87; + outline-offset: 5px; +} + .boxy-svg-wrapper { width: 100%; height: 100%; @@ -46,20 +49,9 @@ height: auto; } -/* Boxy's eyes - for future animations */ -.boxy-eye { - transition: fill 0.2s ease; -} - -.boxy-character.excited .boxy-eye { - fill: #ff69b4; /* Star eyes color */ -} - /* Text bubble */ .boxy-text-bubble { - position: absolute; - bottom: 170px; - right: 180px; + position: fixed; max-width: 300px; min-width: 200px; background: linear-gradient(135deg, #0067bb 0%, #00ba87 100%); @@ -82,12 +74,12 @@ } } -/* Bubble tail */ .boxy-text-bubble::after { content: ""; position: absolute; bottom: -10px; - right: 20px; + left: 50%; + transform: translateX(-50%); width: 0; height: 0; border-left: 15px solid transparent; @@ -107,59 +99,206 @@ font-weight: 500; } -/* Animation states */ -.boxy-character.waving { - animation: wave 0.6s ease; +/* Chat Interface */ +.boxy-chat-interface { + position: fixed; + width: 400px; + max-width: calc(100vw - 40px); + height: 500px; + max-height: calc(100vh - 40px); + background: white; + border-radius: 15px; + box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); + pointer-events: auto; + z-index: 10001; + display: flex; + flex-direction: column; + overflow: hidden; } -@keyframes wave { - 0%, 100% { - transform: rotate(0deg); - } - 25% { - transform: rotate(-15deg); - } - 75% { - transform: rotate(15deg); - } +.boxy-chat-header { + background: linear-gradient(135deg, #0067bb 0%, #00ba87 100%); + color: white; + padding: 15px 20px; + display: flex; + justify-content: space-between; + align-items: center; } -.boxy-character.bouncing { - animation: bounce 0.5s ease; +.boxy-chat-header h3 { + margin: 0; + font-size: 18px; + font-weight: 600; } -@keyframes bounce { - 0%, 100% { - transform: translateY(0); - } - 50% { - transform: translateY(-20px); - } +.boxy-chat-close { + background: none; + border: none; + color: white; + font-size: 28px; + cursor: pointer; + padding: 0; + width: 30px; + height: 30px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + transition: background 0.2s; } -/* Thinking animation */ -.boxy-character.thinking::before { - content: "..."; - position: absolute; - top: -30px; - left: 50%; - transform: translateX(-50%); - background: rgba(0, 103, 187, 0.9); - color: white; - padding: 5px 15px; - border-radius: 15px; +.boxy-chat-close:hover { + background: rgba(255, 255, 255, 0.2); +} + +.boxy-chat-messages { + flex: 1; + overflow-y: auto; + padding: 15px; + background: #f5f5f5; +} + +.boxy-chat-message { + display: flex; + gap: 10px; + margin-bottom: 15px; + align-items: flex-start; +} + +.boxy-message-bot { + flex-direction: row; +} + +.boxy-message-user { + flex-direction: row-reverse; +} + +.boxy-chat-avatar { + width: 36px; + height: 36px; + border-radius: 50%; + background: linear-gradient(135deg, #0067bb 0%, #00ba87 100%); + display: flex; + align-items: center; + justify-content: center; font-size: 20px; - font-weight: bold; - animation: thinking 1.5s infinite; + flex-shrink: 0; } -@keyframes thinking { - 0%, 100% { - opacity: 0.5; - } - 50% { - opacity: 1; - } +.boxy-message-user .boxy-chat-avatar { + background: #888; +} + +.boxy-chat-text { + background: white; + padding: 10px 15px; + border-radius: 15px; + max-width: 70%; + word-wrap: break-word; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); +} + +.boxy-message-user .boxy-chat-text { + background: linear-gradient(135deg, #0067bb 0%, #00ba87 100%); + color: white; +} + +.boxy-thinking .boxy-chat-text { + opacity: 0.7; + font-style: italic; +} + +.boxy-chat-input-area { + padding: 15px; + background: white; + border-top: 1px solid #ddd; + display: flex; + gap: 10px; +} + +.boxy-chat-input { + flex: 1; + padding: 10px 15px; + border: 2px solid #ddd; + border-radius: 25px; + font-size: 14px; + outline: none; + transition: border-color 0.2s; +} + +.boxy-chat-input:focus { + border-color: #00ba87; +} + +.boxy-chat-send { + padding: 10px 20px; + background: linear-gradient(135deg, #0067bb 0%, #00ba87 100%); + color: white; + border: none; + border-radius: 25px; + font-weight: 600; + cursor: pointer; + transition: transform 0.2s, box-shadow 0.2s; +} + +.boxy-chat-send:hover { + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0, 186, 135, 0.4); +} + +.boxy-chat-send:active { + transform: translateY(0); +} + +.boxy-api-key-setup { + padding: 15px; + background: #fff8e1; + border-top: 1px solid #ffe082; +} + +.boxy-api-key-setup p { + margin: 0 0 10px 0; + font-size: 13px; +} + +.boxy-api-key-setup strong { + color: #f57c00; +} + +.boxy-api-key-setup a { + color: #0067bb; + text-decoration: none; + font-weight: 600; +} + +.boxy-api-key-setup a:hover { + text-decoration: underline; +} + +.boxy-api-key-input { + width: 100%; + padding: 10px; + border: 2px solid #ffe082; + border-radius: 8px; + font-size: 14px; + margin-bottom: 10px; + box-sizing: border-box; +} + +.boxy-api-key-save { + width: 100%; + padding: 10px; + background: linear-gradient(135deg, #0067bb 0%, #00ba87 100%); + color: white; + border: none; + border-radius: 8px; + font-weight: 600; + cursor: pointer; + transition: transform 0.2s; +} + +.boxy-api-key-save:hover { + transform: translateY(-2px); } /* Responsive adjustments */ @@ -174,6 +313,13 @@ font-size: 12px; padding: 10px 15px; } + + .boxy-chat-interface { + width: calc(100vw - 20px); + height: calc(100vh - 20px); + left: 10px !important; + top: 10px !important; + } } /* Dark mode support */ @@ -181,4 +327,29 @@ .boxy-text-bubble { box-shadow: 0 4px 20px rgba(255, 255, 255, 0.1); } + + .boxy-chat-interface { + background: #2a2a2a; + color: #fff; + } + + .boxy-chat-messages { + background: #1a1a1a; + } + + .boxy-chat-text { + background: #3a3a3a; + color: #fff; + } + + .boxy-chat-input-area { + background: #2a2a2a; + border-top-color: #444; + } + + .boxy-chat-input { + background: #3a3a3a; + color: #fff; + border-color: #555; + } } diff --git a/src/addons/addons/boxy-assistant/userscript.js b/src/addons/addons/boxy-assistant/userscript.js index 735201bb8..d8b84b487 100644 --- a/src/addons/addons/boxy-assistant/userscript.js +++ b/src/addons/addons/boxy-assistant/userscript.js @@ -6,41 +6,44 @@ export default async function ({ addon, console }) { // Create the Boxy container that overlays the entire editor const boxyContainer = document.createElement("div"); boxyContainer.className = "boxy-assistant-container"; + boxyContainer.setAttribute("role", "complementary"); + boxyContainer.setAttribute("aria-label", "Boxy AI Assistant - Your coding helper"); addon.tab.displayNoneWhileDisabled(boxyContainer, { display: "block" }); // Create the Boxy character element const boxyCharacter = document.createElement("div"); boxyCharacter.className = "boxy-character"; + boxyCharacter.setAttribute("role", "button"); + boxyCharacter.setAttribute("aria-label", "Boxy - Click to chat, or drag to move"); + boxyCharacter.setAttribute("tabindex", "0"); boxyCharacter.innerHTML = `
- + - + - + - + - - - - + + + - @@ -48,8 +51,7 @@ export default async function ({ addon, console }) { - - + @@ -66,38 +68,73 @@ export default async function ({ addon, console }) { // Create text bubble for Boxy's messages const textBubble = document.createElement("div"); textBubble.className = "boxy-text-bubble"; - textBubble.style.display = "none"; // Hidden by default + textBubble.style.display = "none"; + textBubble.setAttribute("role", "status"); + textBubble.setAttribute("aria-live", "polite"); textBubble.innerHTML = `

Hi! I'm Boxy, your AI assistant!

`; + // Create chat interface + const chatInterface = document.createElement("div"); + chatInterface.className = "boxy-chat-interface"; + chatInterface.style.display = "none"; + chatInterface.setAttribute("role", "dialog"); + chatInterface.setAttribute("aria-label", "Chat with Boxy"); + chatInterface.innerHTML = ` +
+

Chat with Boxy

+ +
+
+
+
๐Ÿค–
+
Hi! I'm Boxy, your AI assistant! I can help you learn to code. To get started, you'll need to provide an API key from Pollinations AI.
+
+
+
+ + +
+
+

โš ๏ธ API Key Required

+

Boxy uses Pollinations AI (BYOK - Bring Your Own Key). Get your free key at enter.pollinations.ai

+ + +
+ `; + // Assemble the components boxyContainer.appendChild(boxyCharacter); boxyContainer.appendChild(textBubble); + boxyContainer.appendChild(chatInterface); + + // State variables + let xOffset = 0; + let yOffset = 0; + let boxyHideTimeoutId = null; + let apiKey = localStorage.getItem('boxy-api-key') || ''; + let chatHistory = []; // Wait for the editor to be ready while (true) { - const stageWrapper = await addon.tab.waitForElement('[class*="stage-wrapper"]', { + await addon.tab.waitForElement('[class*="stage-wrapper"]', { markAsSeen: true, reduxEvents: ["scratch-gui/mode/SET_PLAYER", "fontsLoaded/SET_FONTS_LOADED"], }); if (addon.tab.editorMode === "editor") { - // Add Boxy to the editor document.body.appendChild(boxyContainer); console.log("Boxy added to editor!"); - // Initialize Boxy's position (bottom right corner) initializeBoxyPosition(); - - // Make Boxy draggable makeBoxyDraggable(); + setupChatInterface(); - // Show welcome message after a short delay setTimeout(() => { - showBoxyMessage("Hi! I'm Boxy, your AI assistant! Click and drag me to move me around!"); + showBoxyMessage("Hi! I'm Boxy! Click me to chat, or drag me to move!"); }, 1000); break; @@ -110,55 +147,138 @@ export default async function ({ addon, console }) { boxyCharacter.style.top = "calc(100vh - 300px)"; } + // Update text bubble position relative to Boxy + function updateBubblePosition() { + const boxyRect = boxyCharacter.getBoundingClientRect(); + textBubble.style.left = `${boxyRect.left}px`; + textBubble.style.top = `${boxyRect.top - textBubble.offsetHeight - 20}px`; + } + // Make Boxy draggable function makeBoxyDraggable() { let isDragging = false; - let currentX; - let currentY; - let initialX; - let initialY; - let xOffset = 0; - let yOffset = 0; - - boxyCharacter.addEventListener("mousedown", dragStart); - document.addEventListener("mousemove", drag); - document.addEventListener("mouseup", dragEnd); + let dragMoved = false; + let currentX = 0; + let currentY = 0; + let initialX = 0; + let initialY = 0; function dragStart(e) { - initialX = e.clientX - xOffset; - initialY = e.clientY - yOffset; + if (e.type === "mousedown") { + initialX = e.clientX - xOffset; + initialY = e.clientY - yOffset; + } else if (e.type === "touchstart") { + initialX = e.touches[0].clientX - xOffset; + initialY = e.touches[0].clientY - yOffset; + } if (e.target === boxyCharacter || boxyCharacter.contains(e.target)) { isDragging = true; + dragMoved = false; boxyCharacter.classList.add("dragging"); + + // Attach drag listeners only when dragging starts + document.addEventListener("mousemove", drag); + document.addEventListener("mouseup", dragEnd); + document.addEventListener("touchmove", drag); + document.addEventListener("touchend", dragEnd); } } function drag(e) { if (isDragging) { e.preventDefault(); + dragMoved = true; - currentX = e.clientX - initialX; - currentY = e.clientY - initialY; + if (e.type === "mousemove") { + currentX = e.clientX - initialX; + currentY = e.clientY - initialY; + } else if (e.type === "touchmove") { + currentX = e.touches[0].clientX - initialX; + currentY = e.touches[0].clientY - initialY; + } xOffset = currentX; yOffset = currentY; setBoxyTranslate(currentX, currentY); + updateBubblePosition(); } } function dragEnd(e) { - initialX = currentX; - initialY = currentY; + if (isDragging) { + // Only update if we actually computed positions + if (typeof currentX === "number" && typeof currentY === "number") { + initialX = currentX; + initialY = currentY; + } + + isDragging = false; + boxyCharacter.classList.remove("dragging"); + + // Remove drag listeners + document.removeEventListener("mousemove", drag); + document.removeEventListener("mouseup", dragEnd); + document.removeEventListener("touchmove", drag); + document.removeEventListener("touchend", dragEnd); - isDragging = false; - boxyCharacter.classList.remove("dragging"); + // If we didn't move much, treat it as a click + if (!dragMoved) { + toggleChat(); + } + } } function setBoxyTranslate(xPos, yPos) { boxyCharacter.style.transform = `translate3d(${xPos}px, ${yPos}px, 0)`; } + + // Keyboard support for accessibility + function handleKeyDown(e) { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + toggleChat(); + } else if (e.key.startsWith("Arrow")) { + e.preventDefault(); + const step = e.shiftKey ? 20 : 5; + switch (e.key) { + case "ArrowLeft": + xOffset -= step; + break; + case "ArrowRight": + xOffset += step; + break; + case "ArrowUp": + yOffset -= step; + break; + case "ArrowDown": + yOffset += step; + break; + } + currentX = xOffset; + currentY = yOffset; + setBoxyTranslate(xOffset, yOffset); + updateBubblePosition(); + } + } + + boxyCharacter.addEventListener("mousedown", dragStart); + boxyCharacter.addEventListener("touchstart", dragStart); + boxyCharacter.addEventListener("keydown", handleKeyDown); + + // Cleanup function + const cleanup = () => { + boxyCharacter.removeEventListener("mousedown", dragStart); + boxyCharacter.removeEventListener("touchstart", dragStart); + boxyCharacter.removeEventListener("keydown", handleKeyDown); + document.removeEventListener("mousemove", drag); + document.removeEventListener("mouseup", dragEnd); + document.removeEventListener("touchmove", drag); + document.removeEventListener("touchend", dragEnd); + }; + + return cleanup; } // Show a message in Boxy's text bubble @@ -166,44 +286,179 @@ export default async function ({ addon, console }) { const messageElement = textBubble.querySelector(".boxy-message"); messageElement.textContent = message; textBubble.style.display = "block"; + updateBubblePosition(); + + // Clear any existing timeout + if (boxyHideTimeoutId !== null) { + clearTimeout(boxyHideTimeoutId); + boxyHideTimeoutId = null; + } // Auto-hide after duration if (duration > 0) { - setTimeout(() => { + boxyHideTimeoutId = setTimeout(() => { textBubble.style.display = "none"; + boxyHideTimeoutId = null; }, duration); } } - // Animation system (placeholder for future animations) - const animationState = { - current: "idle", - isAnimating: false - }; - - // Future: Wave animation - function playWaveAnimation() { - console.log("Wave animation would play here"); - // TODO: Implement wave animation + // Toggle chat interface + function toggleChat() { + const isVisible = chatInterface.style.display !== "none"; + chatInterface.style.display = isVisible ? "none" : "block"; + + if (!isVisible) { + // Position chat near Boxy + const boxyRect = boxyCharacter.getBoundingClientRect(); + chatInterface.style.left = `${Math.max(20, boxyRect.left - 320)}px`; + chatInterface.style.top = `${Math.max(20, boxyRect.top)}px`; + + // Focus input + const input = chatInterface.querySelector(".boxy-chat-input"); + if (apiKey) { + input.focus(); + } + } } - // Future: Point animation (for pointing at blocks/buttons) - function playPointAnimation(targetElement) { - console.log("Point animation would play here", targetElement); - // TODO: Implement pointing animation + // Setup chat interface handlers + function setupChatInterface() { + const closeBtn = chatInterface.querySelector(".boxy-chat-close"); + const sendBtn = chatInterface.querySelector(".boxy-chat-send"); + const input = chatInterface.querySelector(".boxy-chat-input"); + const apiKeyInput = chatInterface.querySelector(".boxy-api-key-input"); + const apiKeySaveBtn = chatInterface.querySelector(".boxy-api-key-save"); + const messagesContainer = chatInterface.querySelector(".boxy-chat-messages"); + const apiKeySetup = chatInterface.querySelector(".boxy-api-key-setup"); + + // Load saved API key + if (apiKey) { + apiKeySetup.style.display = "none"; + apiKeyInput.value = apiKey; + } + + closeBtn.addEventListener("click", () => { + chatInterface.style.display = "none"; + }); + + apiKeySaveBtn.addEventListener("click", () => { + const key = apiKeyInput.value.trim(); + if (key) { + apiKey = key; + localStorage.setItem('boxy-api-key', key); + apiKeySetup.style.display = "none"; + addChatMessage("API key saved! You can now chat with me.", "bot"); + input.focus(); + } else { + alert("Please enter a valid API key"); + } + }); + + async function sendMessage() { + const message = input.value.trim(); + if (!message) return; + + if (!apiKey) { + addChatMessage("Please set up your API key first!", "bot"); + return; + } + + // Add user message + addChatMessage(message, "user"); + input.value = ""; + + // Check for vibe coding request + if (message.toLowerCase().includes("write") && (message.toLowerCase().includes("code") || message.toLowerCase().includes("program"))) { + addChatMessage("Sorry, buddy. I can suggest things to you, help you learn a concept, or brainstorm fun things, but if you're here to vibe code, this ain't the place for you, pal. ๐Ÿ˜Š", "bot"); + return; + } + + // Show thinking state + addChatMessage("...", "bot", true); + + try { + // Call Pollinations AI API + const response = await fetch(`https://text.pollinations.ai/prompt/${encodeURIComponent(message)}`, { + headers: { + 'Authorization': `Bearer ${apiKey}` + } + }); + + // Remove thinking message + const thinkingMsg = messagesContainer.querySelector(".boxy-thinking"); + if (thinkingMsg) thinkingMsg.remove(); + + if (!response.ok) { + throw new Error(`API Error: ${response.status}`); + } + + const aiResponse = await response.text(); + addChatMessage(aiResponse, "bot"); + + // Add to history + chatHistory.push({ role: "user", content: message }); + chatHistory.push({ role: "assistant", content: aiResponse }); + + } catch (error) { + console.error("Chat error:", error); + const thinkingMsg = messagesContainer.querySelector(".boxy-thinking"); + if (thinkingMsg) thinkingMsg.remove(); + addChatMessage(`Oops! Something went wrong: ${error.message}. Please check your API key.`, "bot"); + } + } + + function addChatMessage(text, sender, isThinking = false) { + const msgDiv = document.createElement("div"); + msgDiv.className = `boxy-chat-message boxy-message-${sender}`; + if (isThinking) msgDiv.classList.add("boxy-thinking"); + + msgDiv.innerHTML = ` +
${sender === "bot" ? "๐Ÿค–" : "๐Ÿ‘ค"}
+
${text}
+ `; + + messagesContainer.appendChild(msgDiv); + messagesContainer.scrollTop = messagesContainer.scrollHeight; + } + + sendBtn.addEventListener("click", sendMessage); + input.addEventListener("keypress", (e) => { + if (e.key === "Enter") { + sendMessage(); + } + }); } - // Expose API for future AI integration + // Expose API for future integrations window.boxyAPI = { showMessage: showBoxyMessage, moveTo: (x, y) => { + // Reset offsets when programmatically moving + xOffset = x; + yOffset = y; boxyCharacter.style.transform = `translate3d(${x}px, ${y}px, 0)`; + updateBubblePosition(); + }, + openChat: () => { + if (chatInterface.style.display === "none") { + toggleChat(); + } }, - playAnimation: (animationName) => { - console.log(`Playing animation: ${animationName}`); - // TODO: Implement animation system + closeChat: () => { + chatInterface.style.display = "none"; } }; + // Cleanup on addon disable + addon.self.addEventListener("disabled", () => { + if (boxyHideTimeoutId !== null) { + clearTimeout(boxyHideTimeoutId); + } + if (window.boxyAPI) { + delete window.boxyAPI; + } + }); + console.log("Boxy AI Assistant fully initialized!"); } From a51f6e600463a3c8d4ca70d71ae3933e129aa365 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 30 Jan 2026 22:23:56 +0000 Subject: [PATCH 8/8] Replace hardcoded anti-vibe-coding check with AI system prompt Co-authored-by: supervoidcoder <88671013+supervoidcoder@users.noreply.github.com> --- .../addons/boxy-assistant/userscript.js | 31 ++++++++++++++----- 1 file changed, 23 insertions(+), 8 deletions(-) diff --git a/src/addons/addons/boxy-assistant/userscript.js b/src/addons/addons/boxy-assistant/userscript.js index d8b84b487..d8eb7f84d 100644 --- a/src/addons/addons/boxy-assistant/userscript.js +++ b/src/addons/addons/boxy-assistant/userscript.js @@ -368,18 +368,33 @@ export default async function ({ addon, console }) { addChatMessage(message, "user"); input.value = ""; - // Check for vibe coding request - if (message.toLowerCase().includes("write") && (message.toLowerCase().includes("code") || message.toLowerCase().includes("program"))) { - addChatMessage("Sorry, buddy. I can suggest things to you, help you learn a concept, or brainstorm fun things, but if you're here to vibe code, this ain't the place for you, pal. ๐Ÿ˜Š", "bot"); - return; - } - // Show thinking state addChatMessage("...", "bot", true); try { - // Call Pollinations AI API - const response = await fetch(`https://text.pollinations.ai/prompt/${encodeURIComponent(message)}`, { + // Build system prompt with Boxy's personality and guidelines + const systemPrompt = `You are Boxy, a friendly AI assistant designed to help kids learn coding in OmniBlocks (a Scratch-based platform). + +Your role: +- Help users understand coding concepts +- Suggest approaches and brainstorm ideas +- Guide users through problem-solving +- Explain how blocks and features work +- Encourage learning and experimentation + +Important rules: +- NEVER write complete code for users - they must learn by doing +- If asked to "write code" or "make a program", politely refuse and offer to teach them how instead +- Use simple, kid-friendly language +- Be encouraging and supportive +- Keep responses concise and focused + +Your catchphrase when refusing to write code: "Sorry, buddy. I can suggest things to you, help you learn a concept, or brainstorm fun things, but if you're here to vibe code, this ain't the place for you, pal." + +User's question: ${message}`; + + // Call Pollinations AI API with system prompt + const response = await fetch(`https://text.pollinations.ai/prompt/${encodeURIComponent(systemPrompt)}`, { headers: { 'Authorization': `Bearer ${apiKey}` }