Add demo page shows state code

examples/webpage/app.js

@@ -39,6 +39,8 @@ const els = {
   micLabel: document.querySelector(".mic-btn__label"),
   micIndicator: document.getElementById("mic-indicator"),
   botIndicator: document.getElementById("bot-indicator"),
+  stateIndicator: document.getElementById("state-indicator"),
+  stateLabel: document.getElementById("state-label"),
   clearBtn: document.getElementById("clear-btn"),
   clearWsLogBtn: document.getElementById("clear-ws-log-btn"),
   wsLog: document.getElementById("ws-log"),
@@ -71,6 +73,7 @@ const state = {
 
   // Chat state.
   currentAssistantBubble: null,
+  assistantState: "",
 
   // VU meter smoothing.
   meterLevel: 0,
@@ -123,6 +126,15 @@ function setBotIndicator(active) {
   els.botIndicator.classList.toggle("is-active", active);
 }
 
+function setAssistantState(value) {
+  const text = typeof value === "string" ? value.trim() : "";
+  const label = text.length > 32 ? `${text.slice(0, 31)}…` : text;
+  state.assistantState = text;
+  els.stateIndicator.classList.toggle("is-active", Boolean(text));
+  els.stateLabel.textContent = label ? `State ${label}` : "State -";
+  els.stateIndicator.title = label ? `Assistant state: ${text}` : "Assistant state";
+}
+
 function addBubble(role, text) {
   if (els.chatLog.querySelector(".chat__empty")) {
     els.chatLog.innerHTML = "";
@@ -157,6 +169,7 @@ function scrollChatToBottom() {
 function clearChat() {
   els.chatLog.innerHTML = "";
   state.currentAssistantBubble = null;
+  setAssistantState("");
   const empty = document.createElement("div");
   empty.className = "chat__empty";
   empty.innerHTML = "<p>Chat cleared.</p>";
@@ -769,6 +782,9 @@ function handleEvent(event) {
     case "response.text.final":
       handleAssistantFinal(event.text, event.interrupted);
       break;
+    case "response.state":
+      setAssistantState(event.state);
+      break;
     case "input.transcript.final":
       handleUserTranscript(event.text);
       break;
@@ -885,6 +901,7 @@ async function connect() {
     state.ws = null;
     state.connected = false;
     state.connecting = false;
+    setAssistantState("");
     if (state.micEnabled) stopMic();
     stopPlaybackQueue();
     setConnectButton();

examples/webpage/index.html

@@ -118,6 +118,10 @@
                   <span class="indicator__dot indicator__dot--bot"></span>
                   <span class="indicator__label">Bot</span>
                 </span>
+                <span id="state-indicator" class="indicator indicator--state">
+                  <span class="indicator__dot indicator__dot--state"></span>
+                  <span id="state-label" class="indicator__label">State -</span>
+                </span>
               </div>
 
               <button id="clear-btn" class="btn btn--ghost" type="button">

examples/webpage/styles.css

@@ -671,10 +671,26 @@ body {
   animation: pulse 1s ease-in-out infinite;
 }
 
+.indicator.is-active .indicator__dot--state {
+  background: var(--warning);
+  border-color: var(--warning);
+  box-shadow: 0 0 0 4px rgba(255, 184, 77, 0.18);
+}
+
 .indicator.is-active .indicator__label {
   color: var(--text);
 }
 
+.indicator--state {
+  max-width: 180px;
+}
+
+.indicator--state .indicator__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .btn {
   appearance: none;
   border: 1px solid var(--border);