react-native-ai-hooks 0.3.0 → 0.5.0

package/src/hooks/__tests__/useAIStream.test.ts

@@ -0,0 +1,427 @@
+import React from 'react';
+import { act, create } from 'react-test-renderer';
+import { useAIStream } from '../useAIStream';
+import { fetchWithRetry } from '../../utils/fetchWithRetry';
+
+jest.mock('../../utils/fetchWithRetry', () => ({
+  fetchWithRetry: jest.fn(),
+}));
+
+type HookRenderResult<T> = {
+  result: {
+    readonly current: T;
+  };
+  unmount: () => void;
+};
+
+function renderHook<T>(hook: () => T): HookRenderResult<T> {
+  let hookValue: T | undefined;
+  let renderer: ReturnType<typeof create> | undefined;
+
+  function TestComponent() {
+    hookValue = hook();
+    return null;
+  }
+
+  act(() => {
+    renderer = create(React.createElement(TestComponent));
+  });
+
+  return {
+    result: {
+      get current(): T {
+        if (hookValue === undefined) {
+          throw new Error('Hook value is not available yet');
+        }
+        return hookValue;
+      },
+    },
+    unmount: () => {
+      if (!renderer) {
+        return;
+      }
+      act(() => {
+        renderer.unmount();
+      });
+    },
+  };
+}
+
+function createControlledStreamResponse(): {
+  response: Response;
+  pushLine: (line: string) => Promise<void>;
+  close: () => Promise<void>;
+} {
+  const encoder = new TextEncoder();
+  const pendingReads: Array<(result: ReadableStreamReadResult<Uint8Array>) => void> = [];
+
+  const reader = {
+    read: jest.fn(
+      () =>
+        new Promise<ReadableStreamReadResult<Uint8Array>>(resolve => {
+          pendingReads.push(resolve);
+        }),
+    ),
+  };
+
+  const response = {
+    ok: true,
+    status: 200,
+    body: {
+      getReader: () => reader,
+    },
+    text: async () => '',
+  } as unknown as Response;
+
+  const resolveNextRead = async (result: ReadableStreamReadResult<Uint8Array>) => {
+    const resolver = pendingReads.shift();
+    if (!resolver) {
+      throw new Error('No pending read to resolve');
+    }
+    resolver(result);
+    await Promise.resolve();
+  };
+
+  return {
+    response,
+    pushLine: async (line: string) => {
+      await resolveNextRead({ done: false, value: encoder.encode(line) });
+    },
+    close: async () => {
+      await resolveNextRead({ done: true, value: undefined });
+    },
+  };
+}
+
+describe('useAIStream', () => {
+  const mockedFetchWithRetry = fetchWithRetry as jest.MockedFunction<typeof fetchWithRetry>;
+
+  beforeEach(() => {
+    mockedFetchWithRetry.mockReset();
+  });
+
+  it('streams OpenAI chunks token-by-token into response state', async () => {
+    const stream = createControlledStreamResponse();
+    mockedFetchWithRetry.mockResolvedValueOnce(stream.response);
+
+    const { result, unmount } = renderHook(() =>
+      useAIStream({
+        provider: 'openai',
+        apiKey: 'openai-key',
+        model: 'gpt-4o-mini',
+      }),
+    );
+
+    let streamPromise: Promise<void> | undefined;
+
+    await act(async () => {
+      streamPromise = result.current.streamResponse('Say hello');
+    });
+
+    expect(result.current.isLoading).toBe(true);
+    expect(result.current.response).toBe('');
+
+    await act(async () => {
+      await stream.pushLine('data: {"choices":[{"delta":{"content":"Hel"}}]}\n');
+    });
+    expect(result.current.response).toBe('Hel');
+
+    await act(async () => {
+      await stream.pushLine('data: {"choices":[{"delta":{"content":"lo"}}]}\n');
+    });
+    expect(result.current.response).toBe('Hello');
+
+    await act(async () => {
+      await stream.pushLine('data: [DONE]\n');
+    });
+
+    await act(async () => {
+      await stream.close();
+      await streamPromise;
+    });
+
+    expect(result.current.response).toBe('Hello');
+    expect(result.current.error).toBeNull();
+    expect(result.current.isLoading).toBe(false);
+
+    expect(mockedFetchWithRetry).toHaveBeenCalledTimes(1);
+
+    const [url, requestInit] = mockedFetchWithRetry.mock.calls[0];
+    expect(url).toBe('https://api.openai.com/v1/chat/completions');
+
+    const parsedBody = JSON.parse(String((requestInit as RequestInit).body));
+    expect(parsedBody).toMatchObject({
+      model: 'gpt-4o-mini',
+      stream: true,
+      messages: [{ role: 'user', content: 'Say hello' }],
+    });
+
+    unmount();
+  });
+
+  it('streams Anthropic chunks token-by-token into response state', async () => {
+    const stream = createControlledStreamResponse();
+    mockedFetchWithRetry.mockResolvedValueOnce(stream.response);
+
+    const { result, unmount } = renderHook(() =>
+      useAIStream({
+        provider: 'anthropic',
+        apiKey: 'anthropic-key',
+        model: 'claude-sonnet-4-20250514',
+      }),
+    );
+
+    let streamPromise: Promise<void> | undefined;
+
+    await act(async () => {
+      streamPromise = result.current.streamResponse('Describe this');
+    });
+
+    await act(async () => {
+      await stream.pushLine('data: {"type":"content_block_delta","delta":{"type":"text_delta","text":"Hi"}}\n');
+    });
+    expect(result.current.response).toBe('Hi');
+
+    await act(async () => {
+      await stream.pushLine('data: {"type":"content_block_delta","delta":{"type":"text_delta","text":" there"}}\n');
+    });
+    expect(result.current.response).toBe('Hi there');
+
+    await act(async () => {
+      await stream.close();
+      await streamPromise;
+    });
+
+    const [url, requestInit] = mockedFetchWithRetry.mock.calls[0];
+    expect(url).toBe('https://api.anthropic.com/v1/messages');
+    expect((requestInit as RequestInit).headers).toEqual(
+      expect.objectContaining({
+        'x-api-key': 'anthropic-key',
+        'anthropic-version': '2023-06-01',
+      }),
+    );
+
+    unmount();
+  });
+
+  it('surfaces API error text when the streaming endpoint responds with non-2xx status', async () => {
+    mockedFetchWithRetry.mockResolvedValueOnce({
+      ok: false,
+      status: 500,
+      text: async () => 'Server exploded',
+    } as unknown as Response);
+
+    const { result, unmount } = renderHook(() =>
+      useAIStream({
+        provider: 'openai',
+        apiKey: 'openai-key',
+      }),
+    );
+
+    await act(async () => {
+      await result.current.streamResponse('hello');
+    });
+
+    expect(result.current.error).toBe('Server exploded');
+    expect(result.current.isLoading).toBe(false);
+
+    unmount();
+  });
+
+  it('falls back to status-based API error when error text is empty', async () => {
+    mockedFetchWithRetry.mockResolvedValueOnce({
+      ok: false,
+      status: 429,
+      text: async () => '',
+    } as unknown as Response);
+
+    const { result, unmount } = renderHook(() =>
+      useAIStream({
+        provider: 'openai',
+        apiKey: 'openai-key',
+      }),
+    );
+
+    await act(async () => {
+      await result.current.streamResponse('hello');
+    });
+
+    expect(result.current.error).toBe('API error: 429');
+
+    unmount();
+  });
+
+  it('sets a descriptive error when Response.body is missing', async () => {
+    mockedFetchWithRetry.mockResolvedValueOnce({
+      ok: true,
+      status: 200,
+      body: null,
+      text: async () => '',
+    } as unknown as Response);
+
+    const { result, unmount } = renderHook(() =>
+      useAIStream({
+        provider: 'openai',
+        apiKey: 'openai-key',
+      }),
+    );
+
+    await act(async () => {
+      await result.current.streamResponse('hello');
+    });
+
+    expect(result.current.error).toBe('Streaming not supported in this environment');
+    expect(result.current.isLoading).toBe(false);
+
+    unmount();
+  });
+
+  it('does not set error state for AbortError rejections', async () => {
+    const abortError = Object.assign(new Error('aborted'), { name: 'AbortError' });
+    mockedFetchWithRetry.mockRejectedValueOnce(abortError);
+
+    const { result, unmount } = renderHook(() =>
+      useAIStream({
+        provider: 'openai',
+        apiKey: 'openai-key',
+      }),
+    );
+
+    await act(async () => {
+      await result.current.streamResponse('hello');
+    });
+
+    expect(result.current.error).toBeNull();
+    expect(result.current.isLoading).toBe(false);
+
+    unmount();
+  });
+
+  it('uses fallback message when stream request throws a non-Error value', async () => {
+    mockedFetchWithRetry.mockRejectedValueOnce('network down');
+
+    const { result, unmount } = renderHook(() =>
+      useAIStream({
+        provider: 'openai',
+        apiKey: 'openai-key',
+      }),
+    );
+
+    await act(async () => {
+      await result.current.streamResponse('hello');
+    });
+
+    expect(result.current.error).toBe('Failed to stream response');
+
+    unmount();
+  });
+
+  it('ignores empty and non-data lines while processing stream chunks', async () => {
+    const stream = createControlledStreamResponse();
+    mockedFetchWithRetry.mockResolvedValueOnce(stream.response);
+
+    const { result, unmount } = renderHook(() =>
+      useAIStream({
+        provider: 'openai',
+        apiKey: 'openai-key',
+      }),
+    );
+
+    let streamPromise: Promise<void> | undefined;
+    await act(async () => {
+      streamPromise = result.current.streamResponse('hello');
+    });
+
+    await act(async () => {
+      await stream.pushLine('\n');
+    });
+    await act(async () => {
+      await stream.pushLine('event: ping\n');
+    });
+    await act(async () => {
+      await stream.pushLine('data: {"choices":[{"delta":{"content":"ok"}}]}\n');
+    });
+
+    expect(result.current.response).toBe('ok');
+
+    await act(async () => {
+      await stream.close();
+      await streamPromise;
+    });
+
+    unmount();
+  });
+
+  it('defaults to anthropic provider and default model when omitted', async () => {
+    const stream = createControlledStreamResponse();
+    mockedFetchWithRetry.mockResolvedValueOnce(stream.response);
+
+    const { result, unmount } = renderHook(() =>
+      useAIStream({
+        apiKey: 'anthropic-key',
+      }),
+    );
+
+    let streamPromise: Promise<void> | undefined;
+    await act(async () => {
+      streamPromise = result.current.streamResponse('hello');
+    });
+
+    await act(async () => {
+      await stream.pushLine('data: {"type":"content_block_delta","delta":{"type":"text_delta","text":"default"}}\n');
+      await stream.close();
+      await streamPromise;
+    });
+
+    const [url, requestInit] = mockedFetchWithRetry.mock.calls[0];
+    expect(url).toBe('https://api.anthropic.com/v1/messages');
+
+    const parsedBody = JSON.parse(String((requestInit as RequestInit).body));
+    expect(parsedBody.model).toBe('claude-sonnet-4-20250514');
+    expect(result.current.response).toBe('default');
+
+    unmount();
+  });
+
+  it('clears response and error when clearResponse is called', async () => {
+    const { result, unmount } = renderHook(() =>
+      useAIStream({
+        provider: 'gemini',
+        apiKey: 'gemini-key',
+      }),
+    );
+
+    await act(async () => {
+      await result.current.streamResponse('hello');
+    });
+    expect(result.current.error).toBe('Streaming not supported for provider: gemini');
+
+    act(() => {
+      result.current.clearResponse();
+    });
+
+    expect(result.current.response).toBe('');
+    expect(result.current.error).toBeNull();
+
+    unmount();
+  });
+
+  it('sets an error when streaming is requested for an unsupported provider', async () => {
+    const { result, unmount } = renderHook(() =>
+      useAIStream({
+        provider: 'gemini',
+        apiKey: 'gemini-key',
+      }),
+    );
+
+    await act(async () => {
+      await result.current.streamResponse('Hello');
+    });
+
+    expect(result.current.error).toBe('Streaming not supported for provider: gemini');
+    expect(result.current.isLoading).toBe(false);
+    expect(mockedFetchWithRetry).not.toHaveBeenCalled();
+
+    unmount();
+  });
+});

