Reflection Learning Widget (sugarlabs#4747)

* reflection-widget

* reflection widget

* reflection widget

* added comments

* no need for indexdb

* thinking animation

* help string improved

* add message sending on Enter key, improve error handling, and update localStorage usage

* refactor: enhance bot reply handling and add Markdown to HTML conversion

* fix: no trailing space

* deleted reflection.css

* fix: update widget description and improve logging in generateAnalysis method

* enter key bug fix

* feat: add developer guide for Reflection Widget

* Revert "feat: add developer guide for Reflection Widget"

This reverts commit b9c38a1.

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;