Streaming responses use incremental rendering in the UI

LLM responses arrive token-by-token, and markdown syntax gets sliced mid-tag during delivery — an unclosed code fence, a half-written bold marker, a partial list item. A naive renderer flashes raw **text** and broken layouts between tokens, then suddenly snaps to formatted output when the stream completes. That flicker reads as broken software to end users and destroys the perceived quality of an otherwise functional AI feature, hitting both the user-experience and performance taxons this pattern covers.

Wrap the streaming message body in react-markdown with remark-gfm, then memoize the component with React's memo so incoming tokens do not re-render sibling messages. The markdown parser handles incomplete syntax gracefully, and memoization prevents the entire conversation list from recomputing on every token. Implement in src/components/message-content.tsx.

import { memo } from "react";
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";

export const MessageContent = memo(function MessageContent({ content }: { content: string }) {
  return <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>;
});