React for AI Engineering: Generative UI, SSE & State Hooks

import { useState, useCallback } from 'react';

export interface Message {
id: string;
role: 'user' | 'assistant';
content: string;
}

export function useAITokenStream(apiEndpoint: string) {
const [messages, setMessages] = useState<Message[]>([]);
const [isGenerating, setIsGenerating] = useState<boolean>(false);

const sendMessage = useCallback(async (userPrompt: string) => {
  const userMessage: Message = { id: Date.now().toString(), role: 'user', content: userPrompt };
  const assistantId = (Date.now() + 1).toString();
  const initialAssistantMessage: Message = { id: assistantId, role: 'assistant', content: '' };

  setMessages((prev) => [...prev, userMessage, initialAssistantMessage]);
  setIsGenerating(true);

  try {
    const response = await fetch(apiEndpoint, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ prompt: userPrompt }),
    });

    if (!response.body) throw new Error('ReadableStream unsupported');
    const reader = response.body.getReader();
    const decoder = new TextDecoder();

    while (true) {
      const { value, done } = await reader.read();
      if (done) break;

      const chunk = decoder.decode(value, { stream: true });
      const lines = chunk.split('
');

      for (const line of lines) {
        if (line.startsWith('data: ')) {
          const dataStr = line.replace('data: ', '').trim();
          if (dataStr === '[DONE]') break;
          try {
            const parsed = JSON.parse(dataStr);
            if (parsed.token) {
              setMessages((prev) =>
                prev.map((msg) =>
                  msg.id === assistantId ? { ...msg, content: msg.content + parsed.token } : msg
                )
              );
            }
          } catch (e) { /* Ignore partial chunk JSON parse errors */ }
        }
      }
    }
  } finally {
    setIsGenerating(false);
  }
}, [apiEndpoint]);

return { messages, isGenerating, sendMessage };
}