Skip to content

feat(jcode-ui): docs demos, UI polish, and shared attachments - #128

Merged
cnjack merged 1 commit into
mainfrom
feat/jcode-ui-docs-quality-and-attachments
Jul 9, 2026
Merged

feat(jcode-ui): docs demos, UI polish, and shared attachments#128
cnjack merged 1 commit into
mainfrom
feat/jcode-ui-docs-quality-and-attachments

Conversation

@cnjack

@cnjack cnjack commented Jul 9, 2026

Copy link
Copy Markdown
Owner

Summary

  • Expand jcode-ui docs with per-component pages, guides, API reference, live demos, and minimal/Zustand examples
  • Improve chat surface quality: code/card contrast, dark-token inheritance (tool subtitles), soft approval/thinking chrome, code wrap without horizontal scroll
  • Align image attachments across library, product, and docs (composer picker, AttachmentList, preview lightbox)

Details

  • Library (jcode-ui / jcode-ui-core): elevated code surfaces, tool header/subtitle fixes, attachment tiles + paperclip flow, mockRuntime sequence keys
  • Site: ComponentDemo shell, highlight.js for demo Code tabs and Chat UI Quick start, docs isolation from host article styles, site Vite port 5199 to avoid desktop 5173 conflict
  • Product (web): reuse AttachmentList for pending images; ChatImage.name optional

