Skip to content

feat: migrate legacy chat UI into console React app#283

Draft
maxnoller wants to merge 2 commits intomainfrom
feat/migrate-chat-to-console-ui
Draft

feat: migrate legacy chat UI into console React app#283
maxnoller wants to merge 2 commits intomainfrom
feat/migrate-chat-to-console-ui

Conversation

@maxnoller
Copy link
Copy Markdown
Member

Summary

  • Ports the legacy docs/chat.html (4,066-line vanilla JS/CSS/HTML) into the console React app as a first-class /chat route
  • Full feature parity: streaming responses (NDJSON + RAF scheduling), markdown rendering, message editing/branching, file uploads, slash commands, approval workflows, artifacts, responsive sidebar
  • Shares the console's theme (dark mode included), auth, and component infrastructure — zero new dependencies, zero backend changes

Architecture

console/src/
├── api/chat-types.ts          # TypeScript interfaces for all chat API shapes
├── api/chat.ts                # API client (reuses requestJson from client.ts)
├── lib/chat-helpers.ts        # Pure utilities: session IDs, clipboard, approval commands
├── lib/chat-stream.ts         # NDJSON streaming fetch with 401 handling
├── lib/markdown.ts            # Lightweight markdown-to-HTML (ported from legacy)
└── routes/chat/
    ├── index.ts               # Barrel re-export
    ├── chat-page.tsx           # Page orchestrator (~380 lines)
    ├── use-chat-stream.ts     # Streaming hook: RAF render loop, AbortController
    ├── message-block.tsx      # MessageBlock (memo'd), ArtifactCard, EditInline
    ├── composer.tsx            # Composer + SlashSuggestions
    ├── chat-sidebar.tsx       # Session list sidebar
    └── chat-page.module.css   # All styles using console CSS custom properties

No single file exceeds 400 lines. Pure utilities separated from React for testability.

Test plan

  • Navigate to /admin/chat — verify the chat UI renders with sidebar and empty state
  • Send a message — verify streaming response renders incrementally with markdown
  • Test markdown: headings, code blocks, lists, tables, bold/italic, links, blockquotes
  • Attach file via button and paste — verify pending chips and send
  • Edit a user message — verify branch creation and re-send
  • Test approval workflow buttons (Allow once/always/session/agent/all, Deny)
  • Type / — verify slash suggestions with keyboard nav
  • Copy and regenerate message action buttons
  • Resize below 900px — verify mobile sidebar overlay
  • Toggle dark mode — verify all elements use theme variables
  • Switch between sessions in sidebar
  • Verify 401 errors redirect to login
  • npx tsc --noEmit passes
  • npm test passes (all 79 existing tests, zero regressions)

🤖 Generated with Claude Code

Max Noller and others added 2 commits April 12, 2026 04:36
Port the legacy docs/chat.html (4,066-line vanilla JS/CSS/HTML) into
the console React app as a first-class /chat route sharing the
console's theme, auth, layout, and component infrastructure.

Architecture:
- routes/chat/ directory with ChatPage, MessageBlock, Composer,
  ChatSidebar, and useChatStream hook
- lib/chat-helpers.ts for pure utilities (session IDs, clipboard,
  approval commands)
- lib/chat-stream.ts for NDJSON streaming fetch with RAF scheduling
- lib/markdown.ts ported from legacy inline renderer
- api/chat.ts and api/chat-types.ts for typed API client layer
- All API functions reuse requestJson from client.ts (no duplication)
- CSS Module using console theme custom properties (dark mode included)

No new dependencies. No backend changes. All existing tests pass.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
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.

2 participants