package/src/hooks/useAIChat.ts

@@ -1,66 +1,126 @@
-import { useState, useCallback } from 'react';
+import { useCallback, useRef, useState, useMemo } from 'react';
+import type { Message, UseAIChatOptions, UseAIChatReturn } from '../types';
+import { createProvider } from '../utils/providerFactory';
 
-interface Message {
-  role: 'user' | 'assistant';
-  content: string;
-}
-
-interface UseAIChatOptions {
-  apiKey: string;
-  provider?: 'claude' | 'openai';
-  model?: string;
-}
-
-interface UseAIChatReturn {
-  messages: Message[];
-  isLoading: boolean;
-  error: string | null;
-  sendMessage: (content: string) => Promise<void>;
-  clearMessages: () => void;
-}
+const DEFAULT_MODEL_MAP = {
+  anthropic: 'claude-sonnet-4-20250514',
+  openai: 'gpt-4',
+  gemini: 'gemini-pro',
+};
 
+/**
+ * Manages conversational chat state and sends prompts to the configured AI provider.
+ *
+ * @param options Hook configuration including provider, API key, model, retry/timeout settings,
+ * and generation options such as system prompt, temperature, and max tokens.
+ * @returns Chat controller with current messages, loading/error state, and actions to send,
+ * abort, or clear chat messages.
+ */
 export function useAIChat(options: UseAIChatOptions): UseAIChatReturn {
   const [messages, setMessages] = useState<Message[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
-  const sendMessage = useCallback(async (content: string) => {
-    setIsLoading(true);
-    setError(null);
+  const abortControllerRef = useRef<AbortController | null>(null);
+  const isMountedRef = useRef(true);
 
-    const userMessage: Message = { role: 'user', content };
-    setMessages(prev => [...prev, userMessage]);
+  // Memoize provider config to prevent unnecessary recreations
+  const providerConfig = useMemo(
+    () => ({
+      provider: (options.provider || 'anthropic') as 'anthropic' | 'openai' | 'gemini',
+      apiKey: options.apiKey,
+      model: options.model || DEFAULT_MODEL_MAP[options.provider || 'anthropic'],
+      baseUrl: options.baseUrl,
+      timeout: options.timeout,
+      maxRetries: options.maxRetries,
+    }),
+    [options],
+  );
 
-    try {
-      const response = await fetch('https://api.anthropic.com/v1/messages', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'x-api-key': options.apiKey,
-          'anthropic-version': '2023-06-01',
-        },
-        body: JSON.stringify({
-          model: options.model || 'claude-sonnet-4-20250514',
-          max_tokens: 1024,
-          messages: [...messages, userMessage],
-        }),
-      });
+  const provider = useMemo(() => createProvider(providerConfig), [providerConfig]);
 
-      const data = await response.json();
-      const assistantMessage: Message = {
-        role: 'assistant',
-        content: data.content[0].text,
-      };
-
-      setMessages(prev => [...prev, assistantMessage]);
-    } catch (err) {
-      setError('Failed to send message');
-    } finally {
+  const abort = useCallback(() => {
+    abortControllerRef.current?.abort();
+    abortControllerRef.current = null;
+    if (isMountedRef.current) {
       setIsLoading(false);
     }
-  }, [messages, options]);
+  }, []);
+
+  const clearMessages = useCallback(() => {
+    setMessages([]);
+    setError(null);
+  }, []);
+
+  const sendMessage = useCallback(
+    async (content: string) => {
+      if (!content.trim()) {
+        setError('Message cannot be empty');
+        return;
+      }
+
+      setError(null);
+      const userMessage: Message = {
+        role: 'user',
+        content: content.trim(),
+        timestamp: Date.now(),
+      };
+
+      setMessages((prev: Message[]) => [...prev, userMessage]);
+      setIsLoading(true);
+
+      try {
+        const aiResponse = await provider.makeRequest({
+          prompt: content,
+          options: {
+            system: options.system,
+            temperature: options.temperature,
+            maxTokens: options.maxTokens,
+          },
+          context: messages.map((msg: Message) => ({
+            role: msg.role,
+            content: msg.content,
+          })),
+        });
+
+        const assistantMessage: Message = {
+          role: 'assistant',
+          content: aiResponse.text,
+          timestamp: Date.now(),
+        };
+
+        if (isMountedRef.current) {
+          setMessages((prev: Message[]) => [...prev, assistantMessage]);
+        }
+      } catch (err) {
+        if (isMountedRef.current) {
+          const message = err instanceof Error ? err.message : 'Failed to send message';
+          setError(message);
+        }
+      } finally {
+        if (isMountedRef.current) {
+          setIsLoading(false);
+        }
+      }
+    },
+    [provider, messages, options],
+  );
 
-  const clearMessages = useCallback(() => setMessages([]), []);
+  // Cleanup on unmount
+  useState(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+      abortControllerRef.current?.abort();
+    };
+  }, []);
 
-  return { messages, isLoading, error, sendMessage, clearMessages };
+  return {
+    messages,
+    isLoading,
+    error,
+    sendMessage,
+    abort,
+    clearMessages,
+  };
 }

package/src/hooks/useAICode.ts

@@ -57,6 +57,14 @@ function getClaudeTextContent(data: unknown): string {
     .trim();
 }
 
+/**
+ * Generates and explains code using an AI model while tracking language and request state.
+ *
+ * @param options Code assistant configuration including API key, model/system prompt,
+ * token/temperature controls, and default programming language.
+ * @returns Code assistant state with selected language, generated code, explanation text,
+ * loading/error indicators, and actions to generate code, explain code, or clear outputs.
+ */
 export function useAICode(options: UseAICodeOptions): UseAICodeReturn {
   const [language, setLanguage] = useState(options.defaultLanguage || 'typescript');
   const [generatedCode, setGeneratedCode] = useState('');