Merge pull request #174 from krankos/main

improvement: use Streamdown for markdown rendering

Author: jeseed

docs/components/markdown-renderer.mdx

@@ -1,130 +1,23 @@
 # MarkdownRenderer Component
 
-The `MarkdownRenderer` component provides consistent markdown rendering across Cedar OS with advanced features like code syntax highlighting, copy functionality, and prefix processing for chat interfaces.
+A markdown renderer powered by [Streamdown](https://github.com/vercel/streamdown) for streaming AI content.
 
-## Features
-
-- **GitHub Flavored Markdown**: Full GFM support including tables, strikethrough, and more
-- **Code Highlighting**: Syntax highlighting with copy-to-clipboard functionality
-- **Prefix Processing**: Special handling for prefixed content (useful in chat)
-- **Cedar OS Integration**: Automatic theming and styling consistency
-- **Inline/Block Modes**: Flexible rendering for different contexts
-- **Interactive Elements**: Copy buttons, hover effects, and edit placeholders
-
-## Import
+## Installation & Basic Usage
 
 ```tsx
 import { MarkdownRenderer } from 'cedar-os-components/chatMessages/MarkdownRenderer';
-```
 
-## Basic Usage
-
-```tsx
-<MarkdownRenderer content='# Hello World\n\nThis is **bold** and *italic* text.' />
+<MarkdownRenderer content='# Hello World\n\nThis is **bold** text.' />;
 ```
 
 ## Props
 
-| Prop            | Type      | Default | Description                                           |
-| --------------- | --------- | ------- | ----------------------------------------------------- |
-| `content`       | `string`  | -       | The markdown content to render (required)             |
-| `processPrefix` | `boolean` | `false` | Whether to process prefix markers for special styling |
-| `className`     | `string`  | `''`    | Additional CSS classes                                |
-| `inline`        | `boolean` | `false` | Whether to render in inline mode                      |
-
-## Supported Markdown Elements
-
-### Headers
-
-```markdown
-# H1 Header
-
-## H2 Header
-
-### H3 Header
-
-#### H4 Header
-
-##### H5 Header
-
-###### H6 Header
-```
-
-### Text Formatting
-
-```markdown
-**Bold text**
-_Italic text_
-~~Strikethrough~~
-`Inline code`
-```
-
-### Links
-
-```markdown
-[Link text](https://example.com)
-```
-
-- Opens in new tab automatically
-- `noopener noreferrer` for security
-
-### Code Blocks
-
-````markdown
-```javascript
-function hello() {
-	console.log('Hello World!');
-}
-```
-````
-
-Features:
-
-- Language detection and display
-- Copy to clipboard button
-- Edit placeholder button
-- Syntax highlighting
-- Horizontal scrolling for long lines
-
-### Lists
-
-```markdown
-- Unordered list item 1
-- Unordered list item 2
-
-1. Ordered list item 1
-2. Ordered list item 2
-```
-
-### Blockquotes
-
-```markdown
-> This is a blockquote
-> It can span multiple lines
-```
-
-### Tables
-
-```markdown
-| Column 1 | Column 2 | Column 3 |
-| -------- | -------- | -------- |
-| Row 1    | Data     | More     |
-| Row 2    | Data     | More     |
-```
-
-## Inline Mode
-
-Perfect for rendering markdown within text flows:
-
-```tsx
-<MarkdownRenderer content='This is **bold** text inline' inline={true} />
-```
-
-In inline mode:
-
-- Paragraphs render as `<span>` instead of `<p>`
-- Maintains text flow
-- Preserves inline formatting
+| Prop            | Type      | Default | Description                                      |
+| --------------- | --------- | ------- | ------------------------------------------------ |
+| `content`       | `string`  | -       | Markdown content to render (required)            |
+| `processPrefix` | `boolean` | `false` | Enable @@PREFIX@@ processing for chat interfaces |
+| `className`     | `string`  | `''`    | CSS class                                        |
+| `inline`        | `boolean` | `false` | Inline rendering mode                            |
 
 ## Prefix Processing
 
@@ -137,92 +30,28 @@ For chat interfaces where you need special styling for prefixes:
 />
 ```
 
-The prefix markers (`@@PREFIX@@` and `@@ENDPREFIX@@`) are automatically:
-
-- Styled with the accent color
-- Processed recursively in nested elements
-- Removed from final output
-
-## Code Block Features
-
-### Copy Functionality
-
-- Hover over code blocks to see copy button
-- Visual feedback when copied
-- Automatic timeout after 2 seconds
+The prefix markers are styled with accent color and removed from final output.
 
-### Language Support
+## Streaming AI Example
 
 ```tsx
-<MarkdownRenderer
-	content={`
-\`\`\`typescript
-interface User {
-  name: string;
-  email: string;
+import { MarkdownRenderer } from 'cedar-os-components/chatMessages/MarkdownRenderer';
+import { useChat } from '@ai-sdk/react';
+
+export default function Chat() {
+	const { messages } = useChat();
+
+	return messages.map((message) => (
+		<MarkdownRenderer
+			key={message.id}
+			content={message.content}
+			processPrefix={true}
+		/>
+	));
 }
-\`\`\`
-`}
-/>
-```
-
-### Inline Code
-
-```tsx
-<MarkdownRenderer content='Use the `useState` hook for state management.' />
 ```
 
-## Styling Integration
-
-The component automatically integrates with Cedar OS theming:
-
-```tsx
-// Uses current styling context
-const { styling } = useStyling();
-
-// Applied to:
-// - Accent colors for borders and highlights
-// - Text colors for consistency
-// - Background colors for code blocks
-// - Table styling and borders
-```
-
-## Advanced Examples
-
-### Chat Message Rendering
-
-````tsx
-<MarkdownRenderer
-	content="@@PREFIX@@System: @@ENDPREFIX@@**Task completed!** Here's your code:\n\n```javascript\nconsole.log('Done!');\n```"
-	processPrefix={true}
-	className='chat-message'
-/>
-````
-
-### Documentation Content
-
-```tsx
-<MarkdownRenderer
-	content={`
-# API Documentation
-
-## Overview
-This API provides **powerful** functionality.
-
-### Example Request
-\`\`\`bash
-curl -X POST https://api.example.com/data
-\`\`\`
-
-| Parameter | Type | Description |
-|-----------|------|-------------|
-| \`name\` | string | User name |
-| \`email\` | string | User email |
-  `}
-/>
-```
-
-### Inline Rich Text
+## Inline Mode
 
 ```tsx
 <p>
@@ -234,32 +63,3 @@ curl -X POST https://api.example.com/data
 	to get started.
 </p>
 ```
-
-## Accessibility
-
-- Proper semantic HTML structure
-- Keyboard navigation support
-- Screen reader friendly
-- High contrast code blocks
-- Focus indicators on interactive elements
-
-## Performance
-
-- Efficient re-rendering with React.memo patterns
-- Lazy loading for complex content
-- Optimized regex processing
-- Minimal DOM updates
-
-## Browser Support
-
-- Modern browsers with ES6+ support
-- Clipboard API for copy functionality
-- CSS Grid/Flexbox for layout
-- Graceful degradation for older browsers
-
-## Integration Notes
-
-- Works seamlessly with TypewriterText component
-- Consistent with other Cedar OS components
-- Supports dark/light theme switching
-- Responsive design for all screen sizes