AI State Management Advanced

import { useChat } from '@ai-sdk/react';

function ChatWindow({ conversationId }: { conversationId: string }) {
  const { messages, input, handleInputChange, handleSubmit } = useChat({
    id: conversationId,                  // Unique ID per conversation
    api: '/api/chat',
    body: { conversationId },            // Send to server for context
    initialMessages: [],                 // Load from storage if needed
  });

  // Each conversationId gets its own message state
  return ( /* ... render chat ... */ );
}

import { useChat } from '@ai-sdk/react';
import { useEffect } from 'react';

export function usePersistedChat(id: string) {
  const stored = localStorage.getItem(`chat-${id}`);
  const initialMessages = stored ? JSON.parse(stored) : [];

  const chat = useChat({
    id,
    api: '/api/chat',
    initialMessages,
    onFinish: () => {
      // Save after each completed response
      localStorage.setItem(`chat-${id}`, JSON.stringify(chat.messages));
    },
  });

  return chat;
}

import { createContext, useContext, useState, ReactNode } from 'react';

interface Conversation { id: string; title: string; }

interface ChatContextType {
  conversations: Conversation[];
  activeId: string | null;
  createConversation: () => void;
  selectConversation: (id: string) => void;
}

const ChatContext = createContext<ChatContextType>(null!);

export function ChatProvider({ children }: { children: ReactNode }) {
  const [conversations, setConversations] = useState<Conversation[]>([]);
  const [activeId, setActiveId] = useState<string | null>(null);

  function createConversation() {
    const id = crypto.randomUUID();
    setConversations(prev => [...prev, { id, title: 'New Chat' }]);
    setActiveId(id);
  }

  return (
    <ChatContext.Provider value={{ conversations, activeId, createConversation, selectConversation: setActiveId }}>
      {children}
    </ChatContext.Provider>
  );
}

export const useChatContext = () => useContext(ChatContext);