added formatting support for visualizing chat histories in ASK menus

HISTORY.md

@@ -3,6 +3,7 @@
 ## in development:
 * **New Features:**
     * passing a list to the ASK command in sensing presents a menu to the user
+    * formatting a list of texts displays it as chat-history in an ASK menu
     * export script (including dependencies) via its context menu
     * export / import sprite-local custom block definitions from the palette
     * added "combinations" primitive to the palette
@@ -33,7 +34,8 @@
 ### 2022-04-01
 * objects: added ASK-menu data representation for Booleans
 * objects: added ASK-menu data representation for Sounds
-* objects: added icon support for ASK menu items 
+* objects: added icon support for ASK menu items
+* objects: added formatting support for visualizing chat histories in ASK menus
 
 ### 2022-03-31
 * threads, objects: new menu functionality for ASK command, when passing a list

src/objects.js

@@ -88,7 +88,7 @@ VariableDialogMorph, HTMLCanvasElement, Context, List, RingMorph, HandleMorph,
 SpeechBubbleMorph, InputSlotMorph, isNil, FileReader, TableDialogMorph, String,
 BlockEditorMorph, BlockDialogMorph, PrototypeHatBlockMorph,  BooleanSlotMorph,
 localize, TableMorph, TableFrameMorph, normalizeCanvas, VectorPaintEditorMorph,
-AlignmentMorph, Process, WorldMap, copyCanvas, useBlurredShadows,
+AlignmentMorph, Process, WorldMap, copyCanvas, useBlurredShadows, BLACK,
 BlockVisibilityDialogMorph, CostumeIconMorph, SoundIconMorph, MenuItemMorph*/
 
 /*jshint esversion: 6*/
@@ -10052,6 +10052,12 @@ SpriteBubbleMorph.prototype.init = function (
     this.scale = stage ? stage.scale : 1;
     this.data = data;
     this.isQuestion = isQuestion;
+    this.bubbleFontColor = BLACK;
+    this.bubbleFontSize = sprite.bubbleFontSize;
+    this.bubbleFontIsBold = sprite.bubbleFontIsBold;
+    this.bubbleCorner = sprite.bubbleCorner;
+    this.bubbleBorder = sprite.bubbleBorder;
+    this.bubblePadding = this.bubbleCorner / 2;
 
     SpriteBubbleMorph.uber.init.call(
         this,
@@ -10102,9 +10108,9 @@ SpriteBubbleMorph.prototype.dataAsMorph = function (data) {
         isText = true;
         contents = new TextMorph(
             data,
-            sprite.bubbleFontSize * this.scale,
+            this.bubbleFontSize * this.scale,
             null, // fontStyle
-            sprite.bubbleFontIsBold,
+            this.bubbleFontIsBold,
             false, // italic
             'center'
         );
@@ -10297,9 +10303,9 @@ SpriteBubbleMorph.prototype.dataAsMorph = function (data) {
     } else {
         contents = new TextMorph(
             data.toString(),
-            sprite.bubbleFontSize * this.scale,
+            this.bubbleFontSize * this.scale,
             null, // fontStyle
-            sprite.bubbleFontIsBold,
+            this.bubbleFontIsBold,
             false, // italic
             'center'
         );
@@ -10332,6 +10338,7 @@ SpriteBubbleMorph.prototype.dataAsMorph = function (data) {
         if (isText) {
             width = Math.min(width, sprite.bubbleMaxTextWidth * this.scale);
         }
+        contents.color = this.bubbleFontColor;
         contents.setWidth(width);
     } else if (!(data instanceof List)) {
         // scale contents image
@@ -10361,8 +10368,6 @@ SpriteBubbleMorph.prototype.setScale = function (scale) {
 // SpriteBubbleMorph layout:
 
 SpriteBubbleMorph.prototype.fixLayout = function () {
-    var sprite = SpriteMorph.prototype;
-
     // rebuild my contents
     if (!(this.contentsMorph instanceof ListWatcherMorph ||
             this.contentsMorph instanceof TableFrameMorph)) {
@@ -10372,9 +10377,9 @@ SpriteBubbleMorph.prototype.fixLayout = function () {
     this.add(this.contentsMorph);
 
     // scale my settings
-    this.edge = sprite.bubbleCorner * this.scale;
+    this.edge = this.bubbleCorner * this.scale;
-    this.border = sprite.bubbleBorder * this.scale;
+    this.border = this.bubbleBorder * this.scale;
-    this.padding = sprite.bubbleCorner / 2 * this.scale;
+    this.padding = this.bubblePadding * this.scale;
 
     // adjust my dimensions
     this.bounds.setWidth(this.contentsMorph.width()
@@ -12878,11 +12883,30 @@ StagePickerMorph.prototype.init = function (options) {
             value = each;
             if (each instanceof List) { // treat as pair
                 isLine = each.isEmpty();
-                key = each.at(1);
+                if (this.isLeftQuote(each)) {
-                if (key instanceof List) {
+                    value = each.at(1);
-                    key = key.itemsArray();
+                    key = new SpriteBubbleMorph(
+                        value,
+                        null, // stage,
+                        null, // isThought,
+                        null // isQuestion
+                    );
+                } else if (this.isRightQuote(each)) {
+                    value = each.at(2);
+                    key = new SpriteBubbleMorph(
+                        value,
+                        null, // stage,
+                        false, // isThought,
+                        null // isQuestion
+                    );
+                    key.isPointingRight = false;
+                } else {
+                    key = each.at(1);
+                    if (key instanceof List) {
+                        key = key.itemsArray();
+                    }
+                    value = each.at(2);
                 }
-                value = each.at(2);
             }
             if (isLine) {
                 this.addLine();
@@ -12916,8 +12940,41 @@ StagePickerMorph.prototype.isSubmenu = function (options) {
         options.rank() > 1;
 };
 
+StagePickerMorph.prototype.isLeftQuote = function (options) {
+    return options instanceof List && !options.isEmpty() && !options.at(2);
+};
+
+StagePickerMorph.prototype.isRightQuote = function (options) {
+    return options instanceof List && !options.isEmpty() && !options.at(1);
+};
+
 StagePickerMorph.prototype.dataRepresentation = function (data) {
-    var sym;
+    var sym, img;
+    if (data instanceof SpeechBubbleMorph) {
+        data.bubbleFontSize = 12;
+        data.bubbleFontIsBold = false;
+        data.bubbleCorner = 5;
+        data.bubbleBorder = 0; // 1.5;
+        data.bubblePadding = 0;
+        data.scale = this.scale;
+        data.bubbleFontColor = data.isPointingRight ? BLACK : WHITE;
+        data.color = data.isPointingRight ? new Color(220, 220, 220)
+            : SpriteMorph.prototype.blockColor.sensing;
+        data.fixLayout();
+        data.rerender();
+        sym = data.fullImage();
+        if (data.isPointingRight) {
+            return sym;
+        }
+        img = newCanvas(new Point(
+            (SpriteMorph.prototype.bubbleMaxTextWidth + 10) * this.scale,
+            sym.height
+        ));
+        img.getContext('2d').drawImage(sym, img.width - sym.width, 0);
+        return img;
+//        sprite.bubbleMaxTextWidth * this.scale
+
+    }
     switch (Process.prototype.reportTypeOf(data)) {
     case 'costume':
     case 'sprite':