@teachinglab/omd 0.6.1 → 0.6.3

package/omd/step-visualizer/omdStepVisualizerTextBoxes.js

@@ -1,201 +1,201 @@
-import { omdEquationNode } from '../nodes/omdEquationNode.js';
-import { omdStepVisualizerInteractiveSteps } from '../utils/omdStepVisualizerInteractiveSteps.js';
-
-/**
- * Manages interactive step text boxes that appear when dots are clicked
- * Handles creation, positioning, and cleanup of explanation popups
- */
-export class omdStepVisualizerTextBoxes {
-    constructor(stepVisualizer, highlighting, options = {}) {
-        this.stepVisualizer = stepVisualizer;
-        this.highlighting = highlighting;
-        this.stepTextBoxes = [];
-        this.options = options;
-    }
-
-    /**
-     * Creates an interactive steps popup for a clicked dot
-     * @param {number} dotIndex - Index of the dot to create text box for
-     */
-    createTextBoxForDot(dotIndex) {
-        try {
-            this.removeTextBoxForDot(dotIndex);
-            
-            const targetDot = this._findDotAboveForPositioning(dotIndex);
-            if (!targetDot) {
-                console.error('Target dot not found for positioning text box for dot index:', dotIndex);
-                return;
-            }
-            
-            const simplificationData = this._getSimplificationDataForDot(dotIndex);
-            this._createInteractiveStepsForDot(dotIndex, targetDot, simplificationData);
-            
-        } catch (error) {
-            console.error('Error creating text box for dot', dotIndex, ':', error);
-        }
-    }
-
-    /**
-     * Creates interactive steps for a dot with simplification data
-     * @param {number} dotIndex - Index of the dot
-     * @param {Object} targetDot - The dot to position relative to
-     * @param {Object} simplificationData - Full simplification data including rule names
-     * @private
-     */
-    _createInteractiveStepsForDot(dotIndex, targetDot, simplificationData) {
-        const interactiveSteps = new omdStepVisualizerInteractiveSteps(
-            this.stepVisualizer, 
-            simplificationData, 
-            this.options // Pass styling options to interactive steps
-        );
-        
-        // Position relative to the target dot
-        const x = targetDot.xpos + this.stepVisualizer.dotRadius * 2 + 10;
-        const y = targetDot.ypos - this.stepVisualizer.dotRadius;
-        interactiveSteps.setPosition(x, y);
-        
-        // Set up hover interactions
-        interactiveSteps.setOnStepHover((stepIndex, message, isEntering) => {
-        });
-        
-        // Set up click interactions
-        interactiveSteps.setOnStepClick((stepIndex, message) => {
-        });
-        
-        // Add to visual container and track
-        const layoutGroup = interactiveSteps.getLayoutGroup();
-        layoutGroup.dotIndex = dotIndex;
-        this.stepVisualizer.visualContainer.addChild(layoutGroup);
-        
-    // Apply configured z-index styling to ensure proper layering
-        if (layoutGroup.svgObject && (this.options.zIndex || this.options.position)) {
-            if (this.options.position) {
-                layoutGroup.svgObject.style.position = this.options.position;
-            }
-            if (this.options.zIndex) {
-                layoutGroup.svgObject.style.zIndex = String(this.options.zIndex);
-                
-                // Only apply to the main container, NOT to child elements to preserve internal layout
-                // Applying position absolute to child elements breaks flexbox layout
-            }
-        }
-    
-        this.stepTextBoxes.push({
-            dotIndex: dotIndex,
-            interactiveSteps: interactiveSteps,
-            layoutGroup: layoutGroup
-        });
-        
-        // Note: Removed updateVisualLayout call to prevent repositioning movement
-    }
-
-
-
-
-
-    /**
-     * Removes the text box for a specific dot
-     * @param {number} dotIndex - Index of the dot to remove text box for
-     */
-    removeTextBoxForDot(dotIndex) {
-        const textBoxIndex = this.stepTextBoxes.findIndex(tb => tb.dotIndex === dotIndex);
-        if (textBoxIndex >= 0) {
-            const item = this.stepTextBoxes[textBoxIndex];
-            this.stepVisualizer.visualContainer.removeChild(item.layoutGroup);
-            item.interactiveSteps.destroy();
-            this.stepTextBoxes.splice(textBoxIndex, 1);
-            
-            // Note: Removed updateVisualLayout call to prevent repositioning movement
-        }
-    }
-
-    /**
-     * Removes all text boxes
-     */
-    clearAllTextBoxes() {
-        this.stepTextBoxes.forEach(item => {
-            this.stepVisualizer.visualContainer.removeChild(item.layoutGroup);
-            item.interactiveSteps.destroy();
-        });
-        this.stepTextBoxes = [];
-        
-        // Note: Removed updateVisualLayout call to prevent repositioning movement
-    }
-
-    /**
-     * Finds the appropriate dot above the clicked one for text box positioning
-     * @param {number} dotIndex - Index of the clicked dot
-     * @returns {Object|null} The dot to align with, or null if none found
-     * @private
-     */
-    _findDotAboveForPositioning(dotIndex) {
-        const currentDot = this.stepVisualizer.stepDots[dotIndex];
-        if (!currentDot || !currentDot.equationRef) {
-            return null;
-        }
-        
-        const currentEquation = currentDot.equationRef;
-        const currentEquationIndex = this.stepVisualizer.steps.indexOf(currentEquation);
-        
-        // Find the nearest visible equation above
-        for (let i = currentEquationIndex - 1; i >= 0; i--) {
-            const step = this.stepVisualizer.steps[i];
-            if (step instanceof omdEquationNode && step.visible !== false) {
-                // Find the corresponding dot
-                for (let dotIdx = dotIndex - 1; dotIdx >= 0; dotIdx--) {
-                    const dot = this.stepVisualizer.stepDots[dotIdx];
-                    if (dot && dot.equationRef === step) {
-                        return dot;
-                    }
-                }
-                break;
-            }
-        }
-        
-        // If no visible equation above, use the clicked dot itself
-        return currentDot;
-    }
-
-    /**
-     * Gets the simplification data for a specific dot
-     * @param {number} dotIndex - Index of the dot
-     * @returns {Object} The simplification data for this step
-     * @private
-     */
-    _getSimplificationDataForDot(dotIndex) {
-        return this.stepVisualizer._getSimplificationDataForDot(dotIndex);
-    }
-
-
-
-    /**
-     * Gets all text boxes
-     * @returns {Array} Array of text box objects
-     */
-    getStepTextBoxes() {
-        return this.stepTextBoxes;
-    }
-
-    /**
-     * Updates the styling options for text boxes
-     * @param {Object} newOptions - New styling options
-     */
-    updateStyling(newOptions = {}) {
-        this.options = { ...this.options, ...newOptions };
-        
-        // Apply new styling to existing text boxes
-        this.stepTextBoxes.forEach(textBoxItem => {
-            if (textBoxItem.interactiveSteps && typeof textBoxItem.interactiveSteps.updateStyling === 'function') {
-                textBoxItem.interactiveSteps.updateStyling(this.options);
-            }
-        });
-    }
-
-    /**
-     * Gets the current styling options
-     * @returns {Object} Current styling options
-     */
-    getStyling() {
-        return { ...this.options };
-    }
+import { omdEquationNode } from '../nodes/omdEquationNode.js';
+import { omdStepVisualizerInteractiveSteps } from '../utils/omdStepVisualizerInteractiveSteps.js';
+
+/**
+ * Manages interactive step text boxes that appear when dots are clicked
+ * Handles creation, positioning, and cleanup of explanation popups
+ */
+export class omdStepVisualizerTextBoxes {
+    constructor(stepVisualizer, highlighting, options = {}) {
+        this.stepVisualizer = stepVisualizer;
+        this.highlighting = highlighting;
+        this.stepTextBoxes = [];
+        this.options = options;
+    }
+
+    /**
+     * Creates an interactive steps popup for a clicked dot
+     * @param {number} dotIndex - Index of the dot to create text box for
+     */
+    createTextBoxForDot(dotIndex) {
+        try {
+            this.removeTextBoxForDot(dotIndex);
+            
+            const targetDot = this._findDotAboveForPositioning(dotIndex);
+            if (!targetDot) {
+                console.error('Target dot not found for positioning text box for dot index:', dotIndex);
+                return;
+            }
+            
+            const simplificationData = this._getSimplificationDataForDot(dotIndex);
+            this._createInteractiveStepsForDot(dotIndex, targetDot, simplificationData);
+            
+        } catch (error) {
+            console.error('Error creating text box for dot', dotIndex, ':', error);
+        }
+    }
+
+    /**
+     * Creates interactive steps for a dot with simplification data
+     * @param {number} dotIndex - Index of the dot
+     * @param {Object} targetDot - The dot to position relative to
+     * @param {Object} simplificationData - Full simplification data including rule names
+     * @private
+     */
+    _createInteractiveStepsForDot(dotIndex, targetDot, simplificationData) {
+        const interactiveSteps = new omdStepVisualizerInteractiveSteps(
+            this.stepVisualizer, 
+            simplificationData, 
+            this.options // Pass styling options to interactive steps
+        );
+        
+        // Position relative to the target dot
+        const x = targetDot.xpos + this.stepVisualizer.dotRadius * 2 + 10;
+        const y = targetDot.ypos - this.stepVisualizer.dotRadius;
+        interactiveSteps.setPosition(x, y);
+        
+        // Set up hover interactions
+        interactiveSteps.setOnStepHover((stepIndex, message, isEntering) => {
+        });
+        
+        // Set up click interactions
+        interactiveSteps.setOnStepClick((stepIndex, message) => {
+        });
+        
+        // Add to visual container and track
+        const layoutGroup = interactiveSteps.getLayoutGroup();
+        layoutGroup.dotIndex = dotIndex;
+        this.stepVisualizer.visualContainer.addChild(layoutGroup);
+        
+    // Apply configured z-index styling to ensure proper layering
+        if (layoutGroup.svgObject && (this.options.zIndex || this.options.position)) {
+            if (this.options.position) {
+                layoutGroup.svgObject.style.position = this.options.position;
+            }
+            if (this.options.zIndex) {
+                layoutGroup.svgObject.style.zIndex = String(this.options.zIndex);
+                
+                // Only apply to the main container, NOT to child elements to preserve internal layout
+                // Applying position absolute to child elements breaks flexbox layout
+            }
+        }
+    
+        this.stepTextBoxes.push({
+            dotIndex: dotIndex,
+            interactiveSteps: interactiveSteps,
+            layoutGroup: layoutGroup
+        });
+        
+        // Note: Removed updateVisualLayout call to prevent repositioning movement
+    }
+
+
+
+
+
+    /**
+     * Removes the text box for a specific dot
+     * @param {number} dotIndex - Index of the dot to remove text box for
+     */
+    removeTextBoxForDot(dotIndex) {
+        const textBoxIndex = this.stepTextBoxes.findIndex(tb => tb.dotIndex === dotIndex);
+        if (textBoxIndex >= 0) {
+            const item = this.stepTextBoxes[textBoxIndex];
+            this.stepVisualizer.visualContainer.removeChild(item.layoutGroup);
+            item.interactiveSteps.destroy();
+            this.stepTextBoxes.splice(textBoxIndex, 1);
+            
+            // Note: Removed updateVisualLayout call to prevent repositioning movement
+        }
+    }
+
+    /**
+     * Removes all text boxes
+     */
+    clearAllTextBoxes() {
+        this.stepTextBoxes.forEach(item => {
+            this.stepVisualizer.visualContainer.removeChild(item.layoutGroup);
+            item.interactiveSteps.destroy();
+        });
+        this.stepTextBoxes = [];
+        
+        // Note: Removed updateVisualLayout call to prevent repositioning movement
+    }
+
+    /**
+     * Finds the appropriate dot above the clicked one for text box positioning
+     * @param {number} dotIndex - Index of the clicked dot
+     * @returns {Object|null} The dot to align with, or null if none found
+     * @private
+     */
+    _findDotAboveForPositioning(dotIndex) {
+        const currentDot = this.stepVisualizer.stepDots[dotIndex];
+        if (!currentDot || !currentDot.equationRef) {
+            return null;
+        }
+        
+        const currentEquation = currentDot.equationRef;
+        const currentEquationIndex = this.stepVisualizer.steps.indexOf(currentEquation);
+        
+        // Find the nearest visible equation above
+        for (let i = currentEquationIndex - 1; i >= 0; i--) {
+            const step = this.stepVisualizer.steps[i];
+            if (step instanceof omdEquationNode && step.visible !== false) {
+                // Find the corresponding dot
+                for (let dotIdx = dotIndex - 1; dotIdx >= 0; dotIdx--) {
+                    const dot = this.stepVisualizer.stepDots[dotIdx];
+                    if (dot && dot.equationRef === step) {
+                        return dot;
+                    }
+                }
+                break;
+            }
+        }
+        
+        // If no visible equation above, use the clicked dot itself
+        return currentDot;
+    }
+
+    /**
+     * Gets the simplification data for a specific dot
+     * @param {number} dotIndex - Index of the dot
+     * @returns {Object} The simplification data for this step
+     * @private
+     */
+    _getSimplificationDataForDot(dotIndex) {
+        return this.stepVisualizer._getSimplificationDataForDot(dotIndex);
+    }
+
+
+
+    /**
+     * Gets all text boxes
+     * @returns {Array} Array of text box objects
+     */
+    getStepTextBoxes() {
+        return this.stepTextBoxes;
+    }
+
+    /**
+     * Updates the styling options for text boxes
+     * @param {Object} newOptions - New styling options
+     */
+    updateStyling(newOptions = {}) {
+        this.options = { ...this.options, ...newOptions };
+        
+        // Apply new styling to existing text boxes
+        this.stepTextBoxes.forEach(textBoxItem => {
+            if (textBoxItem.interactiveSteps && typeof textBoxItem.interactiveSteps.updateStyling === 'function') {
+                textBoxItem.interactiveSteps.updateStyling(this.options);
+            }
+        });
+    }
+
+    /**
+     * Gets the current styling options
+     * @returns {Object} Current styling options
+     */
+    getStyling() {
+        return { ...this.options };
+    }
 } 

package/omd/utils/aiNextEquationStep.js

@@ -1,106 +1,106 @@
-import OpenAI from 'openai';
-
-/**
- * Ask the AI for the next algebraic step for an equation.
- * This helper can be called in Node (server) with an API key, or can proxy to an endpoint.
- *
- * @param {string} equation - The equation string (e.g. "3x+2=14")
- * @param {object} [options]
- * @param {string} [options.apiKey] - API key for the OpenAI-compatible client (GEMINI_API_KEY)
- * @param {string} [options.baseURL] - Optional baseURL override for the OpenAI client
- * @param {string} [options.model] - Model name (default: "gemini-2.0-flash")
- * @param {string} [options.endpoint] - If provided, POSTs to this endpoint with { equation } and expects the same JSON response
- */
-export async function aiNextEquationStep(equation, options = {}) {
-    if (!equation) throw new Error('equation is required');
-
-    const prompt = `Given the equation ${equation}, return ONLY the next algebraic step required to solve for the variable, in one of the following strict JSON formats:
-
-For an operation (add, subtract, multiply, divide):
-{ "operation": "add|subtract|multiply|divide", "value": number or string }
-
-For a function applied to both sides (e.g., sqrt, log, sin):
-{ "function": "functionName" }
-
-If the equation is already solved (like x=4) or no valid algebraic step can be applied:
-{ "operation": "none" }
-
-Important rules for solving:
-1. When variables appear on both sides, first move all variables to one side by adding/subtracting variable terms
-2. When constants appear on both sides, move all constants to one side by adding/subtracting constants
-3. Focus on isolating the variable systematically
-4. For equations like 2x-5=3x+7, subtract the smaller variable term (2x) from both sides first
-
-Do not include any explanation, LaTeX, or extra text. Only output the JSON object.`;
-
-    // If an endpoint is provided, proxy the request there (useful for browser usage)
-    if (options.endpoint) {
-        const res = await fetch(options.endpoint, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({ equation })
-        });
-
-        if (!res.ok) {
-            const text = await res.text();
-            throw new Error(`Remote endpoint error: ${res.status} ${text}`);
-        }
-
-        const json = await res.json();
-        return json;
-    }
-
-    const apiKey = options.apiKey || (typeof process !== 'undefined' && process.env && process.env.GEMINI_API_KEY);
-    if (!apiKey) throw new Error('API key is required when not using a remote endpoint');
-
-    const baseURL = options.baseURL || 'https://generativelanguage.googleapis.com/v1beta/openai/';
-    const model = options.model || 'gemini-2.0-flash';
-
-    const client = new OpenAI({ apiKey, baseURL, dangerouslyAllowBrowser: true });
-
-    const messages = [
-        {
-            role: 'user',
-            content: [
-                {
-                    type: 'text',
-                    text: prompt
-                }
-            ]
-        }
-    ];
-
-    const response = await client.chat.completions.create({
-        model,
-        messages,
-        max_tokens: 150
-    });
-
-    // Extract JSON object from model output
-    let aiText = '';
-    try {
-        aiText = (response.choices && response.choices[0] && response.choices[0].message && response.choices[0].message.content) || '';
-        if (Array.isArray(aiText)) {
-            // Some SDKs return arrays of content objects
-            aiText = aiText.map(c => c.text || c.content || '').join('');
-        }
-        if (typeof aiText === 'object' && aiText.text) aiText = aiText.text;
-        aiText = String(aiText).trim();
-    } catch (e) {
-        throw new Error('Unexpected AI response format');
-    }
-
-    const jsonMatch = aiText.match(/\{[\s\S]*\}/);
-    if (!jsonMatch) throw new Error('AI did not return a JSON object');
-
-    try {
-        const parsed = JSON.parse(jsonMatch[0]);
-        return parsed;
-    } catch (e) {
-        throw new Error('Failed to parse AI JSON response: ' + e.message + ' -- raw: ' + aiText);
-    }
-}
-
-export default aiNextEquationStep;
+import OpenAI from 'openai';
+
+/**
+ * Ask the AI for the next algebraic step for an equation.
+ * This helper can be called in Node (server) with an API key, or can proxy to an endpoint.
+ *
+ * @param {string} equation - The equation string (e.g. "3x+2=14")
+ * @param {object} [options]
+ * @param {string} [options.apiKey] - API key for the OpenAI-compatible client (GEMINI_API_KEY)
+ * @param {string} [options.baseURL] - Optional baseURL override for the OpenAI client
+ * @param {string} [options.model] - Model name (default: "gemini-2.0-flash")
+ * @param {string} [options.endpoint] - If provided, POSTs to this endpoint with { equation } and expects the same JSON response
+ */
+export async function aiNextEquationStep(equation, options = {}) {
+    if (!equation) throw new Error('equation is required');
+
+    const prompt = `Given the equation ${equation}, return ONLY the next algebraic step required to solve for the variable, in one of the following strict JSON formats:
+
+For an operation (add, subtract, multiply, divide):
+{ "operation": "add|subtract|multiply|divide", "value": number or string }
+
+For a function applied to both sides (e.g., sqrt, log, sin):
+{ "function": "functionName" }
+
+If the equation is already solved (like x=4) or no valid algebraic step can be applied:
+{ "operation": "none" }
+
+Important rules for solving:
+1. When variables appear on both sides, first move all variables to one side by adding/subtracting variable terms
+2. When constants appear on both sides, move all constants to one side by adding/subtracting constants
+3. Focus on isolating the variable systematically
+4. For equations like 2x-5=3x+7, subtract the smaller variable term (2x) from both sides first
+
+Do not include any explanation, LaTeX, or extra text. Only output the JSON object.`;
+
+    // If an endpoint is provided, proxy the request there (useful for browser usage)
+    if (options.endpoint) {
+        const res = await fetch(options.endpoint, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ equation })
+        });
+
+        if (!res.ok) {
+            const text = await res.text();
+            throw new Error(`Remote endpoint error: ${res.status} ${text}`);
+        }
+
+        const json = await res.json();
+        return json;
+    }
+
+    const apiKey = options.apiKey || (typeof process !== 'undefined' && process.env && process.env.GEMINI_API_KEY);
+    if (!apiKey) throw new Error('API key is required when not using a remote endpoint');
+
+    const baseURL = options.baseURL || 'https://generativelanguage.googleapis.com/v1beta/openai/';
+    const model = options.model || 'gemini-2.0-flash';
+
+    const client = new OpenAI({ apiKey, baseURL, dangerouslyAllowBrowser: true });
+
+    const messages = [
+        {
+            role: 'user',
+            content: [
+                {
+                    type: 'text',
+                    text: prompt
+                }
+            ]
+        }
+    ];
+
+    const response = await client.chat.completions.create({
+        model,
+        messages,
+        max_tokens: 150
+    });
+
+    // Extract JSON object from model output
+    let aiText = '';
+    try {
+        aiText = (response.choices && response.choices[0] && response.choices[0].message && response.choices[0].message.content) || '';
+        if (Array.isArray(aiText)) {
+            // Some SDKs return arrays of content objects
+            aiText = aiText.map(c => c.text || c.content || '').join('');
+        }
+        if (typeof aiText === 'object' && aiText.text) aiText = aiText.text;
+        aiText = String(aiText).trim();
+    } catch (e) {
+        throw new Error('Unexpected AI response format');
+    }
+
+    const jsonMatch = aiText.match(/\{[\s\S]*\}/);
+    if (!jsonMatch) throw new Error('AI did not return a JSON object');
+
+    try {
+        const parsed = JSON.parse(jsonMatch[0]);
+        return parsed;
+    } catch (e) {
+        throw new Error('Failed to parse AI JSON response: ' + e.message + ' -- raw: ' + aiText);
+    }
+}
+
+export default aiNextEquationStep;