Fix collapsed bubbles, replace fake adapter previews, add tiered scoring#9
Merged
Conversation
Adding .gitkeep for PR creation (default mode). This file will be removed when the task is complete. Issue: #8
Resolves issue #8. Outgoing chat bubbles no longer collapse on send because the adapter row now uses flexbox `row-reverse` instead of `direction: rtl`; hosted SDK profiles (Stream, Sendbird, CometChat, TalkJS, LiveChat) render through a new `HostedSourcePreview` that pairs the published import source with an offline transcript instead of the generic adapter. Profile scoring gains a renderer-derived live tier (A real local / B offline echo / C hosted source preview / D missing) that is surfaced in the comparison page along with emoji ✅/⚠️ /❌ feature badges. The workspace is no longer boxed at 1480 px, and a `?debug=1` flag turns on verbose console output for the demo gallery and standalone profile pages. Adds the `REQUIREMENTS.md` traceability matrix and the `docs/case-studies/issue-8/` case study with before/after screenshots captured via Playwright. Bumps version to 0.12.0 and registers a changeset.
konard
changed the title
The release-automation workflow blocks manual edits to package.json version. The changeset under .changeset/issue-8-real-demos.md already declares the minor bump, so the version field stays on 0.11.1 until the release workflow processes it on merge.
Contributor
Author
Working session summaryPR #9 is ready for review with all CI checks passing on commit
PR: #9 This summary was automatically extracted from the AI working session output. |
Contributor
Author
🤖 Solution Draft LogThis log file contains the complete execution trace of the AI solution draft process. 💰 Cost: $17.006637📊 Context and tokens usage:Claude Opus 4.7: (5 sub-sessions)
Total: (12.6K new + 447.9K cache writes + 22.9M cache reads) input tokens, 107.0K output tokens, $17.006637 cost 🤖 Models used:
📎 Log file uploaded as Gist (8777KB)Now working session is ended, feel free to review and add any feedback on the solution draft. |
Contributor
Author
✅ Ready to mergeThis pull request is now ready to be merged:
Monitored by hive-mind with --auto-restart-until-mergeable flag |
This reverts commit 72ba761.
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
Resolves #8 — the previous gallery shipped four real defects that this PR
addresses end-to-end:
direction: rtlover a 2-column grid, which dropped the bubble track to0pxonce the avatar took its 36px column. Replaced with a flexboxrow-reverseso the bubble keepsmax-width: calc(100% - 46px)andrenders correctly for every renderer.
OfflineAdapterPreview.Hosted SDKs (Stream, Sendbird, CometChat, TalkJS, LiveChat) now render
via a new
HostedSourcePreviewthat shows the real published importsource alongside an offline transcript, so the gallery no longer
pretends those SDKs run locally.
liveBonus. Replaced with a tieredgetLiveTier(rendererId)(A=12, B=8, C=4, D=0 pts) that distinguishesreal local React surfaces from offline echo runtimes from hosted source
previews.
scoreProfile()exports the resulting tier andgetComparisonMatrix()ships it to the UI.replaced with emoji
✅/⚠️/❌badges and a new Tier columnwith
🟢 A/🟡 B/🟠 C/🔴 Dchips.Additional UX work:
.workspaceshell so the gallery uses thefull viewport.
?debug=1URL flag that turns on verboseconsole.debuglogging for sends, theme/language switches, and metric updates.
debugchip in the header when the flag is on.Engineering hygiene
REQUIREMENTS.mdconsolidates every requirement from issues Research best React.js chats on the market and make visual demo pages for each of them and docs with screenshots to view all of them #1, Our UI examples look fake, input is not working #3, Fixes and improvements #5, The demos display, comparison are still fake #8 with
delivery status and implementation references.
docs/case-studies/issue-8/covers timeline, root-cause analysis, and design decisions.
0.12.0with a registered changeset.Before / After
Test plan
npm test— 50/50 unit tests passnpm run test:e2e— 11/11 e2e tests passnpm run check— lint, prettier, jscpd cleannpm run demo:build— bundles successfullyprofile, standalone profile route, send-message regression)