From 758a73e8ab1e46b6519e9067d43a89cbc74e38db Mon Sep 17 00:00:00 2001 From: Ettore Di Giacinto Date: Tue, 4 Mar 2025 22:01:00 +0100 Subject: [PATCH] Minor UX Tweaks Signed-off-by: Ettore Di Giacinto --- webui/app.go | 3 +- webui/routes.go | 11 +++- webui/views/agents.html | 110 ++++++++++++++++++++++++-------------- webui/views/index.html | 6 ++- webui/views/settings.html | 103 ++++++++++++++++++++++++++--------- 5 files changed, 165 insertions(+), 68 deletions(-) diff --git a/webui/app.go b/webui/app.go index 1b5b80e..aabe00e 100644 --- a/webui/app.go +++ b/webui/app.go @@ -97,9 +97,9 @@ func statusJSONMessage(c *fiber.Ctx, message string) error { func (a *App) Pause(pool *state.AgentPool) func(c *fiber.Ctx) error { return func(c *fiber.Ctx) error { - xlog.Info("Pausing agent", c.Params("name")) agent := pool.GetAgent(c.Params("name")) if agent != nil { + xlog.Info("Pausing agent", "name", c.Params("name")) agent.Pause() } return statusJSONMessage(c, "ok") @@ -110,6 +110,7 @@ func (a *App) Start(pool *state.AgentPool) func(c *fiber.Ctx) error { return func(c *fiber.Ctx) error { agent := pool.GetAgent(c.Params("name")) if agent != nil { + xlog.Info("Starting agent", "name", c.Params("name")) agent.Resume() } return statusJSONMessage(c, "ok") diff --git a/webui/routes.go b/webui/routes.go index 86f647c..b5b5306 100644 --- a/webui/routes.go +++ b/webui/routes.go @@ -32,6 +32,7 @@ func (app *App) registerRoutes(pool *state.AgentPool, webapp *fiber.App) { "Agents": pool.List(), "AgentCount": len(pool.List()), "Actions": len(services.AvailableActions), + "Connectors": len(services.AvailableConnectors), }) }) @@ -93,9 +94,17 @@ func (app *App) registerRoutes(pool *state.AgentPool, webapp *fiber.App) { }) webapp.Get("/settings/:name", func(c *fiber.Ctx) error { + status := false + for _, a := range pool.List() { + if a == c.Params("name") { + status = !pool.GetAgent(a).Paused() + } + } + return c.Render("views/settings", fiber.Map{ // "Character": agent.Character, - "Name": c.Params("name"), + "Name": c.Params("name"), + "Status": status, }) }) webapp.Post("/settings/import", app.ImportAgent(pool)) diff --git a/webui/views/agents.html b/webui/views/agents.html index 95e0029..a274ece 100644 --- a/webui/views/agents.html +++ b/webui/views/agents.html @@ -16,7 +16,7 @@
-

Smart Agent List

+

Agent List

Manage and interact with your AI agents

@@ -55,7 +55,6 @@ -
@@ -86,16 +85,15 @@ -
- - @@ -179,41 +177,71 @@ } }); - // Add event listeners for Start and Pause buttons - document.querySelectorAll('.action-btn[data-action]').forEach(button => { - button.addEventListener('htmx:beforeRequest', function() { - this.style.animation = 'pulse 0.5s'; - }); - - button.addEventListener('htmx:afterRequest', function(event) { - const xhr = event.detail.xhr; - const action = this.getAttribute('data-action'); + // Handle toggle buttons - using pure JavaScript + document.querySelectorAll('.toggle-btn').forEach(button => { + button.addEventListener('click', function() { const agent = this.getAttribute('data-agent'); + const isActive = this.getAttribute('data-active') === 'true'; + const endpoint = isActive ? `/pause/${agent}` : `/start/${agent}`; - this.style.animation = ''; + // Add animation + this.style.animation = 'pulse 0.5s'; - if (xhr.status === 200) { - try { - const response = JSON.parse(xhr.responseText); - - if (response.status === "ok") { - // Show success toast - showToast(`Agent "${agent}" ${action === 'start' ? 'started' : 'paused'} successfully`, 'success'); + // Create a new XMLHttpRequest + const xhr = new XMLHttpRequest(); + xhr.open('PUT', endpoint); + xhr.setRequestHeader('Content-Type', 'application/json'); + + xhr.onload = () => { + // Clear animation + this.style.animation = ''; + + if (xhr.status === 200) { + try { + const response = JSON.parse(xhr.responseText); - // Update the status cell if needed - updateAgentStatus(agent, action === 'start' ? true : false); - } else if (response.error) { - // Show error toast - showToast(`Error: ${response.error}`, 'error'); + if (response.status === "ok") { + // Toggle the button state + const newState = !isActive; + this.setAttribute('data-active', newState ? 'true' : 'false'); + + // Update button text and icon + if (newState) { + this.innerHTML = ' Pause'; + } else { + this.innerHTML = ' Start'; + } + + // Show success toast + const action = isActive ? 'pause' : 'start'; + showToast(`Agent "${agent}" ${action}ed successfully`, 'success'); + + // Update the status badge + updateAgentStatus(agent, newState); + } else if (response.error) { + // Show error toast + showToast(`Error: ${response.error}`, 'error'); + } + } catch (e) { + // Handle parsing error + showToast("Invalid response format", 'error'); + console.error("Error parsing response:", e); } - } catch (e) { - // Handle parsing error - showToast("Invalid response format", 'error'); + } else { + // Handle HTTP error + showToast(`Server error: ${xhr.status}`, 'error'); } - } else { - // Handle HTTP error - showToast(`Server error: ${xhr.status}`, 'error'); - } + }; + + xhr.onerror = () => { + // Clear animation + this.style.animation = ''; + showToast("Network error occurred", 'error'); + console.error("Network error occurred"); + }; + + // Send the request + xhr.send(JSON.stringify({})); }); }); }); diff --git a/webui/views/index.html b/webui/views/index.html index 776e8c1..ec6e144 100644 --- a/webui/views/index.html +++ b/webui/views/index.html @@ -140,7 +140,7 @@ Company Logo
-

SMART ASSISTANT DASHBOARD

+

LocalAgent

@@ -148,6 +148,10 @@
{{.Actions}}
Available Actions
+
+
{{.Connectors}}
+
Available Connectors
+
{{ .AgentCount }}
Agents
diff --git a/webui/views/settings.html b/webui/views/settings.html index 708137d..96de604 100644 --- a/webui/views/settings.html +++ b/webui/views/settings.html @@ -22,20 +22,14 @@

Agent Control

-
@@ -73,19 +67,86 @@