feat(shadcn): improve chat transcript UX + live agent session on preview#1394
Open
thomasyuill-livekit wants to merge 7 commits into
Open
feat(shadcn): improve chat transcript UX + live agent session on preview#1394thomasyuill-livekit wants to merge 7 commits into
thomasyuill-livekit wants to merge 7 commits into
Conversation
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
size-limit report 📦
|
thomasyuill-livekit
force-pushed
the
ty/pr-instructions-v1
branch
from
July 22, 2026 19:25
58e807c to
0ef18b8
Compare
thomasyuill-livekit
force-pushed
the
ty/pr-instructions-v1
branch
from
July 22, 2026 19:26
0ef18b8 to
854fec7
Compare
…ranscript Adds autoScroll/scrollAnchor props to AgentChatTranscript for configurable scroll behavior, replaces the AnimatePresence thinking indicator with a Marker component, and fixes the transcript container layout in AgentSessionView_01 so it fills the available area with absolute inset-x-0. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
thomasyuill-livekit
force-pushed
the
ty/pr-instructions-v1
branch
from
July 22, 2026 19:43
854fec7 to
ed439a1
Compare
Adds a story with a button that appends a new message on each click, alternating between agent and user, to make it easy to visually verify scroll-anchor and auto-scroll behavior with a growing transcript. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
1egoman
approved these changes
Jul 22, 2026
…it agent dispatch Replaces the sandbox-token-server-based AgentSessionProvider with a Storybook dev-only Vite middleware (/api/agents-ui/token) that mints tokens from LIVEKIT_URL/LIVEKIT_API_KEY/LIVEKIT_API_SECRET and optionally dispatches a named agent via AGENT_NAME, so stories can run against a real local LiveKit project instead of the shared sandbox. Drops the mocked WithConversation story in favor of exercising the real session. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Splits AgentSessionProvider into two decorators: the default AgentSessionProvider goes back to the shared sandbox token server (dummy session, no local setup required) for every story except AgentSessionView-01, which now uses a new LiveAgentSessionProvider that hits the local /api/agents-ui/token dev route and dispatches AGENT_NAME against a real LiveKit project. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…en route The /api/agents-ui/token route only existed as a Vite dev-server-only middleware, so it 404'd on the deployed Vercel preview (storybook build produces a static site with no Node server). Adds a Vercel serverless function at the same path with its own copy of the token-minting logic, gated on VERCEL_ENV !== 'production' so it works locally and on Preview but refuses to run on a real Production deployment. Also cleans up main.js's response helpers and consolidates AccessToken/RoomAgentDispatch/ RoomConfiguration imports onto livekit-server-sdk to avoid a duplicate @livekit/protocol version in the dependency tree. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
thomasyuill-livekit
changed the title
Contributor
Author
|
@1egoman Re-requesting your review because there's been some iteration on stroybook preview so we can test /story/agents-ui-agentsessionview-01--default with a real agent (I used the homepage demo agent) |
Contributor
Author
There was a problem hiding this comment.
Note this becomes a Vercel Serverless Function
Comment on lines
+28
to
+36
| if (process.env.VERCEL_ENV === 'production') { | ||
| sendResponse( | ||
| res, | ||
| 500, | ||
| 'THIS API ROUTE IS INSECURE. DO NOT USE THIS ROUTE IN PRODUCTION WITHOUT AN AUTHENTICATION LAYER.', | ||
| false, | ||
| ); | ||
| return; | ||
| } |
Contributor
Author
There was a problem hiding this comment.
I don't think this is necessary
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Issue
Related to livekit-examples/agent-starter-react#347 (comment)
Overview
agent-chat-transcriptautoScroll, scroll anchor, and "thinking" UXagent-chat-transcriptstory with injectable messages for testingAgentSessionView-01's story to a LiveKit agent session for testingSummary of changes
Note
The
/api/agents-ui/tokenroute is intentionally insecure (no auth layer) and refuses to run on a real Vercel Production deployment (VERCEL_ENV === 'production'), but is allowed on PreviewAnyone with the preview link can mint a token against the configured LiveKit project. This was a deliberate, discussed tradeoff for this demo. I don't believe this is a concern as it's just our HP demo
Chat transcript component
agent-chat-transcript.tsxautoScroll/scrollAnchorprops (boolean | 'user' | 'agent' | 'any') andscrollEdgeThresholdfor configurable scroll-anchoring; replaces theAnimatePresencethinking indicator with aMarker/MarkerIcon/MarkerContent"Thinking..." row; restyles the scroll-to-bottom buttonmarker.tsx(new)Marker/MarkerIcon/MarkerContentUI primitive, registered inregistry.jsonagent-session-block.tsxabsolute inset-x-0 top-0 bottom-[135px] overflow-hiddenso it fills its space correctly instead of relying on paddingbubble.tsx,message.tsx,message-scroller.tsxStorybook
AgentChatTranscript.stories.tsxInjectMessagesstory — a button that appends a message on each click, alternating agent/user, to visually verify scroll behavior as the transcript growsAgentSessionProvider.tsxAgentSessionView-01LiveAgentSessionProvider.tsx(new)AGENT_NAME— used only byAgentSessionView-01, so that story can be exercised against a real agent.storybook/main.js/api/agents-ui/tokenthat mints tokens forLiveAgentSessionProviderapi/agents-ui/token.ts(new)/api/agents-ui/tokenroute, so it also works on the deployed preview (the Vite middleware only runs understorybook dev, not the staticstorybook buildVercel deploys).env.exampleVITE_PUBLIC_LK_SANDBOX_TOKEN_SERVER_ID(sandbox) alongsideLIVEKIT_URL/LIVEKIT_API_KEY/LIVEKIT_API_SECRET/AGENT_NAME(live)Testing
agents-ui-*stories — confirm they still connect via the shared sandbox, unaffected.🤖 Generated with Claude Code