Make user message block; infinite

{hello-world → project}/package-lock.json

@@ -9,6 +9,7 @@
       "version": "1.0.0",
       "license": "Apache-2.0",
       "dependencies": {
+        "@blockly/toolbox-search": "^3.0.2",
         "blockly": "^11.0.0"
       },
       "devDependencies": {
@@ -33,6 +34,14 @@
         "lru-cache": "^10.4.3"
       }
     },
+    "node_modules/@blockly/toolbox-search": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@blockly/toolbox-search/-/toolbox-search-3.0.2.tgz",
+      "integrity": "sha512-NnwK9hjyxhCOmCuF1FGH8Ca+wiZ7E7LWFdx+X8Bi4szZkPBLd9ZY3lp8bWi9WlmQax3sXQ3QAMC9/bq2OXAkdw==",
+      "peerDependencies": {
+        "blockly": "^12.0.0"
+      }
+    },
     "node_modules/@csstools/color-helpers": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-5.1.0.tgz",

{hello-world → project}/package.json

@@ -24,6 +24,7 @@
     "webpack-dev-server": "^4.11.1"
   },
   "dependencies": {
+    "@blockly/toolbox-search": "^3.0.2",
     "blockly": "^11.0.0"
   }
-}
+}

{hello-world → project}/src/blocks/text.js

