Add configurable polling to the UI

- Provide present intervals of 1, 5 and 30 seconds as well as a disable
- Show the user message immediately (no polling) regardless of setting
- Provide a force refresh, essential for disabled polling and long
  polling to get updated

Author: pstephengoogle

demo/ui/components/async_poller.js

@@ -7,18 +7,21 @@ class AsyncPoller extends LitElement {
   static properties = {
     triggerEvent: {type: String},
     action: {type: Object},
-    isRunning: {type: Boolean},
+    polling_interval: {type: Number},
   };
 
   render() {
     return html`<div></div>`;
   }
 
   firstUpdated() {
+    if (this.polling_interval <= 0) {
+      return;
+    }
     if (this.action) {
       setTimeout(() => {
         this.runTimeout(this.action)
-      }, this.action.duration_seconds * 1000);
+      }, this.polling_interval * 1000);
     }
   }
 
@@ -28,9 +31,11 @@ class AsyncPoller extends LitElement {
         action: action,
       }),
     );
-    setTimeout(() => {
-      this.runTimeout(action);
-    }, action.duration_seconds * 1000);
+    if (this.polling_interval > 0) {
+      setTimeout(() => {
+        this.runTimeout();
+      }, this.polling_interval * 1000);
+    }
   }
 }
 

demo/ui/components/async_poller.py

@@ -40,5 +40,8 @@ def async_poller(
       events={
           "triggerEvent": trigger_event,
       },
-      properties={"action": asdict(action) if action else {}},
+      properties={
+          "polling_interval": action.duration_seconds if action else 1,
+          "action": asdict(action) if action else {}
+      },
   )

demo/ui/components/conversation.py

@@ -7,11 +7,10 @@
 import threading
 
 from state.state import AppState, SettingsState, StateMessage
-from state.host_agent_service import SendMessage, UpdateAppState, ListConversations
+from state.host_agent_service import SendMessage, ListConversations, convert_message_to_state
 from .chat_bubble import chat_bubble
 from .form_render import is_form, render_form, form_sent
 from .async_poller import async_poller, AsyncAction
-from state.host_agent_service import UpdateAppState
 from common.types import Message, TextPart
 
 
@@ -49,6 +48,16 @@ async def send_message(message: str, message_id: str = ""):
       metadata={'conversation_id': c.conversation_id if c else "",
                 'conversation_name': c.name if c else ""},
   )
+  # Add message to state until refresh replaces it.
+  state_message = convert_message_to_state(request)
+  if not app_state.messages:
+    app_state.messages = []
+  app_state.messages.append(state_message)
+  conversation = next(filter(
+      lambda x: x.conversation_id == c.conversation_id,
+      app_state.conversations), None)
+  if conversation:
+    conversation.message_ids.append(state_message.message_id)
   response = await SendMessage(request)
 
 

demo/ui/components/header.py

@@ -1,5 +1,5 @@
 import mesop as me
-
+from .poller import polling_buttons
 
 @me.content_component
 def header(title: str, icon: str):
@@ -19,4 +19,5 @@ def header(title: str, icon: str):
                 type="headline-5",
                 style=me.Style(font_family="Google Sans"),
             )
-            me.slot()
+        me.slot()
+        polling_buttons()

demo/ui/components/page_scaffold.py

@@ -3,6 +3,7 @@
 
 from .side_nav import sidenav
 from .async_poller import async_poller, AsyncAction
+from .poller import polling_buttons
 
 from state.state import AppState
 from state.host_agent_service import UpdateAppState
@@ -29,7 +30,11 @@ def page_scaffold():
 
     app_state = me.state(AppState)
     action = (
-        AsyncAction(value=app_state, duration_seconds=1) if app_state else None
+        AsyncAction(
+            value=app_state,
+            duration_seconds=app_state.polling_interval)
+        if app_state
+        else None
     )
     async_poller(
         action=action, trigger_event=refresh_app_state

demo/ui/components/poller.py

@@ -0,0 +1,49 @@
+import mesop as me
+from state.state import AppState
+from state.host_agent_service import UpdateAppState
+
+@me.content_component
+def polling_buttons():
+    """Polling buttons component"""
+    state = me.state(AppState)
+    with me.box(
+        style=me.Style(
+            display="flex",
+            justify_content="end",
+        )
+    ):
+      me.button_toggle(
+          value=[str(state.polling_interval)],
+        buttons=[
+          me.ButtonToggleButton(label="1s", value="1"),
+          me.ButtonToggleButton(label="5s", value="5"),
+          me.ButtonToggleButton(label="30s", value="30"),
+          me.ButtonToggleButton(label="Disable", value="0")
+        ],
+        multiple=False,
+        hide_selection_indicator=True,
+        disabled=False,
+        on_change=on_change,
+        style=me.Style(
+            margin=me.Margin(bottom=20),
+
+        ),
+      )
+      with me.content_button(
+        type="raised",
+        on_click=force_refresh,
+      ):
+        me.icon("refresh")
+    me.slot()
+
+def on_change(e: me.ButtonToggleChangeEvent):
+  state = me.state(AppState)
+  state.polling_interval = int(e.values[0])
+
+async def force_refresh(e: me.ClickEvent):
+    """Refresh app state event handler"""
+    yield
+    app_state = me.state(AppState)
+    await UpdateAppState(app_state, app_state.current_conversation_id)
+    yield
+

demo/ui/state/state.py

@@ -65,6 +65,7 @@ class AppState:
   completed_forms: dict[str, dict[str, Any] | None] = dataclasses.field(default_factory=dict)
   # This is used to track the message sent to agent with form data
   form_responses: dict[str, str] = dataclasses.field(default_factory=dict)
+  polling_interval: int = 1
 
 @me.stateclass
 class SettingsState: