Build AI Chat Components in React with Multiple LLM Models

// hooks/useChat.ts — Custom React hook for streaming LLMWise chat
import { useState, useCallback, useRef } from "react";

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

interface UseChatOptions {
  model?: string;
  apiUrl?: string;
}

export function useChat({ model = "auto", apiUrl = "/api/chat" }: UseChatOptions = {}) {
  const [messages, setMessages] = useState<Message[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const abortRef = useRef<AbortController | null>(null);

  const sendMessage = useCallback(async (content: string) => {
    const userMsg: Message = { id: crypto.randomUUID(), role: "user", content };
    const assistantMsg: Message = { id: crypto.randomUUID(), role: "assistant", content: "" };

    setMessages((prev) => [...prev, userMsg, assistantMsg]);
    setIsLoading(true);
    abortRef.current = new AbortController();

    try {
      const res = await fetch(apiUrl, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          model,
          messages: [...messages, userMsg].map(({ role, content }) => ({ role, content })),
          stream: true,
        }),
        signal: abortRef.current.signal,
      });

      const reader = res.body!.getReader();
      const decoder = new TextDecoder();
      let buffer = "";

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

        buffer += decoder.decode(value, { stream: true });

        let idx = 0;
        while ((idx = buffer.indexOf("\n\n")) !== -1) {
          const raw = buffer.slice(0, idx);
          buffer = buffer.slice(idx + 2);

          for (const line of raw.split("\n")) {
            if (!line.startsWith("data: ")) continue;
            const data = line.slice(6);
            if (data === "[DONE]") return;

            const parsed = JSON.parse(data);
            if (parsed.error) throw new Error(parsed.error);

            const delta = parsed.delta ?? "";
            if (delta) {
              setMessages((prev) =>
                prev.map((m) =>
                  m.id === assistantMsg.id ? { ...m, content: m.content + delta } : m
                )
              );
            }

            if (parsed.event === "done") return;
          }
        }
      }
    } catch (err) {
      if ((err as Error).name !== "AbortError") console.error(err);
    } finally {
      setIsLoading(false);
    }
  }, [messages, model, apiUrl]);

  const stop = useCallback(() => abortRef.current?.abort(), []);

  return { messages, sendMessage, isLoading, stop };
}

// ChatApp.tsx — Example component using the hook
import { useState } from "react";
import { useChat } from "./hooks/useChat";

const MODELS = ["auto", "gpt-5.2", "claude-sonnet-4.5", "gemini-3-flash", "deepseek-v3"];

export function ChatApp() {
  const [model, setModel] = useState("auto");
  const [input, setInput] = useState("");
  const { messages, sendMessage, isLoading, stop } = useChat({ model });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!input.trim()) return;
    sendMessage(input);
    setInput("");
  };

  return (
    <div style={{ maxWidth: 640, margin: "0 auto", padding: 16 }}>
      <select value={model} onChange={(e) => setModel(e.target.value)}>
        {MODELS.map((m) => <option key={m} value={m}>{m}</option>)}
      </select>
      <div style={{ minHeight: 400, overflowY: "auto" }}>
        {messages.map((m) => (
          <div key={m.id} style={{ marginBottom: 12 }}>
            <strong>{m.role === "user" ? "You" : model}:</strong>
            <p>{m.content}</p>
          </div>
        ))}
      </div>
      <form onSubmit={handleSubmit} style={{ display: "flex", gap: 8 }}>
        <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="Type a message..."
          style={{ flex: 1, padding: 8 }}
        />
        {isLoading ? (
          <button type="button" onClick={stop}>Stop</button>
        ) : (
          <button type="submit">Send</button>
        )}
      </form>
    </div>
  );
}