@@ -1,21 +1,19 @@
-/**
- * @license
- * Copyright 2023 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
 import * as Blockly from 'blockly/core';
 
 const whenUserSends = {
   type: 'when_user_sends',
-  message0: 'when user sends message do %1 %2',
+  message0: 'when user sends %1 do %2 %3',
   args0: [
+    {
+      "type": "input_value",
+      "name": "DUPLICATE"
+    },
     {
       "type": "input_dummy"
     },
     {
       "type": "input_statement",
-      "name": "code"
+      "name": "CODE"
     }
   ],
   inputsInline: true,
@@ -43,7 +41,7 @@ const assistantReply = {
 
 const getAssistantResponse = {
   type: 'get_assistant_response',
-  message0: 'call model %1 with prompt %2 with %3',
+  message0: 'call model %1 with prompt %2 %3 history',
   args0: [
     {
       type: 'field_dropdown',
@@ -62,8 +60,8 @@ const getAssistantResponse = {
       type: 'field_dropdown',
       name: 'HISTORY',
       options: [
-        ["history", "True"],
-        ["no history", "False"]
+        ["with", "True"],
+        ["without", "False"]
       ]
     },
   ],
@@ -74,8 +72,18 @@ const getAssistantResponse = {
   helpUrl: '',
 };
 
+const user_message = {
+  type: "user_message",
+  message0: "user message",
+  output: "String",
+  colour: "#47A8D1",
+  tooltip: "",
+  helpUrl: "",
+};
+
 export const blocks = Blockly.common.createBlockDefinitionsFromJsonArray([
   whenUserSends,
   assistantReply,
   getAssistantResponse,
+  user_message
 ]);

{hello-world → project}/src/generators/python.js

@@ -4,7 +4,7 @@ export const forBlock = Object.create(null);
 
 // Generates a Python function that runs when the user sends a message
 forBlock['when_user_sends'] = function (block, generator) {
-  const body = generator.statementToCode(block, 'code') || "";
+  const body = generator.statementToCode(block, 'CODE') || "";
   const code = `def on_user_send(user_message):\n${body}  return\n`;
   return code;
 };
@@ -23,4 +23,9 @@ forBlock['get_assistant_response'] = function (block, generator) {
 
   const code = `get_assistant_response(${prompt}, model="${model}", use_history=${history})`;
   return [code, Order.NONE];
+};
+
+forBlock['user_message'] = function (block, generator) {
+  const code = `user_message`;
+  return [code, generator.ORDER_NONE];
 };

{hello-world → project}/src/index.js

@@ -1,15 +1,10 @@
-/**
- * @license
- * Copyright 2023 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
 import * as Blockly from 'blockly';
 import { blocks } from './blocks/text';
 import { forBlock } from './generators/python';
 import { pythonGenerator } from 'blockly/python';
 import { save, load } from './serialization';
 import { toolbox } from './toolbox';
+import '@blockly/toolbox-search';
 import './index.css';
 
 // Register the blocks and generator with Blockly
@@ -48,21 +43,16 @@ const myTheme = Blockly.Theme.defineTheme('myScratchTheme', {
 // Inject Blockly with theme + renderer
 const ws = Blockly.inject(blocklyDiv, {
   toolbox,
+  grid: {
+    spacing: 35,
+    length: 3,
+    colour: '#ccc',
+    snap: false
+  },
   renderer: 'zelos',
   theme: myTheme,
 });
 
-if (!ws.getVariable('user_message')) {
-  ws.createVariable('user_message');
-}
-
-ws.updateUserMessage = (message) => {
-  let variable = ws.getVariable('user_message');
-  if (!variable) ws.createVariable('user_message');
-  ws.variableValues = ws.variableValues || {};
-  ws.variableValues['user_message'] = message;
-};
-
 const updateCode = () => {
   let code = pythonGenerator.workspaceToCode(ws);
   const codeEl = document.querySelector('#generatedCode code');
@@ -120,8 +110,45 @@ updateCode();
 ws.addChangeListener((e) => {
   if (e.isUiEvent) return;
 
-  if (!ws.getVariable('user_message')) {
-    ws.createVariable('user_message');
+  save(ws);
+});
+
+ws.addChangeListener((event) => {
+  if (event.isUiEvent) return;
+
+  if (event.type === Blockly.Events.BLOCK_MOVE) {
+    if (event.oldParentId && !event.newParentId) {
+      const removedBlock = ws.getBlockById(event.blockId);
+      const oldParent = ws.getBlockById(event.oldParentId);
+
+      if (
+        removedBlock &&
+        oldParent &&
+        removedBlock.type === 'user_message' &&
+        oldParent.type === 'when_user_sends'
+      ) {
+        console.log('[DISCONNECT] user_message removed from when_user_sends');
+
+        if (event.oldInputName) {
+          Blockly.Events.disable();
+          try {
+            const newMsgBlock = ws.newBlock('user_message');
+            newMsgBlock.initSvg();
+            newMsgBlock.render();
+
+            const input = oldParent.getInput(event.oldInputName);
+            if (input) {
+              input.connection.connect(newMsgBlock.outputConnection);
+              console.log('[REPLACE] user_message restored instantly (no blink)');
+            }
+
+            ws.render(); // ensure workspace updates immediately
+          } finally {
+            Blockly.Events.enable();
+          }
+        }
+      }
+    }
   }
 
   save(ws);
@@ -141,16 +168,14 @@ window.addEventListener("message", (event) => {
 });
 
 function handleUserMessage(message) {
-  if (window.Blockly && window.ws) {
-    let v = ws.getVariable('user_message') || ws.createVariable('user_message');
-    ws.variableValues = ws.variableValues || {};
-    ws.variableValues['user_message'] = message;
+  const blocks = ws.getAllBlocks();
+  const msgBlock = blocks.find(b => b.type === 'user_message');
+  if (msgBlock) {
+    msgBlock.setFieldValue(message, 'TEXT');
+    console.log(`[Blockly] Updated user_message with: ${message}`);
   }
 
   if (typeof window.userSendHandler === "function") {
-    console.log("[PARENT] userSendHandler exists, invoking it");
     window.userSendHandler(message);
-  } else {
-    console.warn("[PARENT] userSendHandler is undefined!");
   }
-}
+}

{hello-world → project}/src/toolbox.js

@@ -1,20 +1,14 @@
-/**
- * @license
- * Copyright 2023 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-/*
-This toolbox contains nearly every single built-in block that Blockly offers,
-in addition to the custom block 'add_text' this sample app adds.
-You probably don't need every single block, and should consider either rewriting
-your toolbox from scratch, or carefully choosing whether you need each block
-listed here.
-*/
-
 export const toolbox = {
   kind: 'categoryToolbox',
   contents: [
+    {
+      'kind': 'search',
+      'name': 'Search',
+      'contents': [],
+    },
+    {
+      'kind': 'sep',
+    },
     {
       kind: 'category',
       name: 'Custom',
@@ -23,6 +17,14 @@ export const toolbox = {
         {
           kind: 'block',
           type: 'when_user_sends',
+          inputs: {
+            DUPLICATE: {
+              block: {
+                kind: "block",
+                type: "user_message"
+              }
+            },
+          },
         },
         {
           kind: 'block',
@@ -34,17 +36,16 @@ export const toolbox = {
           inputs: {
             PROMPT: {
               shadow: {
-                type: "variables_get",
-                fields: {
-                  VAR: {
-                    name: "user_message",
-                    type: "String"
-                  }
-                }
+                kind: "block",
+                type: "user_message"
               }
             },
           },
         },
+        {
+          kind: 'block',
+          type: 'user_message',
+        },
       ]
     },
     {
@@ -497,24 +498,6 @@ export const toolbox = {
           kind: 'block',
           type: 'lists_create_with',
         },
-        {
-          kind: 'block',
-          type: 'lists_create_with',
-        },
-        {
-          kind: 'block',
-          type: 'lists_repeat',
-          inputs: {
-            NUM: {
-              shadow: {
-                type: 'math_number',
-                fields: {
-                  NUM: 5,
-                },
-              },
-            },
-          },
-        },
         {
           kind: 'block',
           type: 'lists_length',
@@ -567,20 +550,6 @@ export const toolbox = {
             },
           },
         },
-        {
-          kind: 'block',
-          type: 'lists_split',
-          inputs: {
-            DELIM: {
-              shadow: {
-                type: 'text',
-                fields: {
-                  TEXT: ',',
-                },
-              },
-            },
-          },
-        },
         {
           kind: 'block',
           type: 'lists_sort',
@@ -602,7 +571,7 @@ export const toolbox = {
     },
     {
       kind: 'category',
-      name: 'Functions',
+      name: 'Tools',
       categorystyle: 'procedure_category',
       custom: 'PROCEDURE',
     },