[Workshop] Wire visitor input bar to Timmy AI (free chat reply) #44

New Issue

replit · 2026-03-21T00:39:52Z

replit commented

2026-03-21 00:39:52 +00:00

What & Why

The Workshop input bar says "Say something to Timmy…" but Timmy never responds. Typing sends a visitor_message over WebSocket which only broadcasts the text to other visitors — no AI is involved and no speech bubble appears. This is the most visible demo gap: the first thing anyone tries is talking to Timmy, and nothing happens.

Fix: route visitor_message through the AI on the server side, then send the result back as a type: "chat", agentId: "timmy" message. On the frontend, timmy chat events trigger setSpeechBubble() so Timmy visibly responds.

Done looks like

User types in the input bar and presses Enter / taps the send button
Timmy's speech bubble appears above his head with an AI-generated reply (≤ 2–3 sentences)
The crystal ball pulses while Timmy is thinking
A per-visitor rate limit (3 per minute) prevents abuse; a polite "I need a moment…" message appears if exceeded
Visitor messages and Timmy replies appear in the chat feed for all watchers
Existing testkit (all tests) continues to pass

Out of scope

Session/payment integration (visitor bar stays free, like the demo endpoint)
Persistent conversation memory across page reloads (covered by session tasks)
Voice/TTS

Tasks

Server: handle visitor_message with AI — In events.ts, when visitor_message arrives, call agentService.chatReply() in a fire-and-forget background task. Broadcast the visitor's message immediately, then broadcast the AI reply as { type: "chat", agentId: "timmy", text }. Apply per-visitor in-memory rate limit (3 req/min).
Server: crystal-ball "thinking" event — Before the AI call, broadcast { type: "agent_state", agentId: "gamma", state: "working" } to make the crystal ball pulse; reset to idle after reply.
Frontend: speech bubble on timmy chat — In websocket.js, when a chat event arrives with agentId === "timmy", call setSpeechBubble(text) from agents.js.
Frontend: Enter key on input bar — In ui.js, add keydown listener on #visitor-input to submit on Enter (it currently only has the send button).

Relevant files

artifacts/api-server/src/routes/events.ts
artifacts/api-server/src/lib/agent.ts
the-matrix/js/websocket.js
the-matrix/js/agents.js
the-matrix/js/ui.js

## What & Why The Workshop input bar says "Say something to Timmy…" but Timmy never responds. Typing sends a `visitor_message` over WebSocket which only broadcasts the text to other visitors — no AI is involved and no speech bubble appears. This is the most visible demo gap: the first thing anyone tries is talking to Timmy, and nothing happens. Fix: route `visitor_message` through the AI on the server side, then send the result back as a `type: "chat", agentId: "timmy"` message. On the frontend, timmy chat events trigger `setSpeechBubble()` so Timmy visibly responds. ## Done looks like - User types in the input bar and presses Enter / taps the send button - Timmy's speech bubble appears above his head with an AI-generated reply (≤ 2–3 sentences) - The crystal ball pulses while Timmy is thinking - A per-visitor rate limit (3 per minute) prevents abuse; a polite "I need a moment…" message appears if exceeded - Visitor messages and Timmy replies appear in the chat feed for all watchers - Existing testkit (all tests) continues to pass ## Out of scope - Session/payment integration (visitor bar stays free, like the demo endpoint) - Persistent conversation memory across page reloads (covered by session tasks) - Voice/TTS ## Tasks 1. **Server: handle visitor_message with AI** — In `events.ts`, when `visitor_message` arrives, call `agentService.chatReply()` in a fire-and-forget background task. Broadcast the visitor's message immediately, then broadcast the AI reply as `{ type: "chat", agentId: "timmy", text }`. Apply per-visitor in-memory rate limit (3 req/min). 2. **Server: crystal-ball "thinking" event** — Before the AI call, broadcast `{ type: "agent_state", agentId: "gamma", state: "working" }` to make the crystal ball pulse; reset to `idle` after reply. 3. **Frontend: speech bubble on timmy chat** — In `websocket.js`, when a `chat` event arrives with `agentId === "timmy"`, call `setSpeechBubble(text)` from `agents.js`. 4. **Frontend: Enter key on input bar** — In `ui.js`, add `keydown` listener on `#visitor-input` to submit on Enter (it currently only has the send button). ## Relevant files - `artifacts/api-server/src/routes/events.ts` - `artifacts/api-server/src/lib/agent.ts` - `the-matrix/js/websocket.js` - `the-matrix/js/agents.js` - `the-matrix/js/ui.js`

replit added the frontend ai backend labels 2026-03-21 00:39:52 +00:00

gemini was assigned by Rockachopa

2026-03-22 23:37:28 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: replit/timmy-tower#44