Best Practices Advanced

const { messages, error, reload } = useChat({
  api: '/api/chat',
  onError: (err) => {
    if (err.message.includes('429')) {
      showToast('Rate limited. Please wait a moment.');
    } else {
      showToast('Something went wrong. Try again.');
    }
  },
});

// Show error state with retry option
{error && (
  <div className="error-banner">
    <p>Failed to get a response.</p>
    <button onClick={() => reload()}>Try Again</button>
  </div>
)}

import { render, screen, fireEvent } from '@testing-library/react';
import { Chat } from '../components/Chat';

// Mock the useChat hook
jest.mock('@ai-sdk/react', () => ({
  useChat: () => ({
    messages: [
      { id: '1', role: 'user', content: 'Hello' },
      { id: '2', role: 'assistant', content: 'Hi there!' },
    ],
    input: '',
    handleInputChange: jest.fn(),
    handleSubmit: jest.fn(),
    isLoading: false,
  }),
}));

test('renders messages', () => {
  render(<Chat />);
  expect(screen.getByText('Hello')).toBeInTheDocument();
  expect(screen.getByText('Hi there!')).toBeInTheDocument();
});