feat: switchable chat UI providers with markdown support

[konard]

Summary

This PR implements switchable chat UI providers as requested in the PR comments. Users can now switch between different chat UI libraries at runtime via a dropdown selector in the header.

Implemented Features

• 4 Chat UI Providers supported:

  1. Chatscope (existing) - Classic chat UI with extensive components
  2. Assistant UI - Modern AI chat interface with streaming support
  3. Reachat - LLM-focused chat with Tailwind styling
  4. React Chat Elements - Simple and lightweight chat components

• Markdown Support for all providers using react-markdown with:

  • GitHub Flavored Markdown (tables, strikethrough, etc.)
  • Syntax highlighting for code blocks via react-syntax-highlighter
  • Custom styling for dark theme

• Runtime Switching - Select chat provider from dropdown without page reload

Architecture

┌─────────────────────────────────────────────────────────────┐
│                   ChatProviderContext                        │
│  ┌─────────────────────────────────────────────────────────┐│
│  │              ChatProviderSelector (dropdown)             ││
│  └─────────────────────────────────────────────────────────┘│
│  ┌─────────────────────────────────────────────────────────┐│
│  │                   ChatContainer                          ││
│  │    ┌────────────┬────────────┬────────────┬──────────┐  ││
│  │    │ Chatscope  │ AssistantUI│  Reachat   │   RCE    │  ││
│  │    │  Provider  │  Provider  │  Provider  │ Provider │  ││
│  │    └────────────┴────────────┴────────────┴──────────┘  ││
│  └─────────────────────────────────────────────────────────┘│
│  ┌─────────────────────────────────────────────────────────┐│
│  │                  MarkdownRenderer                        ││
│  │             (shared by all providers)                    ││
│  └─────────────────────────────────────────────────────────┘│
└─────────────────────────────────────────────────────────────┘

Files Added/Modified

New Components:

• web/src/components/ChatContainer.tsx - Provider switcher
• web/src/components/ChatProviderSelector.tsx - Dropdown UI
• web/src/components/MarkdownRenderer.tsx - Shared markdown component
• web/src/components/chat-providers/ - Individual provider implementations
• web/src/context/ChatProviderContext.tsx - Provider state management
• web/src/types/chat.ts - Shared type definitions

Modified:

• web/src/App.tsx - Integrated provider system
• web/src/index.css - Added styles for all providers
• web/package.json - Added new dependencies

Dependencies Added

Package	Purpose
react-markdown	Markdown rendering
remark-gfm	GitHub Flavored Markdown
react-syntax-highlighter	Code highlighting
@assistant-ui/react	Assistant UI components
@assistant-ui/react-markdown	Assistant UI markdown
reachat	Reachat components
react-chat-elements	RCE components

Research Documentation

Previous commit added comprehensive research documentation:

• docs/case-studies/issue-9/README.md - Main research document
• docs/case-studies/issue-9/library-comparison.md - Detailed comparison
• docs/case-studies/issue-9/implementation-examples.md - Code examples

Test plan

• Verify dropdown selector shows all 4 providers
• Test Chatscope provider renders messages with markdown
• Test Assistant UI provider renders messages with markdown
• Test Reachat provider renders messages with markdown
• Test React Chat Elements provider renders messages with markdown
• Verify switching between providers preserves messages
• Test code block syntax highlighting works
• Verify dark theme styling for all providers

Screenshots

Screenshots will be available after CI builds and deploys to GitHub Pages.

Fixes #9

🤖 Generated with Claude Code

[konard]

🤖 Solution Draft Log

This log file contains the complete execution trace of the AI solution draft process.

💰 Cost estimation:

• Public pricing estimate: $2.475482 USD
• Calculated by Anthropic: $2.264369 USD
• Difference: $-0.211112 (-8.53%)
  📎 Log file uploaded as GitHub Gist (357KB)
  🔗 View complete solution draft log

---

Now working session is ended, feel free to review and add any feedback on the solution draft.

[konard]

Ok, let's support them all, make it configurable (switchable in the UI by drop down list at any moment). And also support markdown for all of them.

[konard]

🤖 AI Work Session Started

Starting automated work session at 2026-01-08T02:21:46.440Z

The PR has been converted to draft mode while work is in progress.

This comment marks the beginning of an AI work session. Please wait working session to finish, and provide your feedback.

[konard]

🤖 AI Work Session Completed

The implementation of switchable chat UI providers with markdown support is now complete.

Summary of Changes

4 Chat UI Providers Implemented:

1. ✅ Chatscope - Classic chat UI (original, now with markdown)
2. ✅ Assistant UI - Modern AI-focused chat interface
3. ✅ Reachat - LLM chat with Tailwind styling
4. ✅ React Chat Elements - Simple, lightweight chat

Features:

• Runtime switching via dropdown selector in header
• Markdown rendering with GitHub Flavored Markdown support
• Syntax highlighting for code blocks
• Dark theme styling for all providers
• Preserved chat state when switching providers

CI Status

• ✅ CI/CD Pipeline: Passed
• ✅ Build and Deploy: Passed
• ✅ E2E Tests: Passed

Files Changed

• 14 files changed (8 new component files)
• Package dependencies updated
• CSS styles extended for all providers

Testing

The implementation can be tested on the deployed preview once merged to main. Users will be able to select their preferred chat UI from the dropdown in the header.

---

This comment marks the end of the AI work session.

[konard]

🤖 Solution Draft Log

This log file contains the complete execution trace of the AI solution draft process.

💰 Cost estimation:

• Public pricing estimate: $9.753386 USD
• Calculated by Anthropic: $6.990768 USD
• Difference: $-2.762618 (-28.32%)
  📎 Log file uploaded as GitHub Gist (927KB)
  🔗 View complete solution draft log

---

Now working session is ended, feel free to review and add any feedback on the solution draft.