Allow to specify dynamic prompts

webui/prompts.go

@@ -0,0 +1,41 @@
+package webui
+
+import (
+	"encoding/json"
+
+	"github.com/mudler/LocalAgent/pkg/xlog"
+
+	"github.com/mudler/LocalAgent/core/agent"
+	"github.com/mudler/LocalAgent/core/state"
+)
+
+const (
+	// Connectors
+	DynamicPromptCustom = "custom"
+)
+
+var AvailableBlockPrompts = []string{
+	DynamicPromptCustom,
+}
+
+func PromptBlocks(a *state.AgentConfig) []agent.PromptBlock {
+	promptblocks := []agent.PromptBlock{}
+
+	for _, c := range a.PromptBlocks {
+		var config map[string]string
+		if err := json.Unmarshal([]byte(c.Config), &config); err != nil {
+			xlog.Info("Error unmarshalling connector config", err)
+			continue
+		}
+		switch c.Type {
+		case DynamicPromptCustom:
+			prompt, err := agent.NewDynamicPrompt(config, "")
+			if err != nil {
+				xlog.Error("Error creating custom prompt", "error", err)
+				continue
+			}
+			promptblocks = append(promptblocks, prompt)
+		}
+	}
+	return promptblocks
+}

webui/routes.go

@@ -45,8 +45,9 @@ func (app *App) registerRoutes(pool *state.AgentPool, webapp *fiber.App) {
 
 	webapp.Get("/create", func(c *fiber.Ctx) error {
 		return c.Render("views/create", fiber.Map{
-			"Actions":    AvailableActions,
-			"Connectors": AvailableConnectors,
+			"Actions":      AvailableActions,
+			"Connectors":   AvailableConnectors,
+			"PromptBlocks": AvailableBlockPrompts,
 		})
 	})
 

webui/views/create.html

@@ -55,7 +55,6 @@
         <button id="action_button" type="button" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-500 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">Add action</button>
    
         <script>
-
             document.getElementById('action_button').addEventListener('click', function() {
                 const actionsSection = document.getElementById('action_box');
                 const ii = actionsSection.getElementsByClassName('action').length;
@@ -74,8 +73,34 @@
             
                 actionsSection.insertAdjacentHTML('beforeend', newActionHTML);
             });
-            </script>
+        </script>
  
+        <div class="mb-4" id="dynamic_box">
+        </div>
+        <button id="dynamic_button" type="button" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-500 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">Add Dynamic prompt</button>
+
+        <script>
+            const promptBlocks = `{{ range .PromptBlocks }}<option value="{{.}}">{{.}}</option>{{ end }}`;
+
+            document.getElementById('dynamic_button').addEventListener('click', function() {
+                const actionsSection = document.getElementById('dynamic_box');
+                const ii = actionsSection.getElementsByClassName('promptBlock').length;
+
+                const newActionHTML = `
+                <div class="promptBlock mb-4">
+                    <label for="promptName${ii}" class="block text-lg font-medium text-gray-400">Block Prompt</label>
+                    <select name="promptblocks[${ii}].name" id="promptName${ii}" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md bg-gray-700 text-white">
+                    `+promptBlocks+`</select>
+                    <div class="mb-4">
+                        <label for="promptConfig${ii}" class="block text-lg font-medium text-gray-400">Prompt Config (JSON)</label>
+                        <textarea id="promptConfig${ii}" name="promptblocks[${ii}].config" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md bg-gray-700 text-white" placeholder='{"results":"5"}'>{}</textarea>
+                    </div>
+                </div>
+                `;
+            
+                actionsSection.insertAdjacentHTML('beforeend', newActionHTML);
+            });
+        </script>
      
         <div class="mb-4">
             <label for="hud" class="block text-lg font-medium text-gray-400">HUD</label>