Repository navigation
Migrate the simple-chatbot React client from voice-ui-kit to Pipecat UI - #256
Merged
Merged
Conversation
Register the @pipecat shadcn registry and copy in the components the client needs: connect-button, user-audio-control, conversation, text-input, device-select, audio-visualizer-bar, plus the usePipecatApp and usePipecatEventStream hooks and the base-nova ui primitives they compose. Un-ignore src/lib, which the repo-root Python rule for lib/ would otherwise hide. Claude-Session: https://claude.ai/code/session_01XyWgTC5nJ21if2nyEcfyv6
Replace @pipecat-ai/voice-ui-kit with the Pipecat UI shadcn registry. PipecatAppBase becomes usePipecatApp with a lazy transport factory and an app-owned PipecatClientProvider; the kit's loader, error card, bot video, conversation and events panels become small local components on top of the registry pieces. The stylesheet is a Tailwind v4 base-nova theme carrying the kit's dark palette, Geist Mono labels and the registry tokens, so the app keeps its original look. READMEs cover the registry setup and update flow. Claude-Session: https://claude.ai/code/session_01XyWgTC5nJ21if2nyEcfyv6
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Register the Daily and SmallWebRTC loaders with registerTransport instead of a local factory switch, so transportOptions are honoured and only the selected package is loaded. Initialize devices from an effect inside the provider tree rather than with initDevicesOnMount, which ran before the provider's state listener was attached and left the connect button enabled during the mic prompt. Style the disconnect states through the inactive tokens instead of a variant override, fix the transport picker height so the header controls align, and declare color-scheme so native form chrome follows the forced dark theme. Claude-Session: https://claude.ai/code/session_01XyWgTC5nJ21if2nyEcfyv6
The shared event store trims to its cap before per-subscriber filters run, so Daily's audio-level and per-word text events evicted the rows worth reading within a minute; raise the cap and collapse botOutput progress re-emits into one row per segment and spoken status. Match the filter against the rendered description as well as the type, clear the log when the transport is switched, label SmallWebRTC's participant-less remote tracks as the bot's, read the current will_be_spoken and spoken_status fields, show the error message from error envelopes, and derive each row once instead of on every store flush. Claude-Session: https://claude.ai/code/session_01XyWgTC5nJ21if2nyEcfyv6
The media track hook keeps the previous session's ended track across a disconnect, so a reconnect painted a black box before the new track started. Require a live track as well as a connected transport. Claude-Session: https://claude.ai/code/session_01XyWgTC5nJ21if2nyEcfyv6
Inline the one-off mono-upper utility into PanelTitle, drop the unused data-slot attributes, and stop repeating font-sans on the html element since the stylesheet already applies it. Claude-Session: https://claude.ai/code/session_01XyWgTC5nJ21if2nyEcfyv6
The class-based fill override fought the registry's token tint through the class merger and lost, so drop it and keep the documented default. Claude-Session: https://claude.ai/code/session_01XyWgTC5nJ21if2nyEcfyv6
This branch was successfully deployed
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
1 participant
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.
Summary
Replaces
@pipecat-ai/voice-ui-kitinsimple-chatbot/client/reactwith components from the Pipecat UI shadcn registry, keeping the original look of the app.npx shadcn@latest registry add @pipecatandshadcn add: connect-button, user-audio-control, conversation, text-input, device-select, audio-visualizer-bar, theusePipecatApp/usePipecatEventStreamhooks, and the base-nova ui primitives they compose.PipecatAppBase→usePipecatAppwith a lazy transport factory (Daily / SmallWebRTC), an app-ownedPipecatClientProvider+PipecatClientAudio, shadcn spinner and alert for loading and error states.lib/rule was hidingsrc/lib/; the client's.gitignorenow un-ignores it.Not carried over: the conversation panel's Metrics tab (the registry metrics block pulls in recharts).
Upstream issues found while reviewing (not patched locally)
The vendored registry files are kept byte-identical to upstream so
shadcn addcan re-sync them. Two issues belong in the registry and are worked around from app code here:use-pipecat-appon Daily: a failedstartBotafter a previous session callsclient.disconnect(), Daily moves todisconnectingand awaitsdaily.leave(), but daily-js resolves without emittingleft-meetingwhen already left, so the transport stays stuck and the connect button remains disabled until reload.use-pipecat-event-streamcapture list: onlylocalAudioLevelis excluded from capture, soremoteAudioLevel, per-wordbotTtsText/botLlmText, andbotOutputprogress re-emits fill the shared 500-event cap within a minute. The events panel here raisesmaxEventsand groupsbotOutputby segment and status instead.Test plan
npm run lint,tsc --noEmit,next builduv run bot-openai.pyon Daily and SmallWebRTC: connect, bot video, transcript, text input, events, disconnect, transport switchingmain🤖 Generated with Claude Code
https://claude.ai/code/session_01XyWgTC5nJ21if2nyEcfyv6