Merge branch 'sugarlabs:master' into master

Author: Commanderk3

css/activities.css

@@ -2020,3 +2020,53 @@ table {
   min-width: 250px;
   max-width: 80%;
 }
+
+.chatInterface{
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: "10px";
+  background-color: white;
+}
+
+.chatLog {
+  flex: 1;
+  overflow-y: auto;
+  border: 1px solid #ccc;
+  padding: 10px;
+  margin-bottom: 10px;
+  display: flex;
+  flex-direction: column;
+}
+
+.select-mentor {
+  width: 80px;
+  background: white;
+  border-width: 1px;
+  border-style: solid;
+  border-color: black;
+}
+
+.input-query {
+  flex: 1;
+  padding: 10px;
+  margin-right: 10px;
+}
+
+.message-container {
+  align-self: flex-start;
+  background: #dfdfdf;
+  color: #000;
+  padding: 10px;
+  border-radius: 12px;
+  max-width: 60%;
+  margin-bottom: 8px;
+  display: flex;
+  flex-direction: column;
+  word-wrap: break-word;
+}
+
+.message-container.user {
+  align-self: flex-end;
+  background-color: #DCF8C6;
+}

header-icons/code.svg

@@ -173,6 +173,7 @@ if (_THIS_IS_MUSIC_BLOCKS_) {
         "widgets/timbre",
         "widgets/oscilloscope",
         "widgets/sampler",
+        "widgets/reflection",
         "activity/lilypond",
         "activity/abc",
         "activity/midi",
@@ -3123,6 +3124,8 @@ class Activity {
                         break;
                     }
                     case 13: { // 'R or ENTER'
+                        if (this.isInputON) return;
+                        
                         if (this.searchWidget.style.visibility === "visible") {
                             return;
                         }

header-icons/general_mentor.svg

@@ -1640,6 +1640,62 @@ function setupWidgetBlocks(activity) {
         }
     }
 
+
+    class ReflectionBlock extends StackClampBlock {
+        /**
+         * Creates a ReflectionBlock instance.
+         */
+        constructor() {
+            super("reflection");
+            this.setPalette("widgets", activity);
+            this.beginnerBlock(true);
+
+            this.setHelpString([
+                _("The Reflection block opens a space for you to think about your learning."),
+                null,
+                "reflection"
+            ]);
+
+            this.formBlock({ name: _("reflection"), canCollapse: true });
+            this.makeMacro((x, y) => [
+                [0, "reflection", x, y, [null, 1]],
+                [1, "print", 0, 0, [0,2,null]],
+                [2, ["text",{"value":"Reflective Learning"}], 0, 0, [1]]
+            ]);
+        }
+
+        /**
+         * Handles the flow of data for the status block.
+         * @param {any[]} args - The arguments passed to the block.
+         * @param {object} logo - The logo object.
+         * @param {object} turtle - The turtle object.
+         * @param {object} blk - The block object.
+         */
+        flow(args, logo, turtle, blk) {
+            if (logo.reflection === null) {
+                logo.reflection = new ReflectionMatrix();
+            }
+
+            logo.reflection.init(activity);
+            logo.statusFields = [];
+
+            logo.inReflectionMatrix = true;
+
+            const listenerName = "_reflection_" + turtle;
+            logo.setDispatchBlock(blk, turtle, listenerName);
+
+            const __listener = () => {
+                logo.reflection.init(activity);
+                logo.inReflectionMatrix = false;
+            };
+
+            logo.setTurtleListener(turtle, listenerName, __listener);
+
+            if (args.length === 1) return [args[0], 1];
+        }
+    }
+
+            
     class AIDebugger extends StackClampBlock {
         constructor() {
             super("aidebugger");
@@ -1690,6 +1746,7 @@ function setupWidgetBlocks(activity) {
         }
     }
 
+
     // Set up blocks if this is Music Blocks environment
     if (_THIS_IS_MUSIC_BLOCKS_) {
         new EnvelopeBlock().setup(activity);
@@ -1705,6 +1762,7 @@ function setupWidgetBlocks(activity) {
         new oscilloscopeWidgetBlock().setup(activity);
         new PitchSliderBlock().setup(activity);
         new ChromaticBlock().setup(activity);
+        new ReflectionBlock().setup(activity);
         // new AIMusicBlocks().setup(activity);
         new MusicKeyboard2Block().setup(activity);
         new MusicKeyboardBlock().setup(activity);

header-icons/music.svg

@@ -110,6 +110,7 @@ class Logo {
         this._meSpeak = this.activity.meSpeak;
 
         // Widgets
+        this.reflection = null;
         this.phraseMaker = null;
         this.pitchDrumMatrix = null;
         this.arpeggio = null;

header-icons/notes_icon.svg

@@ -0,0 +1,184 @@
+# Reflection Widget - Developer Guide
+
+## Overview
+
+The `ReflectionMatrix` class provides a chat-based interface for users to interact with AI mentors for reflecting on their music blocks project. It manages chat history, mentor selection, message exchange with a backend server, and report generation.
+
+Backend Code for the widget : [musicblocks_reflection_fastapi](https://github.com/Commanderk3/musicblocks_reflection_fastapi)
+
+## Key Features
+
+-   **Multi-mentor Chat:** Switch between AI mentors (Meta/Rohan, Music/Beethoven, Code/Steve).
+-   **Chat History:** Stores and renders conversation history.
+-   **Typing Indicator:** Shows animated "Thinking..." while awaiting responses.
+-   **Markdown Rendering:** Converts Markdown responses to HTML for display.
+-   **Analysis & Summary:** Fetches project analysis after sufficient chat history.
+-   **Local Storage:** Saves and retrieves analysis reports.
+-   **Export:** Download chat transcript as a text file.
+
+## Components
+
+-   **Widget Interface**: `js/widgets/reflection.js`
+-   **Block Definition**: `js/blocks/WidgetBlocks.js`
+-   **Registration**: `js/activity.js` (line 176) and `js/logo.js` (line 113)
+-   **CSS styling**: `css/activities.css` (line 2023 - 2072)
+
+## Methods
+
+-   **Widget Window Initialisation**
+
+    `init(activity)` : Triggers when the reflection block is clicked. It renders the widget and initializes the required data structures.
+
+---
+
+-   **Mentor Switching**
+
+    `changeMentor("code")` : Changes the active mentor and updates button highlights.
+
+---
+
+-   Sending Messages
+
+    `sendMessage()` : Pushes user message to history, displays it, and requests bot reply.
+
+---
+
+-   Bot Reply Handling
+
+    `botReplyDiv(message, user_query, md)` :
+
+    -   If `user_query` is true, sends message to backend and displays reply.
+    -   If `md` is true, renders reply as Markdown.
+
+---
+
+-   Analysis & Summary
+
+    `getAnalysis()` :
+
+    -   Requests project analysis from backend if chat history is sufficient.
+    -   Saves analysis to localStorage.
+
+---
+
+-   Local Storage
+
+    -   **Save:** `saveReport(data)` stores analysis.
+    -   **Read:** `readReport()` retrieves analysis.
+
+---
+
+-   Export Conversation
+
+    `downloadAsTxt(conversationData)` : Downloads chat history as a `.txt` file.
+
+---
+
+-   Markdown Rendering
+
+    `mdToHTML(md)` : Converts Markdown to HTML for display in chat.
+
+---
+
+## API Endpoints
+
+### 1. `/projectcode`
+
+-   **Method:** `POST`
+-   **Purpose:** Sends the exported project code to the backend to receive an algorithmic summary.
+-   **Payload:**
+    ```json
+    {
+        "code": "<project code string>"
+    }
+    ```
+-   **Response:**  
+    ```json
+    {
+        "algorithm": "<algorithm string>",
+        "message": "<first message>"
+    }
+    ```
+    or  
+    ```json
+    {
+        "error": "<error message>"
+    }
+    ```
+
+---
+
+### 2. `/chat`
+
+-   **Method:** `POST`
+-   **Purpose:** Sends a user query, chat history, mentor selection, and project algorithm to the backend to get an AI mentor's reply.
+-   **Payload:**
+    ```json
+    {
+      "query": "<user message>",
+      "messages": [ { "role": "...", "content": "..." }, ... ],
+      "mentor": "<mentor key>",
+      "algorithm": "<algorithm string>"
+    }
+    ```
+-   **Response:**  
+    `{ response: "<bot reply>" }`  
+    or  
+    `{ error: "<error message>" }`
+
+-   **Example `messages` structure**
+    ```json
+    [
+        {
+            "role": "meta",
+            "content": "hello"
+        },
+        {
+            "role": "user",
+            "content": "hi"
+        },
+        {
+            "role": "meta",
+            "content": "Hey there! I'm Rohan, the meta-mentor here. Tell me, what did you create in your project?"
+        }
+    ]
+    ```
+
+---
+
+### 3. `/analysis`
+
+-   **Method:** `POST`
+-   **Purpose:** Sends the chat history and summary to the backend to receive a project analysis report.
+-   **Payload:**
+    ```json
+    {
+      "messages": [ { "role": "...", "content": "..." }, ... ],
+      "summary": "<summary string>"
+    }
+    ```
+-   **Response:**  
+    `{ response: "<analysis report>" }`  
+    or  
+    `{ error: "<error message>" }`
+
+---
+
+**All endpoints expect and return JSON.**  
+**The backend is expected to run locally while development.**
+
+---
+
+### API testing
+
+```bash
+curl -X POST http://localhost:PORT/projectcode \
+     -H "Content-Type: application/json" \
+     -d '{
+           "code": "MUSICBLOCKS_PROJECT_CODE_HERE"
+         }'
+```
+
+**Note** : Save your Music Blocks project as an HTML file. Open the file to locate the embedded JSON code, and make sure to stringify the JSON before using it for testing.
+
+Written by : [Diwangshu Kakoty](https://github.com/Commanderk3)