feat(components): chat shell primitives#9
Open
kakarot-dev wants to merge 2 commits into
Open
Conversation
… sidebar)
First slice of the chat-first studio UX (tokito's `Slice 1`). Adds the
primitives the consumer needs to compose a chat surface — bubbles, composer,
AI helper rail, conversation sidebar, top-tab bar, app header, floating help
button. Pure presentation; no networking, no LLM hooks.
- `Tokens`: 4 new chat fields (`chat_bubble_bg`, `chat_bubble_bg_user`,
`chat_avatar_bg`, `chat_avatar_bg_user`) on both dark and light presets.
- `app_header(brand_glyph, brand_label, &mut name, &mut is_editing)` — back
chevron · brand disc + wordmark · `|` · inline-editable project name ·
settings gear. Emits `AppHeaderActions { back, settings, renamed }`.
- `tab_bar(items: &[TabItem], selected) -> Option<usize>` — pill-style
selected, `TabItem::Tab { icon, label }` or `TabItem::Divider` for the
vertical group separator.
- `BubbleKind` + `chat_avatar(kind, initials)` — sparkle disc for the
assistant, initials disc for the user.
- `chat_bubble(kind, initials, body)` — alignment + colours by kind; body is
a closure so later slices fill markdown / cards / diffs.
- `ChatComposerState` + `ComposerAction` + `chat_composer(state, hint)` —
multi-line, Enter sends / Shift+Enter newlines, send glyph swaps to Stop
while `state.streaming`.
- `floating_help_button` — the bottom-right `?` pill.
- `AiHelperRailState::{Hidden, CollapsedGlyph, Expanded}` +
`AiHelperRailAction` + `ai_helper_rail(state, suggestions, composer)` —
three render modes, the rail's own quick composer + suggestion chips.
- `thread_row(title, preview, time, selected, workshop)` — two-line row
with relative time on the right and a globe glyph for the Workshop
variant.
- `conversation_sidebar(body_threads, body_workshop)` — chrome only; caller
paints the rows inside the two body closures, with a hairline divider
separating the design-scoped threads from the pinned Workshop slot.
Gallery example extended with a Chat-shell section exercising every new
primitive in every state.
Gates green locally: `cargo fmt --all -- --check`, `cargo clippy --workspace
--all-targets -- -D warnings`, `cargo test --workspace`, `cargo doc
--no-deps`.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
The two-closure shape (`body_threads` + `body_workshop`) was hostile to the borrow checker on the consumer side — both closures want to reach into the same `app.chat` state. Collapse to a single `body` closure and ship a small `sidebar_divider` helper for the design-scoped / Workshop hairline. Gallery updated to the new shape. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Draft
4 tasks
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
First slice of the chat-first studio UX in
tokito. Adds the primitives the consumer needs to compose a chat surface — bubbles, composer, AI helper rail, conversation sidebar, top-tab bar, app header, floating help button. Pure presentation; no networking, no LLM hooks.Tokens— 4 new chat fields (chat_bubble_bg,chat_bubble_bg_user,chat_avatar_bg,chat_avatar_bg_user) on both dark and light presets.app_header(back · brand ·|· inline-editable project name · gear),tab_bar(pill-selected,TabItem::TaborTabItem::Divider).BubbleKind,chat_avatar(sparkle disc or initials),chat_bubble(alignment + colours by kind, body closure for future markdown/cards/diffs).ChatComposerState+ComposerAction+chat_composer(multi-line, Enter sends / Shift+Enter newline, send-glyph swaps to Stop whilestate.streaming).?—floating_help_button.AiHelperRailState::{Hidden, CollapsedGlyph, Expanded}+AiHelperRailAction+ai_helper_rail. Internal quick composer + suggestion chips.thread_row(title + preview + time + workshop globe),conversation_sidebar(chrome only, body closures for design-scoped threads + pinned Workshop slot).Gallery example extended with a Chat-shell section exercising every new primitive in every state.
Test plan
cargo fmt --all -- --checkcargo clippy --workspace --all-targets -- -D warningscargo test --workspacecargo doc --no-depscargo run --example galleryboots, renders all sections, screenshot mode succeeds🤖 Generated with Claude Code