Chat Experience

The UI in dapp/components/chatBot is purpose-built for the agentic features exposed by the backend. It layers mode selection, context forms, tool chips, and a music player on top of the standard chat transcript—while leaning into Rito’s neon, crypto-rap personality.

Rito’s Signature Flow

• Branding & layout — ChatContainer, ChatHeader, and ChatWithPlayer.module.css give the interface its Blade Runner-inspired gradients, chunky type, and stacked layout that keeps the music bar anchored under the conversation.
• Mode prompts — When a user picks a mode, composeSystemPrompt and composeWelcomeMessage (from dapp/app/lib/llm/modes) inject Blade Runner-grade instructions plus the battle-form background so the very first assistant message sounds like Rito.
• Music cues — The MusicBar powered by MusicPlayer/MusicProvider.tsx lets verses trigger <music> tags, so each rap session can bring in Rito’s catalog without leaving the chat.

Stores & Modals

• Mode selection — useChatModeStore tracks the active mode, whether it was locked by props, and the rap-battle form data. When the app loads, ChatBot opens ModeSelectModal until a mode is chosen.
• Battle form — BattleFormModal.tsx lets users describe themselves and RapBotRito. The inputs are persisted in the store so composeWelcomeMessage can stitch the background section into the initial assistant message.
• General modal state — useModalStore centralizes the mode picker, error modal, confirm-reset dialog, and the battle form. This makes it trivial to gate input: ChatForm simply checks open !== 'none' before allowing submissions.

Streaming UI & Inline Tools

Behind the scenes, useHydrateToolImages.ts streams base64 payloads from generate_image_with_alt into useLocalImageStore, while pinecone_search feeds meme/rhyme datasets so Rito’s toolkit always has fresh crypto references to drop mid-verse.

Music & Atmosphere

The MusicProvider (dapp/components/chatBot/MusicPlayer/MusicProvider.tsx) exposes a Web Audio API controller so rap prompts can trigger <music> tags. The provider only unlocks audio after the first user interaction (to satisfy browser policies) and streams metadata to the MusicBar.

Hydrating Images

When a tool emits { kind: 'store-image' } JSON, useHydrateToolImages.ts writes the base64 payload into useLocalImageStore. parseContentWithMedia.ts then converts <img src="store://image/foo.png" /> into an inline <img> tag that reads from the hydrated store rather than fetching from the network.

Reset & State Hygiene

• Conversation reset — The trash button in ChatForm clears useChat messages, wipes the tool activity store, resets the music player, and, if the mode is not locked, brings the user back to the mode picker.
• Goodbye handling — When the transcript includes <goodbye />, the UI stores a session flag (ritoGoodbyeHardReloadAt) so a hard refresh is triggered even if the user navigates away and returns later. This honors the rap battle rule that the page must refresh after the post-battle goodbye.