@tigmart/ai-react 0.0.1

package/dist/index.d.mts

@@ -0,0 +1,65 @@
+import { Message } from '@topsoft/ai-types';
+
+interface UseChatOptions {
+    providerId: string;
+    modelId: string;
+    apiUrl?: string;
+}
+interface UseChatReturn {
+    messages: Message[];
+    sendMessage: (text: string) => Promise<void>;
+    cancel: () => void;
+    isLoading: boolean;
+    error: string | null;
+}
+declare function useChat({ providerId, modelId, apiUrl, }: UseChatOptions): UseChatReturn;
+
+type ProviderId = 'openai' | 'claude' | 'gemini';
+declare const AVAILABLE_PROVIDERS: {
+    id: ProviderId;
+    label: string;
+}[];
+interface Project {
+    id: string;
+    name: string;
+    createdAt: number;
+    updatedAt: number;
+}
+interface ChatThread {
+    id: string;
+    title: string;
+    messages: Message[];
+    projectId?: string | null;
+    createdAt: number;
+    updatedAt: number;
+}
+interface UseMultiChatOptions {
+    apiUrl?: string;
+}
+interface UseMultiChatReturn {
+    threads: ChatThread[];
+    currentThreadId: string;
+    messages: Message[];
+    sendMessage: (text: string) => Promise<void>;
+    cancel: () => void;
+    isLoading: boolean;
+    error: string | null;
+    provider: ProviderId;
+    setProvider: (provider: ProviderId) => void;
+    comparisonMode: boolean;
+    setComparisonMode: (enabled: boolean) => void;
+    selectedProviders: ProviderId[];
+    setSelectedProviders: (providers: ProviderId[]) => void;
+    createNewChat: () => void;
+    selectChat: (id: string) => void;
+    renameChat: (threadId: string, newTitle: string) => void;
+    deleteChat: (threadId: string) => void;
+    markAsBest: (messageId: string) => void;
+    projects: Project[];
+    createProject: (name: string) => void;
+    assignThreadToProject: (threadId: string, projectId: string | null) => void;
+}
+
+declare function useMultiChat({ apiUrl, }?: UseMultiChatOptions): UseMultiChatReturn;
+
+export { AVAILABLE_PROVIDERS, type ChatThread, type Project, type ProviderId, type UseChatOptions, type UseChatReturn, type UseMultiChatOptions, type UseMultiChatReturn, useChat, useMultiChat };

package/dist/index.d.ts

@@ -0,0 +1,65 @@
+import { Message } from '@topsoft/ai-types';
+
+interface UseChatOptions {
+    providerId: string;
+    modelId: string;
+    apiUrl?: string;
+}
+interface UseChatReturn {
+    messages: Message[];
+    sendMessage: (text: string) => Promise<void>;
+    cancel: () => void;
+    isLoading: boolean;
+    error: string | null;
+}
+declare function useChat({ providerId, modelId, apiUrl, }: UseChatOptions): UseChatReturn;
+
+type ProviderId = 'openai' | 'claude' | 'gemini';
+declare const AVAILABLE_PROVIDERS: {
+    id: ProviderId;
+    label: string;
+}[];
+interface Project {
+    id: string;
+    name: string;
+    createdAt: number;
+    updatedAt: number;
+}
+interface ChatThread {
+    id: string;
+    title: string;
+    messages: Message[];
+    projectId?: string | null;
+    createdAt: number;
+    updatedAt: number;
+}
+interface UseMultiChatOptions {
+    apiUrl?: string;
+}
+interface UseMultiChatReturn {
+    threads: ChatThread[];
+    currentThreadId: string;
+    messages: Message[];
+    sendMessage: (text: string) => Promise<void>;
+    cancel: () => void;
+    isLoading: boolean;
+    error: string | null;
+    provider: ProviderId;
+    setProvider: (provider: ProviderId) => void;
+    comparisonMode: boolean;
+    setComparisonMode: (enabled: boolean) => void;
+    selectedProviders: ProviderId[];
+    setSelectedProviders: (providers: ProviderId[]) => void;
+    createNewChat: () => void;
+    selectChat: (id: string) => void;
+    renameChat: (threadId: string, newTitle: string) => void;
+    deleteChat: (threadId: string) => void;
+    markAsBest: (messageId: string) => void;
+    projects: Project[];
+    createProject: (name: string) => void;
+    assignThreadToProject: (threadId: string, projectId: string | null) => void;
+}
+
+declare function useMultiChat({ apiUrl, }?: UseMultiChatOptions): UseMultiChatReturn;
+
+export { AVAILABLE_PROVIDERS, type ChatThread, type Project, type ProviderId, type UseChatOptions, type UseChatReturn, type UseMultiChatOptions, type UseMultiChatReturn, useChat, useMultiChat };

package/dist/index.js

@@ -0,0 +1,564 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AVAILABLE_PROVIDERS: () => AVAILABLE_PROVIDERS,
+  useChat: () => useChat,
+  useMultiChat: () => useMultiChat
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/hooks/useChat.ts
+var import_react = require("react");
+function makeMessage(conversationId, role, text, status) {
+  return {
+    id: crypto.randomUUID(),
+    conversationId,
+    role,
+    parts: [{ type: "text", text }],
+    status,
+    createdAt: Date.now(),
+    updatedAt: Date.now(),
+    metadata: {}
+  };
+}
+function useChat({
+  providerId,
+  modelId,
+  apiUrl = "/api/chat"
+}) {
+  const [messages, setMessages] = (0, import_react.useState)([]);
+  const [isLoading, setIsLoading] = (0, import_react.useState)(false);
+  const [error, setError] = (0, import_react.useState)(null);
+  const [conversationId] = (0, import_react.useState)(() => crypto.randomUUID());
+  const abortRef = (0, import_react.useRef)(null);
+  const isMountedRef = (0, import_react.useRef)(true);
+  const messagesRef = (0, import_react.useRef)(messages);
+  (0, import_react.useEffect)(() => {
+    messagesRef.current = messages;
+  }, [messages]);
+  (0, import_react.useEffect)(() => {
+    return () => {
+      isMountedRef.current = false;
+      abortRef.current?.abort();
+    };
+  }, []);
+  const cancel = (0, import_react.useCallback)(() => {
+    abortRef.current?.abort();
+  }, []);
+  const sendMessage = (0, import_react.useCallback)(
+    async (text) => {
+      const trimmed = text.trim();
+      if (!trimmed || isLoading) return;
+      abortRef.current?.abort();
+      const abort = new AbortController();
+      abortRef.current = abort;
+      setError(null);
+      setIsLoading(true);
+      const userMessage = makeMessage(conversationId, "user", trimmed, "done");
+      const assistantMessage = makeMessage(conversationId, "assistant", "", "streaming");
+      const messagesForApi = [...messagesRef.current, userMessage];
+      setMessages((prev) => [...prev, userMessage, assistantMessage]);
+      try {
+        const response = await fetch(apiUrl, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ messages: messagesForApi, modelId, providerId }),
+          signal: abort.signal
+        });
+        if (!response.ok) {
+          let errorMsg = `HTTP ${response.status}`;
+          try {
+            const json = await response.json();
+            if (typeof json.error === "string") errorMsg = json.error;
+          } catch {
+          }
+          throw new Error(errorMsg);
+        }
+        if (!response.body) {
+          throw new Error("Response body is empty");
+        }
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder();
+        let lineBuffer = "";
+        let finalStatus = "done";
+        let streamError;
+        const processLine = (raw) => {
+          const trimmedLine = raw.trim();
+          if (!trimmedLine) return false;
+          let chunk;
+          try {
+            chunk = JSON.parse(trimmedLine);
+          } catch {
+            return false;
+          }
+          if (chunk.type === "delta" && typeof chunk.content === "string") {
+            const delta = chunk.content;
+            setMessages((prev) => {
+              const next = [...prev];
+              const last = next[next.length - 1];
+              if (!last || last.role !== "assistant") return next;
+              const existing = last.parts[0]?.type === "text" ? last.parts[0].text : "";
+              next[next.length - 1] = {
+                ...last,
+                parts: [{ type: "text", text: existing + delta }],
+                updatedAt: Date.now()
+              };
+              return next;
+            });
+            return false;
+          } else if (chunk.type === "error") {
+            finalStatus = "error";
+            streamError = chunk.error ?? "Streaming error";
+            return true;
+          } else if (chunk.type === "done") {
+            return true;
+          }
+          return false;
+        };
+        outer: while (true) {
+          const { done, value } = await reader.read();
+          if (done) {
+            lineBuffer += decoder.decode();
+            if (lineBuffer.trim()) processLine(lineBuffer);
+            break;
+          }
+          lineBuffer += decoder.decode(value, { stream: true });
+          const lines = lineBuffer.split("\n");
+          lineBuffer = lines.pop() ?? "";
+          for (const line of lines) {
+            if (processLine(line)) break outer;
+          }
+        }
+        if (!isMountedRef.current) return;
+        if (streamError) setError(streamError);
+        setMessages((prev) => {
+          const next = [...prev];
+          const last = next[next.length - 1];
+          if (!last || last.role !== "assistant") return next;
+          next[next.length - 1] = {
+            ...last,
+            status: finalStatus,
+            ...streamError !== void 0 ? { error: streamError } : {},
+            updatedAt: Date.now()
+          };
+          return next;
+        });
+      } catch (err) {
+        if (abort.signal.aborted || !isMountedRef.current) return;
+        const message = err instanceof Error ? err.message : "Unknown error";
+        setError(message);
+        setMessages((prev) => {
+          const next = [...prev];
+          const last = next[next.length - 1];
+          if (!last || last.role !== "assistant") return next;
+          next[next.length - 1] = {
+            ...last,
+            status: "error",
+            error: message,
+            updatedAt: Date.now()
+          };
+          return next;
+        });
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [isLoading, conversationId, apiUrl, modelId, providerId]
+  );
+  return { messages, sendMessage, cancel, isLoading, error };
+}
+
+// src/hooks/useMultiChat.ts
+var import_react2 = require("react");
+
+// src/types/index.ts
+var AVAILABLE_PROVIDERS = [
+  { id: "openai", label: "OpenAI" },
+  { id: "gemini", label: "Gemini" },
+  { id: "claude", label: "Claude" }
+];
+
+// src/hooks/useMultiChat.ts
+var MODEL_BY_PROVIDER = {
+  openai: "gpt-4o-mini",
+  claude: "claude-3-5-sonnet-20241022",
+  gemini: "gemini-2.5-flash"
+};
+var STORAGE_KEY = "ai-chat-playground";
+function isValidThread(val) {
+  if (!val || typeof val !== "object") return false;
+  const t = val;
+  return typeof t["id"] === "string" && typeof t["title"] === "string" && Array.isArray(t["messages"]) && typeof t["createdAt"] === "number" && typeof t["updatedAt"] === "number";
+}
+function isValidProject(val) {
+  if (!val || typeof val !== "object") return false;
+  const p = val;
+  return typeof p["id"] === "string" && typeof p["name"] === "string" && typeof p["createdAt"] === "number" && typeof p["updatedAt"] === "number";
+}
+function loadFromStorage() {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    if (!parsed || typeof parsed !== "object") return null;
+    const data = parsed;
+    if (!Array.isArray(data["threads"])) return null;
+    const threads = data["threads"].filter(isValidThread);
+    if (threads.length === 0) return null;
+    const storedId = typeof data["currentThreadId"] === "string" ? data["currentThreadId"] : "";
+    const currentThreadId = threads.some((t) => t.id === storedId) ? storedId : threads[0]?.id ?? "";
+    const projects = Array.isArray(data["projects"]) ? data["projects"].filter(isValidProject) : [];
+    return { threads, currentThreadId, projects };
+  } catch {
+    return null;
+  }
+}
+function saveToStorage(state) {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
+  } catch {
+  }
+}
+function makeMessage2(conversationId, role, text, status) {
+  return {
+    id: crypto.randomUUID(),
+    conversationId,
+    role,
+    parts: [{ type: "text", text }],
+    status,
+    createdAt: Date.now(),
+    updatedAt: Date.now(),
+    metadata: {}
+  };
+}
+function createThread() {
+  return {
+    id: crypto.randomUUID(),
+    title: "New chat",
+    messages: [],
+    createdAt: Date.now(),
+    updatedAt: Date.now()
+  };
+}
+function useMultiChat({
+  apiUrl = "/api/chat"
+} = {}) {
+  const defaultThread = (0, import_react2.useRef)(createThread());
+  const [{ threads, currentThreadId, projects }, setChatState] = (0, import_react2.useState)(() => ({
+    threads: [defaultThread.current],
+    currentThreadId: defaultThread.current.id,
+    projects: []
+  }));
+  const [isMounted, setIsMounted] = (0, import_react2.useState)(false);
+  const [isLoading, setIsLoading] = (0, import_react2.useState)(false);
+  const [error, setError] = (0, import_react2.useState)(null);
+  const [provider, setProvider] = (0, import_react2.useState)("openai");
+  const [comparisonMode, setComparisonMode] = (0, import_react2.useState)(false);
+  const [selectedProviders, setSelectedProviders] = (0, import_react2.useState)(["openai", "gemini"]);
+  const abortRef = (0, import_react2.useRef)(null);
+  const isMountedRef = (0, import_react2.useRef)(true);
+  const threadsRef = (0, import_react2.useRef)(threads);
+  (0, import_react2.useEffect)(() => {
+    threadsRef.current = threads;
+  }, [threads]);
+  (0, import_react2.useEffect)(() => {
+    return () => {
+      isMountedRef.current = false;
+      abortRef.current?.abort();
+    };
+  }, []);
+  (0, import_react2.useEffect)(() => {
+    setIsMounted(true);
+    const stored = loadFromStorage();
+    if (stored) {
+      setChatState(stored);
+    }
+  }, []);
+  (0, import_react2.useEffect)(() => {
+    if (!isMounted) return;
+    saveToStorage({ threads, currentThreadId, projects });
+  }, [isMounted, threads, currentThreadId, projects]);
+  const currentThread = threads.find((t) => t.id === currentThreadId) ?? threads[0] ?? {
+    id: currentThreadId,
+    title: "New chat",
+    messages: [],
+    createdAt: Date.now(),
+    updatedAt: Date.now()
+  };
+  const messages = currentThread.messages;
+  const createNewChat = (0, import_react2.useCallback)(() => {
+    const thread = createThread();
+    setChatState((prev) => ({
+      ...prev,
+      threads: [...prev.threads, thread],
+      currentThreadId: thread.id
+    }));
+    setError(null);
+  }, []);
+  const selectChat = (0, import_react2.useCallback)((id) => {
+    setChatState((prev) => ({ ...prev, currentThreadId: id }));
+    setError(null);
+  }, []);
+  const renameChat = (0, import_react2.useCallback)((id, newTitle) => {
+    const trimmed = newTitle.trim();
+    if (!trimmed) return;
+    setChatState((prev) => ({
+      ...prev,
+      threads: prev.threads.map(
+        (t) => t.id === id ? { ...t, title: trimmed, updatedAt: Date.now() } : t
+      )
+    }));
+  }, []);
+  const deleteChat = (0, import_react2.useCallback)((id) => {
+    setChatState((prev) => {
+      const remaining = prev.threads.filter((t) => t.id !== id);
+      const next = remaining.length > 0 ? remaining : [createThread()];
+      const currentThreadId2 = prev.currentThreadId === id ? next[0]?.id ?? prev.currentThreadId : prev.currentThreadId;
+      return { ...prev, threads: next, currentThreadId: currentThreadId2 };
+    });
+    setError(null);
+  }, []);
+  const cancel = (0, import_react2.useCallback)(() => {
+    abortRef.current?.abort();
+  }, []);
+  const createProject = (0, import_react2.useCallback)((name) => {
+    const trimmed = name.trim();
+    if (!trimmed) return;
+    const project = {
+      id: crypto.randomUUID(),
+      name: trimmed,
+      createdAt: Date.now(),
+      updatedAt: Date.now()
+    };
+    setChatState((prev) => ({ ...prev, projects: [...prev.projects, project] }));
+  }, []);
+  const assignThreadToProject = (0, import_react2.useCallback)((threadId, projectId) => {
+    setChatState((prev) => ({
+      ...prev,
+      threads: prev.threads.map(
+        (t) => t.id === threadId ? { ...t, projectId, updatedAt: Date.now() } : t
+      )
+    }));
+  }, []);
+  const markAsBest = (0, import_react2.useCallback)(
+    (messageId) => {
+      setChatState((prev) => ({
+        ...prev,
+        threads: prev.threads.map((t) => {
+          if (t.id !== currentThreadId) return t;
+          const target = t.messages.find((m) => m.id === messageId);
+          if (!target) return t;
+          const parentId = target.metadata.parentId;
+          return {
+            ...t,
+            messages: t.messages.map((m) => {
+              if (m.role !== "assistant" || m.metadata.parentId !== parentId) return m;
+              return { ...m, metadata: { ...m.metadata, isBest: m.id === messageId } };
+            })
+          };
+        })
+      }));
+    },
+    [currentThreadId]
+  );
+  const sendMessage = (0, import_react2.useCallback)(
+    async (text) => {
+      const trimmed = text.trim();
+      if (!trimmed || isLoading) return;
+      const threadId = currentThreadId;
+      const capturedProvider = provider;
+      const capturedComparisonMode = comparisonMode;
+      const capturedSelectedProviders = selectedProviders;
+      abortRef.current?.abort();
+      const abort = new AbortController();
+      abortRef.current = abort;
+      setError(null);
+      setIsLoading(true);
+      const thread = threadsRef.current.find((t) => t.id === threadId);
+      const isFirstMessage = !thread?.messages.length;
+      const userMessage = makeMessage2(threadId, "user", trimmed, "done");
+      const history = [...thread?.messages ?? [], userMessage];
+      const effectiveProviders = capturedComparisonMode && capturedSelectedProviders.length > 0 ? capturedSelectedProviders : capturedComparisonMode ? ["openai"] : [capturedProvider];
+      const assistantMessages = effectiveProviders.map((p) => ({
+        ...makeMessage2(threadId, "assistant", "", "streaming"),
+        providerId: p,
+        metadata: { parentId: userMessage.id }
+      }));
+      setChatState((prev) => ({
+        ...prev,
+        threads: prev.threads.map((t) => {
+          if (t.id !== threadId) return t;
+          return {
+            ...t,
+            title: isFirstMessage ? trimmed.slice(0, 40) : t.title,
+            messages: [...t.messages, userMessage, ...assistantMessages],
+            updatedAt: Date.now()
+          };
+        })
+      }));
+      async function streamIntoMessage(p, msgId) {
+        const modelId = MODEL_BY_PROVIDER[p];
+        const startedAt = Date.now();
+        function updateById(updater) {
+          setChatState((prev) => ({
+            ...prev,
+            threads: prev.threads.map((t) => {
+              if (t.id !== threadId) return t;
+              return {
+                ...t,
+                messages: t.messages.map((m) => m.id === msgId ? updater(m) : m),
+                updatedAt: Date.now()
+              };
+            })
+          }));
+        }
+        let finalStatus = "done";
+        let streamError;
+        function processLine(raw) {
+          const line = raw.trim();
+          if (!line) return false;
+          let chunk;
+          try {
+            chunk = JSON.parse(line);
+          } catch {
+            return false;
+          }
+          if (chunk.type === "delta" && typeof chunk.content === "string") {
+            const delta = chunk.content;
+            updateById((msg) => {
+              const existing = msg.parts[0]?.type === "text" ? msg.parts[0].text : "";
+              return {
+                ...msg,
+                parts: [{ type: "text", text: existing + delta }],
+                updatedAt: Date.now()
+              };
+            });
+            return false;
+          } else if (chunk.type === "error") {
+            finalStatus = "error";
+            streamError = chunk.error ?? "Streaming error";
+            return true;
+          } else if (chunk.type === "done") {
+            return true;
+          }
+          return false;
+        }
+        try {
+          const response = await fetch(apiUrl, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ messages: history, modelId, providerId: p }),
+            signal: abort.signal
+          });
+          if (!response.ok) {
+            let errorMsg = `HTTP ${response.status}`;
+            try {
+              const json = await response.json();
+              if (typeof json.error === "string") errorMsg = json.error;
+            } catch {
+            }
+            throw new Error(errorMsg);
+          }
+          if (!response.body) throw new Error("Response body is empty");
+          const reader = response.body.getReader();
+          const decoder = new TextDecoder();
+          let lineBuffer = "";
+          outer: while (true) {
+            const { done, value } = await reader.read();
+            if (done) {
+              lineBuffer += decoder.decode();
+              if (lineBuffer.trim()) processLine(lineBuffer);
+              break;
+            }
+            lineBuffer += decoder.decode(value, { stream: true });
+            const lines = lineBuffer.split("\n");
+            lineBuffer = lines.pop() ?? "";
+            for (const ln of lines) {
+              if (processLine(ln)) break outer;
+            }
+          }
+          if (!isMountedRef.current) return;
+          if (streamError) setError(streamError);
+          const completedAt = Date.now();
+          updateById((msg) => ({
+            ...msg,
+            status: finalStatus,
+            ...streamError !== void 0 ? { error: streamError } : {},
+            updatedAt: completedAt,
+            metadata: { ...msg.metadata, startedAt, completedAt, durationMs: completedAt - startedAt }
+          }));
+        } catch (err) {
+          if (abort.signal.aborted || !isMountedRef.current) return;
+          const message = err instanceof Error ? err.message : "Unknown error";
+          const completedAt = Date.now();
+          setError(message);
+          updateById((msg) => ({
+            ...msg,
+            status: "error",
+            error: message,
+            updatedAt: completedAt,
+            metadata: { ...msg.metadata, startedAt, completedAt, durationMs: completedAt - startedAt }
+          }));
+        }
+      }
+      try {
+        await Promise.allSettled(
+          effectiveProviders.map(
+            (p, i) => streamIntoMessage(p, assistantMessages[i].id)
+          )
+        );
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [isLoading, currentThreadId, apiUrl, provider, comparisonMode, selectedProviders]
+  );
+  return {
+    threads,
+    currentThreadId,
+    messages,
+    sendMessage,
+    cancel,
+    isLoading,
+    error,
+    provider,
+    setProvider,
+    comparisonMode,
+    setComparisonMode,
+    selectedProviders,
+    setSelectedProviders,
+    createNewChat,
+    selectChat,
+    renameChat,
+    deleteChat,
+    markAsBest,
+    projects,
+    createProject,
+    assignThreadToProject
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AVAILABLE_PROVIDERS,
+  useChat,
+  useMultiChat
+});

package/dist/index.mjs

@@ -0,0 +1,535 @@
+// src/hooks/useChat.ts
+import { useState, useCallback, useRef, useEffect } from "react";
+function makeMessage(conversationId, role, text, status) {
+  return {
+    id: crypto.randomUUID(),
+    conversationId,
+    role,
+    parts: [{ type: "text", text }],
+    status,
+    createdAt: Date.now(),
+    updatedAt: Date.now(),
+    metadata: {}
+  };
+}
+function useChat({
+  providerId,
+  modelId,
+  apiUrl = "/api/chat"
+}) {
+  const [messages, setMessages] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [conversationId] = useState(() => crypto.randomUUID());
+  const abortRef = useRef(null);
+  const isMountedRef = useRef(true);
+  const messagesRef = useRef(messages);
+  useEffect(() => {
+    messagesRef.current = messages;
+  }, [messages]);
+  useEffect(() => {
+    return () => {
+      isMountedRef.current = false;
+      abortRef.current?.abort();
+    };
+  }, []);
+  const cancel = useCallback(() => {
+    abortRef.current?.abort();
+  }, []);
+  const sendMessage = useCallback(
+    async (text) => {
+      const trimmed = text.trim();
+      if (!trimmed || isLoading) return;
+      abortRef.current?.abort();
+      const abort = new AbortController();
+      abortRef.current = abort;
+      setError(null);
+      setIsLoading(true);
+      const userMessage = makeMessage(conversationId, "user", trimmed, "done");
+      const assistantMessage = makeMessage(conversationId, "assistant", "", "streaming");
+      const messagesForApi = [...messagesRef.current, userMessage];
+      setMessages((prev) => [...prev, userMessage, assistantMessage]);
+      try {
+        const response = await fetch(apiUrl, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ messages: messagesForApi, modelId, providerId }),
+          signal: abort.signal
+        });
+        if (!response.ok) {
+          let errorMsg = `HTTP ${response.status}`;
+          try {
+            const json = await response.json();
+            if (typeof json.error === "string") errorMsg = json.error;
+          } catch {
+          }
+          throw new Error(errorMsg);
+        }
+        if (!response.body) {
+          throw new Error("Response body is empty");
+        }
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder();
+        let lineBuffer = "";
+        let finalStatus = "done";
+        let streamError;
+        const processLine = (raw) => {
+          const trimmedLine = raw.trim();
+          if (!trimmedLine) return false;
+          let chunk;
+          try {
+            chunk = JSON.parse(trimmedLine);
+          } catch {
+            return false;
+          }
+          if (chunk.type === "delta" && typeof chunk.content === "string") {
+            const delta = chunk.content;
+            setMessages((prev) => {
+              const next = [...prev];
+              const last = next[next.length - 1];
+              if (!last || last.role !== "assistant") return next;
+              const existing = last.parts[0]?.type === "text" ? last.parts[0].text : "";
+              next[next.length - 1] = {
+                ...last,
+                parts: [{ type: "text", text: existing + delta }],
+                updatedAt: Date.now()
+              };
+              return next;
+            });
+            return false;
+          } else if (chunk.type === "error") {
+            finalStatus = "error";
+            streamError = chunk.error ?? "Streaming error";
+            return true;
+          } else if (chunk.type === "done") {
+            return true;
+          }
+          return false;
+        };
+        outer: while (true) {
+          const { done, value } = await reader.read();
+          if (done) {
+            lineBuffer += decoder.decode();
+            if (lineBuffer.trim()) processLine(lineBuffer);
+            break;
+          }
+          lineBuffer += decoder.decode(value, { stream: true });
+          const lines = lineBuffer.split("\n");
+          lineBuffer = lines.pop() ?? "";
+          for (const line of lines) {
+            if (processLine(line)) break outer;
+          }
+        }
+        if (!isMountedRef.current) return;
+        if (streamError) setError(streamError);
+        setMessages((prev) => {
+          const next = [...prev];
+          const last = next[next.length - 1];
+          if (!last || last.role !== "assistant") return next;
+          next[next.length - 1] = {
+            ...last,
+            status: finalStatus,
+            ...streamError !== void 0 ? { error: streamError } : {},
+            updatedAt: Date.now()
+          };
+          return next;
+        });
+      } catch (err) {
+        if (abort.signal.aborted || !isMountedRef.current) return;
+        const message = err instanceof Error ? err.message : "Unknown error";
+        setError(message);
+        setMessages((prev) => {
+          const next = [...prev];
+          const last = next[next.length - 1];
+          if (!last || last.role !== "assistant") return next;
+          next[next.length - 1] = {
+            ...last,
+            status: "error",
+            error: message,
+            updatedAt: Date.now()
+          };
+          return next;
+        });
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [isLoading, conversationId, apiUrl, modelId, providerId]
+  );
+  return { messages, sendMessage, cancel, isLoading, error };
+}
+
+// src/hooks/useMultiChat.ts
+import { useState as useState2, useCallback as useCallback2, useRef as useRef2, useEffect as useEffect2 } from "react";
+
+// src/types/index.ts
+var AVAILABLE_PROVIDERS = [
+  { id: "openai", label: "OpenAI" },
+  { id: "gemini", label: "Gemini" },
+  { id: "claude", label: "Claude" }
+];
+
+// src/hooks/useMultiChat.ts
+var MODEL_BY_PROVIDER = {
+  openai: "gpt-4o-mini",
+  claude: "claude-3-5-sonnet-20241022",
+  gemini: "gemini-2.5-flash"
+};
+var STORAGE_KEY = "ai-chat-playground";
+function isValidThread(val) {
+  if (!val || typeof val !== "object") return false;
+  const t = val;
+  return typeof t["id"] === "string" && typeof t["title"] === "string" && Array.isArray(t["messages"]) && typeof t["createdAt"] === "number" && typeof t["updatedAt"] === "number";
+}
+function isValidProject(val) {
+  if (!val || typeof val !== "object") return false;
+  const p = val;
+  return typeof p["id"] === "string" && typeof p["name"] === "string" && typeof p["createdAt"] === "number" && typeof p["updatedAt"] === "number";
+}
+function loadFromStorage() {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    if (!parsed || typeof parsed !== "object") return null;
+    const data = parsed;
+    if (!Array.isArray(data["threads"])) return null;
+    const threads = data["threads"].filter(isValidThread);
+    if (threads.length === 0) return null;
+    const storedId = typeof data["currentThreadId"] === "string" ? data["currentThreadId"] : "";
+    const currentThreadId = threads.some((t) => t.id === storedId) ? storedId : threads[0]?.id ?? "";
+    const projects = Array.isArray(data["projects"]) ? data["projects"].filter(isValidProject) : [];
+    return { threads, currentThreadId, projects };
+  } catch {
+    return null;
+  }
+}
+function saveToStorage(state) {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
+  } catch {
+  }
+}
+function makeMessage2(conversationId, role, text, status) {
+  return {
+    id: crypto.randomUUID(),
+    conversationId,
+    role,
+    parts: [{ type: "text", text }],
+    status,
+    createdAt: Date.now(),
+    updatedAt: Date.now(),
+    metadata: {}
+  };
+}
+function createThread() {
+  return {
+    id: crypto.randomUUID(),
+    title: "New chat",
+    messages: [],
+    createdAt: Date.now(),
+    updatedAt: Date.now()
+  };
+}
+function useMultiChat({
+  apiUrl = "/api/chat"
+} = {}) {
+  const defaultThread = useRef2(createThread());
+  const [{ threads, currentThreadId, projects }, setChatState] = useState2(() => ({
+    threads: [defaultThread.current],
+    currentThreadId: defaultThread.current.id,
+    projects: []
+  }));
+  const [isMounted, setIsMounted] = useState2(false);
+  const [isLoading, setIsLoading] = useState2(false);
+  const [error, setError] = useState2(null);
+  const [provider, setProvider] = useState2("openai");
+  const [comparisonMode, setComparisonMode] = useState2(false);
+  const [selectedProviders, setSelectedProviders] = useState2(["openai", "gemini"]);
+  const abortRef = useRef2(null);
+  const isMountedRef = useRef2(true);
+  const threadsRef = useRef2(threads);
+  useEffect2(() => {
+    threadsRef.current = threads;
+  }, [threads]);
+  useEffect2(() => {
+    return () => {
+      isMountedRef.current = false;
+      abortRef.current?.abort();
+    };
+  }, []);
+  useEffect2(() => {
+    setIsMounted(true);
+    const stored = loadFromStorage();
+    if (stored) {
+      setChatState(stored);
+    }
+  }, []);
+  useEffect2(() => {
+    if (!isMounted) return;
+    saveToStorage({ threads, currentThreadId, projects });
+  }, [isMounted, threads, currentThreadId, projects]);
+  const currentThread = threads.find((t) => t.id === currentThreadId) ?? threads[0] ?? {
+    id: currentThreadId,
+    title: "New chat",
+    messages: [],
+    createdAt: Date.now(),
+    updatedAt: Date.now()
+  };
+  const messages = currentThread.messages;
+  const createNewChat = useCallback2(() => {
+    const thread = createThread();
+    setChatState((prev) => ({
+      ...prev,
+      threads: [...prev.threads, thread],
+      currentThreadId: thread.id
+    }));
+    setError(null);
+  }, []);
+  const selectChat = useCallback2((id) => {
+    setChatState((prev) => ({ ...prev, currentThreadId: id }));
+    setError(null);
+  }, []);
+  const renameChat = useCallback2((id, newTitle) => {
+    const trimmed = newTitle.trim();
+    if (!trimmed) return;
+    setChatState((prev) => ({
+      ...prev,
+      threads: prev.threads.map(
+        (t) => t.id === id ? { ...t, title: trimmed, updatedAt: Date.now() } : t
+      )
+    }));
+  }, []);
+  const deleteChat = useCallback2((id) => {
+    setChatState((prev) => {
+      const remaining = prev.threads.filter((t) => t.id !== id);
+      const next = remaining.length > 0 ? remaining : [createThread()];
+      const currentThreadId2 = prev.currentThreadId === id ? next[0]?.id ?? prev.currentThreadId : prev.currentThreadId;
+      return { ...prev, threads: next, currentThreadId: currentThreadId2 };
+    });
+    setError(null);
+  }, []);
+  const cancel = useCallback2(() => {
+    abortRef.current?.abort();
+  }, []);
+  const createProject = useCallback2((name) => {
+    const trimmed = name.trim();
+    if (!trimmed) return;
+    const project = {
+      id: crypto.randomUUID(),
+      name: trimmed,
+      createdAt: Date.now(),
+      updatedAt: Date.now()
+    };
+    setChatState((prev) => ({ ...prev, projects: [...prev.projects, project] }));
+  }, []);
+  const assignThreadToProject = useCallback2((threadId, projectId) => {
+    setChatState((prev) => ({
+      ...prev,
+      threads: prev.threads.map(
+        (t) => t.id === threadId ? { ...t, projectId, updatedAt: Date.now() } : t
+      )
+    }));
+  }, []);
+  const markAsBest = useCallback2(
+    (messageId) => {
+      setChatState((prev) => ({
+        ...prev,
+        threads: prev.threads.map((t) => {
+          if (t.id !== currentThreadId) return t;
+          const target = t.messages.find((m) => m.id === messageId);
+          if (!target) return t;
+          const parentId = target.metadata.parentId;
+          return {
+            ...t,
+            messages: t.messages.map((m) => {
+              if (m.role !== "assistant" || m.metadata.parentId !== parentId) return m;
+              return { ...m, metadata: { ...m.metadata, isBest: m.id === messageId } };
+            })
+          };
+        })
+      }));
+    },
+    [currentThreadId]
+  );
+  const sendMessage = useCallback2(
+    async (text) => {
+      const trimmed = text.trim();
+      if (!trimmed || isLoading) return;
+      const threadId = currentThreadId;
+      const capturedProvider = provider;
+      const capturedComparisonMode = comparisonMode;
+      const capturedSelectedProviders = selectedProviders;
+      abortRef.current?.abort();
+      const abort = new AbortController();
+      abortRef.current = abort;
+      setError(null);
+      setIsLoading(true);
+      const thread = threadsRef.current.find((t) => t.id === threadId);
+      const isFirstMessage = !thread?.messages.length;
+      const userMessage = makeMessage2(threadId, "user", trimmed, "done");
+      const history = [...thread?.messages ?? [], userMessage];
+      const effectiveProviders = capturedComparisonMode && capturedSelectedProviders.length > 0 ? capturedSelectedProviders : capturedComparisonMode ? ["openai"] : [capturedProvider];
+      const assistantMessages = effectiveProviders.map((p) => ({
+        ...makeMessage2(threadId, "assistant", "", "streaming"),
+        providerId: p,
+        metadata: { parentId: userMessage.id }
+      }));
+      setChatState((prev) => ({
+        ...prev,
+        threads: prev.threads.map((t) => {
+          if (t.id !== threadId) return t;
+          return {
+            ...t,
+            title: isFirstMessage ? trimmed.slice(0, 40) : t.title,
+            messages: [...t.messages, userMessage, ...assistantMessages],
+            updatedAt: Date.now()
+          };
+        })
+      }));
+      async function streamIntoMessage(p, msgId) {
+        const modelId = MODEL_BY_PROVIDER[p];
+        const startedAt = Date.now();
+        function updateById(updater) {
+          setChatState((prev) => ({
+            ...prev,
+            threads: prev.threads.map((t) => {
+              if (t.id !== threadId) return t;
+              return {
+                ...t,
+                messages: t.messages.map((m) => m.id === msgId ? updater(m) : m),
+                updatedAt: Date.now()
+              };
+            })
+          }));
+        }
+        let finalStatus = "done";
+        let streamError;
+        function processLine(raw) {
+          const line = raw.trim();
+          if (!line) return false;
+          let chunk;
+          try {
+            chunk = JSON.parse(line);
+          } catch {
+            return false;
+          }
+          if (chunk.type === "delta" && typeof chunk.content === "string") {
+            const delta = chunk.content;
+            updateById((msg) => {
+              const existing = msg.parts[0]?.type === "text" ? msg.parts[0].text : "";
+              return {
+                ...msg,
+                parts: [{ type: "text", text: existing + delta }],
+                updatedAt: Date.now()
+              };
+            });
+            return false;
+          } else if (chunk.type === "error") {
+            finalStatus = "error";
+            streamError = chunk.error ?? "Streaming error";
+            return true;
+          } else if (chunk.type === "done") {
+            return true;
+          }
+          return false;
+        }
+        try {
+          const response = await fetch(apiUrl, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ messages: history, modelId, providerId: p }),
+            signal: abort.signal
+          });
+          if (!response.ok) {
+            let errorMsg = `HTTP ${response.status}`;
+            try {
+              const json = await response.json();
+              if (typeof json.error === "string") errorMsg = json.error;
+            } catch {
+            }
+            throw new Error(errorMsg);
+          }
+          if (!response.body) throw new Error("Response body is empty");
+          const reader = response.body.getReader();
+          const decoder = new TextDecoder();
+          let lineBuffer = "";
+          outer: while (true) {
+            const { done, value } = await reader.read();
+            if (done) {
+              lineBuffer += decoder.decode();
+              if (lineBuffer.trim()) processLine(lineBuffer);
+              break;
+            }
+            lineBuffer += decoder.decode(value, { stream: true });
+            const lines = lineBuffer.split("\n");
+            lineBuffer = lines.pop() ?? "";
+            for (const ln of lines) {
+              if (processLine(ln)) break outer;
+            }
+          }
+          if (!isMountedRef.current) return;
+          if (streamError) setError(streamError);
+          const completedAt = Date.now();
+          updateById((msg) => ({
+            ...msg,
+            status: finalStatus,
+            ...streamError !== void 0 ? { error: streamError } : {},
+            updatedAt: completedAt,
+            metadata: { ...msg.metadata, startedAt, completedAt, durationMs: completedAt - startedAt }
+          }));
+        } catch (err) {
+          if (abort.signal.aborted || !isMountedRef.current) return;
+          const message = err instanceof Error ? err.message : "Unknown error";
+          const completedAt = Date.now();
+          setError(message);
+          updateById((msg) => ({
+            ...msg,
+            status: "error",
+            error: message,
+            updatedAt: completedAt,
+            metadata: { ...msg.metadata, startedAt, completedAt, durationMs: completedAt - startedAt }
+          }));
+        }
+      }
+      try {
+        await Promise.allSettled(
+          effectiveProviders.map(
+            (p, i) => streamIntoMessage(p, assistantMessages[i].id)
+          )
+        );
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [isLoading, currentThreadId, apiUrl, provider, comparisonMode, selectedProviders]
+  );
+  return {
+    threads,
+    currentThreadId,
+    messages,
+    sendMessage,
+    cancel,
+    isLoading,
+    error,
+    provider,
+    setProvider,
+    comparisonMode,
+    setComparisonMode,
+    selectedProviders,
+    setSelectedProviders,
+    createNewChat,
+    selectChat,
+    renameChat,
+    deleteChat,
+    markAsBest,
+    projects,
+    createProject,
+    assignThreadToProject
+  };
+}
+export {
+  AVAILABLE_PROVIDERS,
+  useChat,
+  useMultiChat
+};

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@tigmart/ai-react",
+  "version": "0.0.1",
+  "description": "React hooks and state management for the AI chat platform",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": ["dist"],
+  "sideEffects": false,
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@tigmart/ai-types": "workspace:*",
+    "zustand": "^5.0.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "react": "^19.0.0",
+    "tsup": "^8.3.0",
+    "typescript": "^5.7.0"
+  }
+}