{
          setMessage(e.target.value);
          adjustHeight();
        }}
        onKeyDown={(e) => {
          if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            handleSend();
          }
        }}
        placeholder="Type a message..."
        disabled={isSubmitting}
      />
      <button onClick={handleSend} disabled={isSubmitting || !message.trim()}>
        {isSubmitting ? <Spinner /> : <SendIcon />}
      </button>
    </div>
  );
};
```

## Scroll Behavior

**CRITICAL:** Respect user scroll position while auto-scrolling for new messages.

```typescript
function ChatMessages({ messages }: { messages: Message[] }) {
  const messagesEndRef = useRef<HTMLDivElement>(null);
  const scrollContainerRef = useRef<HTMLDivElement>(null);
  const [isUserScrolling, setIsUserScrolling] = useState(false);

const scrollToBottom = () => {
    if (!isUserScrolling) {
      messagesEndRef.current?.scrollIntoView({ 
        behavior: 'smooth',
        block: 'end'
      });
    }
  };

useEffect(() => {
    const container = scrollContainerRef.current;
    if (!container) return;

const handleScroll = () => {
      const { scrollHeight, scrollTop, clientHeight } = container;
      // User is near bottom if within 100px
      const isNearBottom = scrollHeight - scrollTop - clientHeight < 100;
      setIsUserScrolling(!isNearBottom);
    };

container.addEventListener('scroll', handleScroll);
    return () => container.removeEventListener('scroll', handleScroll);
  }, []);

useEffect(() => {
    scrollToBottom();
  }, [messages]);

return (
    <div ref={scrollContainerRef} className="messages-container">
      {messages.map((msg) => (
        <Message key={msg.id} message={msg} />
      ))}
      <div ref={messagesEndRef} />
    </div>
  );
}
```

## Markdown Rendering

**Libraries:**
- `react-markdown` - Parse and render markdown
- `remark-gfm` - GitHub Flavored Markdown support
- `rehype-sanitize` - Sanitize HTML to prevent XSS

```typescript
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import rehypeSanitize from 'rehype-sanitize';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';

## Streaming Messages

For real-time streaming (like ChatGPT):

```typescript
function StreamingMessage({ stream }: { stream: ReadableStream }) {
  const [content, setContent] = useState('');
  const [isComplete, setIsComplete] = useState(false);

useEffect(() => {
    const reader = stream.getReader();
    const decoder = new TextDecoder();

async function read() {
      try {
        while (true) {
          const { done, value } = await reader.read();
          if (done) {
            setIsComplete(true);
            break;
          }
          const text = decoder.decode(value, { stream: true });
          setContent(prev => prev + text);
        }
      } catch (error) {
        console.error('Stream error:', error);
      }
    }

read();
  }, [stream]);

return (
    <div className="streaming-message">
      <MessageContent content={content} />
      {!isComplete && <span className="cursor-blink">▊</span>}
    </div>
  );
}
```

## Best Practices

### Do:
- ✅ Preserve user scroll position (don't force scroll if reading)
- ✅ Show message status (sending, sent, error)
- ✅ Support markdown and code highlighting
- ✅ Use generous spacing (16-24px padding)
- ✅ Limit message width (65-75 characters)
- ✅ Show timestamps subtly
- ✅ Support keyboard shortcuts (Enter to send, Shift+Enter for newline)
- ✅ Sanitize HTML to prevent XSS

### Don't:
- ❌ Force scroll when user is reading older messages
- ❌ Make messages too wide (hard to read)
- ❌ Use heavy borders or shadows
- ❌ Show timestamps prominently (they're noise)
- ❌ Forget error recovery (retry failed messages)
- ❌ Block input during streaming (allow cancellation)
- ❌ Render unsanitized HTML from user input