UX Patterns for Fast Shipping

123456789101112
import { useChat } from 'ai/react';
import { useState } from 'react';

export function ChatInterface() {
  const { messages, input, handleInputChange, handleSubmit, isLoading, stop } = useChat({
    api: '/api/chat',
    onError: (error) => {
      console.error('Chat error:', error);
      // Show user-friendly error toast
    },
  });

123456789101112
type OutputType = 'paragraph' | 'list' | 'code' | 'table' | 'mixed';

function predictOutputType(prompt: string): OutputType {
  const lowerPrompt = prompt.toLowerCase();
  if (lowerPrompt.includes('list') || lowerPrompt.includes('bullet')) return 'list';
  if (lowerPrompt.includes('code') || lowerPrompt.includes('function')) return 'code';
  if (lowerPrompt.includes('table') || lowerPrompt.includes('compare')) return 'table';
  if (lowerPrompt.includes('explain') || lowerPrompt.includes('describe')) return 'paragraph';
  return 'mixed';
}

function AISkeleton({ prompt }: { prompt: string }) {

123456789101112
// Server: Stream responses with proper error handling
async function* streamCompletion(prompt: string) {
  const response = await openai.chat.completions.create({
    model: 'gpt-4',
    messages: [{ role: 'user', content: prompt }],
    stream: true,
  });
  
  for await (const chunk of response) {
    const content = chunk.choices[0]?.delta?.content;
    if (content) {
      yield { type: 'token', content };

123456789101112
interface ChatMessageProps {
  role: 'user' | 'assistant';
  content: string;
  isStreaming?: boolean;
  timestamp: Date;
}

export function ChatMessage({ role, content, isStreaming, timestamp }: ChatMessageProps) {
  const messageRef = useRef<HTMLDivElement>(null);
  
  // Announce new content to screen readers in chunks
  useEffect(() => {

123456789101112
interface Message {
  id: string;
  role: 'user' | 'assistant';
  content: string;
  status: 'sending' | 'streaming' | 'complete' | 'error';
}

function AccessibleChat() {
  const [messages, setMessages] = useState<Message[]>([]);
  const [input, setInput] = useState('');
  const [isStreaming, setIsStreaming] = useState(false);
  const messagesEndRef = useRef<HTMLDivElement>(null);

123456789101112
interface ErrorBoundaryState {
  hasError: boolean;
  error: Error | null;
  errorInfo: ErrorInfo | null;
  retryCount: number;
}

class AIErrorBoundary extends Component<PropsWithChildren, ErrorBoundaryState> {
  state: ErrorBoundaryState = {
    hasError: false,
    error: null,
    errorInfo: null,