Test plan

  • cd site && pnpm dev → open /chat-ui (Quick start highlighting), /chat-ui/docs/components/* demos (Thread, ToolCallCard subtitles, Attachment tiles)
  • cd packages/jcode-ui && pnpm build succeeds
  • Product web / desktop: attach image via paste or picker; thumbnails + remove + preview
  • make desktop-dev loads product UI on 5173 (not marketing site)

Summary by CodeRabbit

  • New Features

    • Added two runnable chat UI examples: a minimal in-memory demo and a Zustand-backed integration example.
    • Introduced image attachment support improvements, including image previews and easier attachment handling.
    • Added a searchable API/docs experience with new demo previews and quick-start samples.
  • Bug Fixes

    • Improved scrolling, rendering, and styling across chat threads, messages, tool calls, and composer controls.
    • Made runtime behavior more reliable for queued messages, approvals, and user prompts.
  • Documentation

    • Expanded the chat UI docs with installation, API, component, guide, and example pages.

Raise code/card contrast, fix dark-token inheritance for tool subtitles,
unify image attachments across library/product/docs, and expand the
jcode-ui docs site with live component demos, API pages, and examples.
@coderabbitai

coderabbitai Bot commented Jul 9, 2026

Copy link
Copy Markdown

Review Change Stack

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: f5af43ad-307f-4eea-80ed-8cc00f24223a

📥 Commits

Reviewing files that changed from the base of the PR and between 8c6a972 and 90bf01c.

⛔ Files ignored due to path filters (1)
  • site/pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (103)
  • examples/README.md
  • examples/jcode-ui-minimal/.gitignore
  • examples/jcode-ui-minimal/.npmrc
  • examples/jcode-ui-minimal/README.md
  • examples/jcode-ui-minimal/index.html
  • examples/jcode-ui-minimal/package.json
  • examples/jcode-ui-minimal/pnpm-workspace.yaml
  • examples/jcode-ui-minimal/src/App.tsx
  • examples/jcode-ui-minimal/src/main.tsx
  • examples/jcode-ui-minimal/src/styles.css
  • examples/jcode-ui-minimal/tsconfig.json
  • examples/jcode-ui-minimal/tsconfig.node.json
  • examples/jcode-ui-minimal/vite.config.ts
  • examples/jcode-ui-zustand/.gitignore
  • examples/jcode-ui-zustand/.npmrc
  • examples/jcode-ui-zustand/README.md
  • examples/jcode-ui-zustand/index.html
  • examples/jcode-ui-zustand/package.json
  • examples/jcode-ui-zustand/pnpm-workspace.yaml
  • examples/jcode-ui-zustand/src/App.tsx
  • examples/jcode-ui-zustand/src/main.tsx
  • examples/jcode-ui-zustand/src/store.ts
  • examples/jcode-ui-zustand/src/styles.css
  • examples/jcode-ui-zustand/tsconfig.json
  • examples/jcode-ui-zustand/vite.config.ts
  • packages/jcode-ui-core/README.md
  • packages/jcode-ui-core/package.json
  • packages/jcode-ui-core/src/primitives/Composer.tsx
  • packages/jcode-ui-core/src/primitives/Thread.tsx
  • packages/jcode-ui-core/src/runtime/mockRuntime.ts
  • packages/jcode-ui-core/src/types/index.ts
  • packages/jcode-ui/README.md
  • packages/jcode-ui/package.json
  • packages/jcode-ui/src/components/ApprovalBanner.tsx
  • packages/jcode-ui/src/components/AskUserCard.tsx
  • packages/jcode-ui/src/components/Attachment.tsx
  • packages/jcode-ui/src/components/ChatInput.tsx
  • packages/jcode-ui/src/components/Message.tsx
  • packages/jcode-ui/src/components/Reasoning.tsx
  • packages/jcode-ui/src/components/Sources.tsx
  • packages/jcode-ui/src/components/Thread.tsx
  • packages/jcode-ui/src/components/ToolCallCard.tsx
  • packages/jcode-ui/src/index.ts
  • packages/jcode-ui/src/styles/animations.css
  • packages/jcode-ui/src/styles/components.css
  • packages/jcode-ui/src/styles/entry.css
  • packages/jcode-ui/src/styles/tokens.css
  • packages/jcode-ui/src/toolRenderers/diff.tsx
  • packages/jcode-ui/src/toolRenderers/fileViewer.tsx
  • packages/jcode-ui/src/toolRenderers/terminal.tsx
  • script/generate_jcode_ui_api_docs.mjs
  • site/docs/chat-ui/api.md
  • site/docs/chat-ui/api/components.md
  • site/docs/chat-ui/api/generated.md
  • site/docs/chat-ui/api/hooks.md
  • site/docs/chat-ui/api/primitives.md
  • site/docs/chat-ui/api/runtime.md
  • site/docs/chat-ui/api/types.md
  • site/docs/chat-ui/components.md
  • site/docs/chat-ui/components/approval-banner.md
  • site/docs/chat-ui/components/ask-user-card.md
  • site/docs/chat-ui/components/attachment.md
  • site/docs/chat-ui/components/chat-input.md
  • site/docs/chat-ui/components/context-bar.md
  • site/docs/chat-ui/components/message.md
  • site/docs/chat-ui/components/reasoning.md
  • site/docs/chat-ui/components/sources.md
  • site/docs/chat-ui/components/thread.md
  • site/docs/chat-ui/components/tool-call-card.md
  • site/docs/chat-ui/examples.md
  • site/docs/chat-ui/guides.md
  • site/docs/chat-ui/guides/approvals.md
  • site/docs/chat-ui/guides/custom-tool-renderer.md
  • site/docs/chat-ui/guides/external-store.md
  • site/docs/chat-ui/guides/slash-commands.md
  • site/docs/chat-ui/guides/virtualization.md
  • site/docs/chat-ui/index.md
  • site/docs/chat-ui/installation.md
  • site/docs/chat-ui/primitives.md
  • site/docs/chat-ui/runtime.md
  • site/docs/chat-ui/theming.md
  • site/docs/chat-ui/tool-renderers.md
  • site/package.json
  • site/public/llms.txt
  • site/src/App.tsx
  • site/src/lib/chatUiDocs.ts
  • site/src/lib/docs.ts
  • site/src/main.tsx
  • site/src/pages/ChatUIPage.tsx
  • site/src/pages/chatui.css
  • site/src/pages/chatui/ChatUiDocPage.tsx
  • site/src/pages/chatui/ChatUiDocsIndex.tsx
  • site/src/pages/chatui/ChatUiDocsLayout.tsx
  • site/src/pages/docs/docs.css
  • site/src/playground/ChatDemo.tsx
  • site/src/playground/ComponentDemo.tsx
  • site/src/playground/component-demo.css
  • site/src/playground/demoSources.ts
  • site/src/playground/highlightDemoCode.ts
  • site/vite.config.ts
  • web/src/components/ChatInput.tsx
  • web/src/lib/types.ts
  • web/src/styles.css

📝 Walkthrough

Walkthrough

This PR adds image attachment support across Composer, ChatInput, Attachment, and Message components; refactors mockRuntime's sequence/state handling; overhauls jcode-ui's CSS tokens and component styling; adds two runnable example apps (minimal, Zustand); introduces an API doc generation script; and expands the documentation site with new guide/API/component pages, search, and live demos.

Changes

jcode-ui-core and jcode-ui: attachments, runtime, and styling

Layer / File(s) Summary
ChatImage type and mockRuntime refactor
packages/jcode-ui-core/src/types/index.ts, packages/jcode-ui-core/src/runtime/mockRuntime.ts, web/src/lib/types.ts
Adds optional name to ChatImage; refactors mock runtime with monotonic seq, replaceState, and concrete approval/ask-user handlers.
Composer image handling
packages/jcode-ui-core/src/primitives/Composer.tsx
Adds acceptImages, file picker, paste handling, readImageFile/addImageFiles, renderAddAttachment slot, and onActivate for submit button.
Attachment/ChatInput/Message wiring
packages/jcode-ui/src/components/Attachment.tsx, ChatInput.tsx, Message.tsx, web/src/components/ChatInput.tsx
Adds lightbox preview to Attachment/AttachmentList, wires acceptImages through ChatInput, delegates image rendering, and updates web ChatInput to use shared attachment list with name payload.
Thread virtualization/layout fixes
packages/jcode-ui-core/src/primitives/Thread.tsx, packages/jcode-ui/src/components/Thread.tsx
Fixes container sizing/containment for virtualized and non-virtualized modes and updates pending/row markup.
Component styling refresh
ApprovalBanner.tsx, AskUserCard.tsx, Message.tsx, Reasoning.tsx, Sources.tsx, ToolCallCard.tsx
Migrates several components to jcode-* class-based styling.
Tokens/CSS overhaul and tool renderers
tokens.css, components.css, animations.css, entry.css, diff.tsx, fileViewer.tsx, terminal.tsx, web/src/styles.css
Introduces new design tokens, class-based tool renderer styling, and Tailwind layer-only imports.
Package metadata/README links
packages/jcode-ui-core/README.md, package.json, packages/jcode-ui/README.md, package.json
Updates homepage/docs URLs and adds generate:api-docs script.

Estimated code review effort: 4 (Complex) | ~60 minutes

Example apps: jcode-ui-minimal and jcode-ui-zustand

Layer / File(s) Summary
Minimal example app
examples/jcode-ui-minimal/*
Adds a standalone example using createMockRuntime, Thread, and ChatInput.
Zustand example app
examples/jcode-ui-zustand/*
Adds a standalone example wiring createExternalStoreRuntime to a Zustand store with seeded demo data.

Estimated code review effort: 2 (Simple) | ~15 minutes

Documentation site: API generator, docs pages, and playground

Layer / File(s) Summary
API doc generator and landing page
script/generate_jcode_ui_api_docs.mjs, site/docs/chat-ui/api.md, api/generated.md
Adds a script that extracts exported TypeScript symbols and regenerates the API markdown.
API reference pages
site/docs/chat-ui/api/*.md
Adds types/runtime/primitives/hooks/components API documentation.
Component documentation
site/docs/chat-ui/components*.md
Adds/updates per-component docs (ApprovalBanner, AskUserCard, Attachment, ChatInput, ContextBar, Message, Reasoning, Sources, Thread, ToolCallCard).
Guides and narrative docs
site/docs/chat-ui/guides/*.md, installation.md, index.md, theming.md, runtime.md, primitives.md, tool-renderers.md, examples.md, llms.txt
Adds/updates guide pages and top-level docs narrative.
Site routing, doc loader, and search
site/src/App.tsx, site/src/lib/chatUiDocs.ts, docs.ts, main.tsx, site/package.json
Adds nested doc loading, flattened nav, search function, and route for legacy docs path.
Doc page UI and search box
ChatUiDocPage.tsx, ChatUiDocsIndex.tsx, ChatUiDocsLayout.tsx, docs.css
Adds demo embeds, copy buttons, search box UI, and layout styling updates.
Live demos and marketing page
ComponentDemo.tsx, demoSources.ts, highlightDemoCode.ts, component-demo.css, ChatUIPage.tsx, ChatDemo.tsx, chatui.css, vite.config.ts
Adds interactive component demo playground with syntax highlighting and updates marketing page/demo styling.

Estimated code review effort: 3 (Moderate) | ~30 minutes

Possibly related PRs

  • cnjack/jcode#47: Adds the original multimodal ChatImage/attachment plumbing that this PR extends with name field and lightbox preview.
  • cnjack/jcode#124: Prior changes to the same jcode-ui-core Composer/Thread/mockRuntime files that this PR further refactors.
  • cnjack/jcode#122: Original React migration establishing the jcode-ui-core/jcode-ui primitives this PR builds upon.
✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/jcode-ui-docs-quality-and-attachments

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@cnjack
cnjack merged commit 09517d3 into main Jul 9, 2026
2 of 3 checks passed
@cnjack
cnjack deleted the feat/jcode-ui-docs-quality-and-attachments branch July 9, 2026 17:25
cnjack added a commit that referenced this pull request Jul 12, 2026
…tachments

feat(jcode-ui): docs demos, UI polish, and shared attachments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant