Most AI chat tutorials stop at a basic <input> box and a unstyled <div> list. When you ship a real AI-Agent Workspace to production, users immediately expect multi-thread conversation history, smart auto-scrolling that doesn't hijack manual reading, syntax-highlighted markdown blocks with one-click copy hooks, and clean attachment trays.
Here is the core frontend architecture pattern to keep a React + TypeScript + Shadcn UI streaming chat interface responsive at 60fps.
1. Non-Intrusive Auto-Scroll During Token Streaming
When an LLM streams tokens rapidly, forcing scrollIntoView() on every chunk locks the user out of scrolling up to read earlier paragraphs. Track whether the user is near the bottom before auto-scrolling:
import { useEffect, useRef, useState } from "react"; export function useSmartChatScroll(dependency: unknown) { const containerRef = useRef<HTMLDivElement>(null); const [shouldAutoScroll, setShouldAutoScroll] = useState(true); const handleScroll = () => { const el = containerRef.current; if (!el) return; const distanceFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight; setShouldAutoScroll(distanceFromBottom < 80); }; useEffect(() => { if (shouldAutoScroll && containerRef.current) { containerRef.current.scrollTop = containerRef.current.scrollHeight; } }, [dependency, shouldAutoScroll]); return { containerRef, handleScroll }; } 2. Memoizing Message Bubbles to Prevent Re-Render Lag
During active streaming, only the last message in the array changes on each token. Wrap completed message components in React.memo so React doesn't re-parse heavy markdown syntax across 50 historical messages every 20 milliseconds.
3. Collapsible Multi-Thread Sidebar & Dark-Mode Tokens
Using Shadcn UI CSS variables (--background, --card, --muted, --border) paired with a collapsible drawer keeps desktop workspaces spacious while adapting cleanly to mobile viewports without layout shift.
⚡ Skip the UI Boilerplate
If you want the complete, plug-and-play Shadcn UI Premium AI-Agent Chat Workspace & Streaming UI Boilerplate (including collapsible thread sidebars, dark mode controller, attachment tray, and markdown code blocks with copy hooks), grab it here:
