Merge pull request #10 from link-assistant/issue-9-47417e527e82

feat: switchable chat UI providers with markdown support

Author: konard

changelog.d/20260108_025456_chat_ui_research.md

@@ -0,0 +1,6 @@
+### Added
+- Case study documentation for chat UI design research (issue #9)
+- Comprehensive comparison of React.js chat UI libraries including assistant-ui, reachat, chatscope, react-chat-elements
+- Research on Telegram-like React.js designs with TelegramUI and telegram-react
+- Markdown support integration guide with react-markdown and syntax highlighting examples
+- Implementation examples and migration guides for recommended libraries

changelog.d/20260108_032500_switchable_chat_providers.md

@@ -0,0 +1,9 @@
+### Added
+- Switchable chat UI providers with dropdown selector in header
+- Support for 4 chat UI libraries: Chatscope, Assistant UI, Reachat, React Chat Elements
+- Markdown rendering support for all providers with syntax highlighting
+- ChatProviderContext for managing provider selection state
+- MarkdownRenderer component using react-markdown with code highlighting
+- Provider abstraction with common ChatMessage interface
+- CSS styling for all chat provider themes (dark mode)
+- Dependencies: react-markdown, remark-gfm, react-syntax-highlighter, @assistant-ui/react, reachat, react-chat-elements

docs/case-studies/issue-9/README.md

@@ -0,0 +1,379 @@
+# Case Study: Chat UI Design Research for Model-in-Browser
+
+## Issue Reference
+- **Issue**: [#9 - Find alternative open-source chat design templates](https://github.com/link-assistant/model-in-browser/issues/9)
+- **Date**: 2026-01-08
+
+## Executive Summary
+
+This case study researches React.js chat UI libraries, Telegram-like designs, and markdown support options for improving the chat interface of the model-in-browser project. The goal is to find modern, minimalistic UI alternatives that can enhance user experience.
+
+## Table of Contents
+
+1. [Current Implementation Analysis](#current-implementation-analysis)
+2. [React Chat UI Libraries Research](#react-chat-ui-libraries-research)
+3. [Telegram-Like Design Options](#telegram-like-design-options)
+4. [Markdown Support Integration](#markdown-support-integration)
+5. [Recommendations](#recommendations)
+
+---
+
+## Current Implementation Analysis
+
+### Technology Stack
+The project currently uses:
+- **@chatscope/chat-ui-kit-react** - Main chat UI component library
+- **React 18** with TypeScript
+- **Vite** as build tool
+- **Custom CSS** with dark theme overrides
+
+### Current UI Features
+- Dark theme with custom CSS overrides for chatscope components
+- Status indicator (loading/ready/error)
+- Progress bar for model download
+- Typing indicator
+- Message input with send button
+- Streaming token display
+
+### Areas for Improvement (as identified in the issue)
+- Need for more modern styling
+- More minimalistic design
+- Better mobile responsiveness
+- Markdown support for formatted messages
+
+---
+
+## React Chat UI Libraries Research
+
+### Comparison Table
+
+| Library | Stars | License | Last Updated | TypeScript | Best For |
+|---------|-------|---------|--------------|------------|----------|
+| **assistant-ui** | 7,933 | MIT | 2026-01-08 | Yes | AI Chat applications |
+| **react-markdown** | 15,354 | MIT | 2026-01-07 | Yes | Markdown rendering |
+| **telegram-react** | 2,527 | GPL-3.0 | 2026-01-07 | Yes | Telegram clone |
+| **@chatscope/chat-ui-kit-react** | 1,709 | MIT | 2026-01-07 | Yes | General chat (current) |
+| **react-chat-elements** | 1,386 | MIT | 2026-01-08 | Yes | Quick chat widgets |
+| **TelegramUI** | 726 | MIT | 2026-01-05 | Yes | Telegram Mini Apps |
+| **reachat** | 202 | MIT | 2026-01-07 | Yes | LLM/AI Chat UIs |
+| **MinChat react-chat-ui** | 99 | MIT | 2026-01-05 | Yes | Simple chat |
+
+### Detailed Analysis
+
+#### 1. assistant-ui (Recommended for AI Chat)
+- **GitHub**: https://github.com/assistant-ui/assistant-ui
+- **Stars**: 7,933 | **Forks**: 851
+- **Description**: TypeScript/React Library for AI Chat
+
+**Key Features**:
+- Built specifically for AI chat applications
+- Streaming support out of the box
+- Markdown and code highlighting included
+- Auto-scroll and keyboard shortcuts
+- Radix-style composable primitives
+- Integrates with AI SDK, LangGraph, Mastra
+
+**Pros**:
+- Purpose-built for LLM/AI interfaces
+- Production-ready UX patterns
+- Active development and large community
+- Built-in accessibility
+
+**Cons**:
+- More complex setup than simple libraries
+- May be overkill for basic chat needs
+
+#### 2. reachat (Modern LLM UI Blocks)
+- **GitHub**: https://github.com/reaviz/reachat
+- **Stars**: 202 | **Forks**: 22
+- **Description**: UI Building Blocks for LLM/Chat UIs
+
+**Key Features**:
+- Tailwind CSS theming
+- Markdown rendering with code highlighting
+- Multiple layouts (console/companion)
+- File handling and previews
+- Light and dark themes
+- YouTube embeds, tables, links
+
+**Pros**:
+- Purpose-built for LLM interfaces
+- Modern minimalist design
+- Easy Tailwind customization
+- Built-in markdown support
+
+**Cons**:
+- Smaller community
+- Fewer third-party resources
+
+#### 3. @chatscope/chat-ui-kit-react (Current)
+- **GitHub**: https://github.com/chatscope/chat-ui-kit-react
+- **Stars**: 1,709 | **Forks**: 148
+- **Description**: Open source UI toolkit for web chat applications
+
+**Key Features**:
+- Comprehensive component library
+- CSS framework independent
+- Typing indicators, message groups
+- Conversation lists, sidebars
+
+**Pros**:
+- Already integrated in project
+- Well-documented
+- Large component library
+- Mature and stable
+
+**Cons**:
+- Generic chat design (not AI-specific)
+- Requires significant CSS overrides for modern look
+- No built-in markdown support
+
+#### 4. react-chat-elements
+- **GitHub**: https://github.com/Detaysoft/react-chat-elements
+- **Stars**: 1,386 | **Forks**: 228
+- **Description**: React chat elements and UI components
+
+**Key Features**:
+- Multiple message types (text, photo, video, audio, file)
+- Reply bar, system messages
+- Avatar support
+- Meeting links
+
+**Pros**:
+- Simple to use
+- Multiple message formats
+- Lightweight
+
+**Cons**:
+- Less active maintenance
+- Basic styling options
+
+---
+
+## Telegram-Like Design Options
+
+### Top Telegram-Style Libraries
+
+#### 1. TelegramUI (Official-Style Components)
+- **GitHub**: https://github.com/telegram-mini-apps-dev/TelegramUI
+- **Stars**: 726 | **License**: MIT
+- **Description**: React components library for Telegram Mini Apps
+
+**Best For**: Projects wanting authentic Telegram aesthetics
+
+**Features**:
+- Pre-designed UI components inspired by Telegram interface
+- Built for Telegram Mini Apps ecosystem
+- Modern and clean design
+
+#### 2. evgeny-nadymov/telegram-react
+- **GitHub**: https://github.com/evgeny-nadymov/telegram-react
+- **Stars**: 2,527 | **License**: GPL-3.0
+- **Description**: Experimental Telegram web client
+
+**Best For**: Reference implementation, studying Telegram UX patterns
+
+**Note**: GPL-3.0 license may not be compatible with all projects
+
+#### 3. zeeshan-akhter/telegram-ui-clone
+- **GitHub**: https://github.com/zeeshan-akhter/telegram-ui-clone
+- **Description**: Telegram replica with desktop and mobile views using ReactJS and MUI
+
+**Best For**: Learning Telegram design patterns with MUI components
+
+**Features**:
+- Responsive design (desktop + mobile)
+- Chat list with pagination
+- Message display for selected chats
+- Functional chat input UI
+
+### Design Principles from Telegram
+
+1. **Minimalism**: Clean interfaces with ample white space
+2. **Speed**: Instant message delivery feel
+3. **Bubbles**: Rounded message containers with tail indicators
+4. **Colors**: Blue for outgoing, white/gray for incoming
+5. **Typography**: Clear, readable fonts
+6. **Animations**: Subtle, fast transitions
+7. **Dark Mode**: Native dark theme support
+
+---
+
+## Markdown Support Integration
+
+### Primary Solution: react-markdown
+- **GitHub**: https://github.com/remarkjs/react-markdown
+- **Stars**: 15,354 | **License**: MIT
+- **Description**: Markdown component for React
+
+**Key Advantages**:
+- No `dangerouslySetInnerHTML` - secure by design
+- CommonMark compliant
+- Plugin ecosystem (remark/rehype)
+- GitHub Flavored Markdown support via remark-gfm
+
+### Code Syntax Highlighting Options
+
+#### Option A: react-syntax-highlighter
+```jsx
+import ReactMarkdown from 'react-markdown';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
+
+<ReactMarkdown
+  components={{
+    code({ node, inline, className, children, ...props }) {
+      const match = /language-(\w+)/.exec(className || '');
+      return !inline && match ? (
+        <SyntaxHighlighter style={vscDarkPlus} language={match[1]}>
+          {String(children).replace(/\n$/, '')}
+        </SyntaxHighlighter>
+      ) : (
+        <code className={className} {...props}>{children}</code>
+      );
+    },
+  }}
+>
+  {markdown}
+</ReactMarkdown>
+```
+
+#### Option B: Shiki (via Streamdown)
+- Better performance for streaming content
+- More accurate syntax highlighting
+- Used by VS Code
+
+### Streaming Markdown Considerations
+
+For AI chat with streaming responses, consider:
+
+1. **Streamdown** - Specifically designed for streaming markdown
+   - Handles incomplete blocks gracefully
+   - Memoized rendering for performance
+   - Shiki-based syntax highlighting
+
+2. **Memoization Pattern** (from AI SDK cookbook)
+   - Cache parsed markdown blocks
+   - Prevent re-parsing on each token
+   - Essential for long conversations
+
+### Recommended Implementation
+
+```jsx
+// Install dependencies
+// npm install react-markdown remark-gfm react-syntax-highlighter
+
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+
+const MarkdownMessage = ({ content }) => (
+  <ReactMarkdown
+    remarkPlugins={[remarkGfm]}
+    components={{
+      code({ node, inline, className, children, ...props }) {
+        const match = /language-(\w+)/.exec(className || '');
+        return !inline && match ? (
+          <SyntaxHighlighter
+            style={oneDark}
+            language={match[1]}
+            PreTag="div"
+            {...props}
+          >
+            {String(children).replace(/\n$/, '')}
+          </SyntaxHighlighter>
+        ) : (
+          <code className={className} {...props}>
+            {children}
+          </code>
+        );
+      },
+    }}
+  >
+    {content}
+  </ReactMarkdown>
+);
+```
+
+---
+
+## Recommendations
+
+### Recommended Approach: Phased Migration
+
+#### Phase 1: Add Markdown Support (Low Risk)
+1. Install `react-markdown` and `remark-gfm`
+2. Create a `MarkdownMessage` component
+3. Integrate with existing chatscope `Message` component
+4. Add syntax highlighting for code blocks
+
+**Effort**: Low | **Impact**: High
+
+#### Phase 2: UI Modernization (Medium Risk)
+Two options:
+
+**Option A: Migrate to assistant-ui** (Recommended for AI-focused apps)
+- Best-in-class AI chat experience
+- Built-in streaming, markdown, code highlighting
+- Requires more significant refactoring
+
+**Option B: Migrate to reachat**
+- Modern, minimalistic design
+- Tailwind-based theming
+- Good LLM support, smaller community
+
+**Option C: Keep chatscope with custom styling**
+- Update CSS for more modern look
+- Add Telegram-inspired styling
+- Lowest migration effort
+
+#### Phase 3: Design Polish
+- Implement Telegram-style message bubbles
+- Add subtle animations
+- Optimize for mobile
+
+### Quick Wins
+
+1. **Immediate**: Add markdown support with react-markdown
+2. **Short-term**: Modernize CSS with Tailwind or custom styles
+3. **Medium-term**: Evaluate migration to assistant-ui or reachat
+
+### Final Recommendation
+
+For the **model-in-browser** project, which is an AI chat application:
+
+**Primary Recommendation**: Consider migrating to **assistant-ui**
+- It's purpose-built for AI chat applications
+- Has the largest community among AI-specific chat libraries
+- Includes streaming, markdown, and code highlighting out of the box
+- MIT licensed and actively maintained
+
+**Alternative**: If migration is too disruptive, add **react-markdown** to the current chatscope implementation for immediate markdown support, then gradually adopt Telegram-inspired styling.
+
+---
+
+## References
+
+### React Chat Libraries
+- [assistant-ui](https://github.com/assistant-ui/assistant-ui) - Typescript/React Library for AI Chat
+- [@chatscope/chat-ui-kit-react](https://github.com/chatscope/chat-ui-kit-react) - Chat UI Kit
+- [reachat](https://github.com/reaviz/reachat) - UI Building Blocks for LLM/Chat UIs
+- [react-chat-elements](https://github.com/Detaysoft/react-chat-elements) - React chat components
+- [MinChat react-chat-ui](https://github.com/MinChatHQ/react-chat-ui) - React Chat UI Kit
+
+### Telegram-Style
+- [TelegramUI](https://github.com/telegram-mini-apps-dev/TelegramUI) - Telegram Mini Apps components
+- [telegram-react](https://github.com/evgeny-nadymov/telegram-react) - Telegram web client
+- [telegram-ui-clone](https://github.com/zeeshan-akhter/telegram-ui-clone) - Telegram replica with MUI
+
+### Markdown Support
+- [react-markdown](https://github.com/remarkjs/react-markdown) - Markdown component for React
+- [Streamdown](https://www.kdjingpai.com/en/streamdown/) - Streaming markdown renderer
+- [AI SDK Markdown Cookbook](https://ai-sdk.dev/cookbook/next/markdown-chatbot-with-memoization) - Memoization patterns
+- [React Markdown Complete Guide](https://strapi.io/blog/react-markdown-complete-guide-security-styling) - Security and styling
+
+### Articles
+- [LogRocket: Safely render Markdown](https://blog.logrocket.com/how-to-safely-render-markdown-using-react-markdown/)
+- [Good Code: Reachat Announcement](https://www.goodcode.us/blog/reachat-open-source-ui-building-blocks-for-llm-chat-uis)
+- [Athrael: Markdown in Streaming Chat](https://athrael.net/blog/building-an-ai-chat-assistant/add-markdown-to-streaming-chat)