react-native-ai-hooks 0.2.0 → 0.4.0

package/src/hooks/useAISummarize.ts

@@ -0,0 +1,158 @@
+import { useCallback, useRef, useState } from 'react';
+
+type SummaryLength = 'short' | 'medium' | 'long';
+
+interface UseAISummarizeOptions {
+  apiKey: string;
+  model?: string;
+  system?: string;
+  maxTokens?: number;
+  temperature?: number;
+  defaultLength?: SummaryLength;
+}
+
+interface SummarizeInput {
+  text: string;
+  length?: SummaryLength;
+}
+
+interface UseAISummarizeReturn {
+  summary: string;
+  length: SummaryLength;
+  isLoading: boolean;
+  error: string | null;
+  setLength: (length: SummaryLength) => void;
+  summarizeText: (input: SummarizeInput) => Promise<string | null>;
+  clearSummary: () => void;
+}
+
+interface ClaudeTextBlock {
+  type?: string;
+  text?: string;
+}
+
+interface ClaudeApiResult {
+  content?: ClaudeTextBlock[];
+  error?: {
+    message?: string;
+  };
+}
+
+function getClaudeTextContent(data: unknown): string {
+  const content = (data as ClaudeApiResult)?.content;
+  if (!Array.isArray(content)) {
+    return '';
+  }
+
+  return content
+    .filter(item => item?.type === 'text' && typeof item.text === 'string')
+    .map(item => item.text as string)
+    .join('\n')
+    .trim();
+}
+
+function lengthInstruction(length: SummaryLength): string {
+  if (length === 'short') {
+    return 'Produce a concise summary in 2-4 bullet points.';
+  }
+
+  if (length === 'long') {
+    return 'Produce a detailed summary with key points, context, and implications in 3-5 short paragraphs.';
+  }
+
+  return 'Produce a balanced summary in 1-2 paragraphs plus a short bullet list of key takeaways.';
+}
+
+export function useAISummarize(options: UseAISummarizeOptions): UseAISummarizeReturn {
+  const [summary, setSummary] = useState('');
+  const [length, setLength] = useState<SummaryLength>(options.defaultLength || 'medium');
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const isMountedRef = useRef(true);
+
+  const clearSummary = useCallback(() => {
+    setSummary('');
+    setError(null);
+  }, []);
+
+  const summarizeText = useCallback(
+    async (input: SummarizeInput) => {
+      const text = input.text.trim();
+      const selectedLength = input.length || length;
+
+      if (!text) {
+        setError('No text provided for summarization.');
+        return null;
+      }
+
+      if (!options.apiKey) {
+        setError('Missing Claude API key.');
+        return null;
+      }
+
+      setIsLoading(true);
+      setError(null);
+      setLength(selectedLength);
+
+      try {
+        const prompt = [
+          'Summarize the following text.',
+          lengthInstruction(selectedLength),
+          'Text:',
+          text,
+        ].join('\n');
+
+        const apiResponse = 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: options.maxTokens ?? 1200,
+            temperature: options.temperature ?? 0.3,
+            system:
+              options.system ||
+              'You are an expert summarization assistant. Keep summaries faithful to source text and avoid fabrications.',
+            messages: [{ role: 'user', content: prompt }],
+          }),
+        });
+
+        const data = (await apiResponse.json()) as ClaudeApiResult;
+        if (!apiResponse.ok) {
+          throw new Error(data?.error?.message || `Claude API error: ${apiResponse.status}`);
+        }
+
+        const result = getClaudeTextContent(data);
+        if (!result) {
+          throw new Error('No summary returned by Claude API.');
+        }
+
+        setSummary(result);
+        return result;
+      } catch (err) {
+        const message = (err as Error).message || 'Failed to summarize text';
+        setError(message);
+        return null;
+      } finally {
+        if (isMountedRef.current) {
+          setIsLoading(false);
+        }
+      }
+    },
+    [length, options.apiKey, options.maxTokens, options.model, options.system, options.temperature],
+  );
+
+  return {
+    summary,
+    length,
+    isLoading,
+    error,
+    setLength,
+    summarizeText,
+    clearSummary,
+  };
+}

package/src/hooks/useAITranslate.ts

@@ -0,0 +1,207 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+interface UseAITranslateOptions {
+  apiKey: string;
+  model?: string;
+  system?: string;
+  maxTokens?: number;
+  temperature?: number;
+  initialTargetLanguage?: string;
+  autoTranslate?: boolean;
+  debounceMs?: number;
+}
+
+interface TranslationResult {
+  translatedText: string;
+  detectedSourceLanguage: string;
+  targetLanguage: string;
+}
+
+interface UseAITranslateReturn {
+  sourceText: string;
+  translatedText: string;
+  detectedSourceLanguage: string;
+  targetLanguage: string;
+  isTranslating: boolean;
+  error: string | null;
+  setSourceText: (text: string) => void;
+  setTargetLanguage: (language: string) => void;
+  translateText: (overrideText?: string) => Promise<TranslationResult | null>;
+  clearTranslation: () => void;
+}
+
+interface ClaudeTextBlock {
+  type?: string;
+  text?: string;
+}
+
+interface ClaudeApiResult {
+  content?: ClaudeTextBlock[];
+  error?: {
+    message?: string;
+  };
+}
+
+function getClaudeTextContent(data: unknown): string {
+  const content = (data as ClaudeApiResult)?.content;
+  if (!Array.isArray(content)) {
+    return '';
+  }
+
+  return content
+    .filter(item => item?.type === 'text' && typeof item.text === 'string')
+    .map(item => item.text as string)
+    .join('\n')
+    .trim();
+}
+
+function parseJsonFromText<T>(text: string): T {
+  const trimmed = text.trim();
+  const fenced = trimmed.match(/```(?:json)?\s*([\s\S]*?)```/i);
+  const candidate = fenced?.[1]?.trim() || trimmed;
+  return JSON.parse(candidate) as T;
+}
+
+export function useAITranslate(options: UseAITranslateOptions): UseAITranslateReturn {
+  const [sourceText, setSourceText] = useState('');
+  const [translatedText, setTranslatedText] = useState('');
+  const [detectedSourceLanguage, setDetectedSourceLanguage] = useState('');
+  const [targetLanguage, setTargetLanguage] = useState(options.initialTargetLanguage || 'English');
+  const [isTranslating, setIsTranslating] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const isMountedRef = useRef(true);
+
+  const clearTranslation = useCallback(() => {
+    setSourceText('');
+    setTranslatedText('');
+    setDetectedSourceLanguage('');
+    setError(null);
+  }, []);
+
+  const translateText = useCallback(
+    async (overrideText?: string) => {
+      const textToTranslate = (overrideText ?? sourceText).trim();
+
+      if (!textToTranslate) {
+        setError('No text to translate.');
+        return null;
+      }
+
+      if (!options.apiKey) {
+        setError('Missing Claude API key.');
+        return null;
+      }
+
+      setIsTranslating(true);
+      setError(null);
+
+      try {
+        const prompt = [
+          'Detect source language and translate text.',
+          'Return JSON only using this schema:',
+          '{"detectedSourceLanguage":"string","targetLanguage":"string","translatedText":"string"}',
+          `Target language: ${targetLanguage}`,
+          'Text:',
+          textToTranslate,
+        ].join('\n');
+
+        const apiResponse = 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: options.maxTokens ?? 800,
+            temperature: options.temperature ?? 0.2,
+            system:
+              options.system ||
+              'You are a translation assistant. Always detect source language and translate accurately. Return valid JSON only.',
+            messages: [{ role: 'user', content: prompt }],
+          }),
+        });
+
+        const data = (await apiResponse.json()) as ClaudeApiResult;
+        if (!apiResponse.ok) {
+          throw new Error(data?.error?.message || `Claude API error: ${apiResponse.status}`);
+        }
+
+        const text = getClaudeTextContent(data);
+        if (!text) {
+          throw new Error('No translation returned by Claude API.');
+        }
+
+        const parsed = parseJsonFromText<{
+          translatedText?: string;
+          detectedSourceLanguage?: string;
+          targetLanguage?: string;
+        }>(text);
+
+        const result: TranslationResult = {
+          translatedText: parsed?.translatedText?.trim() || '',
+          detectedSourceLanguage: parsed?.detectedSourceLanguage?.trim() || 'Unknown',
+          targetLanguage: parsed?.targetLanguage?.trim() || targetLanguage,
+        };
+
+        if (!result.translatedText) {
+          throw new Error('Invalid translation format returned by Claude API.');
+        }
+
+        setTranslatedText(result.translatedText);
+        setDetectedSourceLanguage(result.detectedSourceLanguage);
+        return result;
+      } catch (err) {
+        const message = (err as Error).message || 'Failed to translate text';
+        setError(message);
+        return null;
+      } finally {
+        if (isMountedRef.current) {
+          setIsTranslating(false);
+        }
+      }
+    },
+    [options.apiKey, options.maxTokens, options.model, options.system, options.temperature, sourceText, targetLanguage],
+  );
+
+  useEffect(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, []);
+
+  useEffect(() => {
+    if (options.autoTranslate === false) {
+      return;
+    }
+
+    const text = sourceText.trim();
+    if (!text) {
+      setTranslatedText('');
+      setDetectedSourceLanguage('');
+      return;
+    }
+
+    const timer = setTimeout(() => {
+      translateText(text).catch(() => undefined);
+    }, options.debounceMs ?? 500);
+
+    return () => clearTimeout(timer);
+  }, [options.autoTranslate, options.debounceMs, sourceText, targetLanguage, translateText]);
+
+  return {
+    sourceText,
+    translatedText,
+    detectedSourceLanguage,
+    targetLanguage,
+    isTranslating,
+    error,
+    setSourceText,
+    setTargetLanguage,
+    translateText,
+    clearTranslation,
+  };
+}

package/src/hooks/useImageAnalysis.ts

@@ -1,47 +1,20 @@
-import { useCallback, useState } from 'react';
-
-interface UseImageAnalysisOptions {
-  apiKey: string;
-  model?: string;
-  maxTokens?: number;
-  system?: string;
-  uriToBase64?: (uri: string) => Promise<string>;
-}
-
-interface AnalyzeImageInput {
-  image: string;
-  mediaType?: string;
-  prompt?: string;
-}
+import { useCallback, useState, useRef, useMemo } from 'react';
+import type { UseImageAnalysisOptions, UseImageAnalysisReturn } from '../types';
+import { createProvider } from '../utils/providerFactory';
 
-interface UseImageAnalysisReturn {
-  description: string;
-  isLoading: boolean;
-  error: string | null;
-  analyzeImage: (input: AnalyzeImageInput) => Promise<string | null>;
-  clearDescription: () => void;
-}
-
-interface ParsedImageData {
-  base64: string;
-  mediaType: string;
-}
+const DEFAULT_MODEL_MAP = {
+  anthropic: 'claude-sonnet-4-20250514',
+  openai: 'gpt-4-vision',
+  gemini: 'gemini-pro-vision',
+};
 
 const DATA_URI_REGEX = /^data:(image\/[a-zA-Z0-9.+-]+);base64,(.*)$/;
 
 function getMediaTypeFromUri(uri: string): string {
   const normalized = uri.toLowerCase();
-
-  if (normalized.includes('.png')) {
-    return 'image/png';
-  }
-  if (normalized.includes('.webp')) {
-    return 'image/webp';
-  }
-  if (normalized.includes('.gif')) {
-    return 'image/gif';
-  }
-
+  if (normalized.includes('.png')) return 'image/png';
+  if (normalized.includes('.webp')) return 'image/webp';
+  if (normalized.includes('.gif')) return 'image/gif';
   return 'image/jpeg';
 }
 
@@ -56,7 +29,7 @@ function arrayBufferToBase64(buffer: ArrayBuffer): string {
   }
 
   if (typeof btoa !== 'function') {
-    throw new Error('Base64 conversion is unavailable. Provide uriToBase64 in hook options.');
+    throw new Error('Base64 conversion unavailable. Provide uriToBase64 in hook options.');
   }
 
   return btoa(binary);
@@ -77,21 +50,31 @@ export function useImageAnalysis(options: UseImageAnalysisOptions): UseImageAnal
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
+  const isMountedRef = useRef(true);
+
+  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],
+  );
+
   const normalizeImage = useCallback(
-    async (image: string, mediaType?: string): Promise<ParsedImageData> => {
+    async (image: string, mediaType?: string): Promise<{ base64: string; mediaType: string }> => {
       const dataUriMatch = image.match(DATA_URI_REGEX);
       if (dataUriMatch) {
-        const matchedMediaType = dataUriMatch[1];
-        const base64Data = dataUriMatch[2];
         return {
-          base64: base64Data,
-          mediaType: mediaType || matchedMediaType,
+          base64: dataUriMatch[2],
+          mediaType: mediaType || dataUriMatch[1],
         };
       }
 
-      const isLikelyUri = /^(https?:\/\/|file:\/\/|content:\/\/|ph:\/\/|assets-library:\/\/)/i.test(
-        image,
-      );
+      const isLikelyUri = /^(https?:\/\/|file:\/\/|content:\/\/|ph:\/\/|assets-library:\/\/)/i.test(image);
 
       if (isLikelyUri) {
         const toBase64 = options.uriToBase64 || defaultUriToBase64;
@@ -116,24 +99,39 @@ export function useImageAnalysis(options: UseImageAnalysisOptions): UseImageAnal
   }, []);
 
   const analyzeImage = useCallback(
-    async (input: AnalyzeImageInput) => {
-      setIsLoading(true);
+    async (uri: string, prompt?: string) => {
+      if (!uri) {
+        setError('Image URI is required');
+        return null;
+      }
+
+      if (!options.apiKey) {
+        setError('Missing API key');
+        return null;
+      }
+
       setError(null);
+      setIsLoading(true);
 
       try {
-        const parsedImage = await normalizeImage(input.image, input.mediaType);
+        const imagData = await normalizeImage(uri);
+        const analysisPrompt = prompt || 'Describe this image in detail.';
 
-        const apiResponse = 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',
+        const base_url = providerConfig.baseUrl || 'https://api.anthropic.com';
+        const headers: Record<string, string> = {
+          'Content-Type': 'application/json',
+        };
+
+        let url = '';
+        let body: Record<string, unknown> = {};
+
+        if (providerConfig.provider === 'anthropic') {
+          url = `${base_url}/v1/messages`;
+          headers['x-api-key'] = options.apiKey;
+          headers['anthropic-version'] = '2023-06-01';
+          body = {
+            model: providerConfig.model,
             max_tokens: options.maxTokens ?? 1024,
-            system: options.system,
             messages: [
               {
                 role: 'user',
@@ -142,47 +140,96 @@ export function useImageAnalysis(options: UseImageAnalysisOptions): UseImageAnal
                     type: 'image',
                     source: {
                       type: 'base64',
-                      media_type: parsedImage.mediaType,
-                      data: parsedImage.base64,
+                      media_type: imagData.mediaType,
+                      data: imagData.base64,
                     },
                   },
                   {
                     type: 'text',
-                    text: input.prompt || 'Describe this image in detail.',
+                    text: analysisPrompt,
                   },
                 ],
               },
             ],
-          }),
+          };
+        } else if (providerConfig.provider === 'openai') {
+          url = `${providerConfig.baseUrl || 'https://api.openai.com'}/v1/chat/completions`;
+          headers.Authorization = `Bearer ${options.apiKey}`;
+          body = {
+            model: providerConfig.model,
+            max_tokens: options.maxTokens ?? 1024,
+            messages: [
+              {
+                role: 'user',
+                content: [
+                  {
+                    type: 'image_url',
+                    image_url: {
+                      url: `data:${imagData.mediaType};base64,${imagData.base64}`,
+                    },
+                  },
+                  {
+                    type: 'text',
+                    text: analysisPrompt,
+                  },
+                ],
+              },
+            ],
+          };
+        } else {
+          throw new Error(`Image analysis not supported for provider: ${providerConfig.provider}`);
+        }
+
+        const response = await fetch(url, {
+          method: 'POST',
+          headers,
+          body: JSON.stringify(body),
         });
 
-        if (!apiResponse.ok) {
-          const errorText = await apiResponse.text();
-          throw new Error(errorText || `Claude API error: ${apiResponse.status}`);
+        if (!response.ok) {
+          const errorText = await response.text();
+          throw new Error(errorText || `API error: ${response.status}`);
         }
 
-        const data = await apiResponse.json();
-        const textResult = data?.content?.find?.(
-          (item: { type?: string; text?: string }) => item?.type === 'text',
-        )?.text;
+        const data = await response.json();
+        let resultText = '';
+
+        if (providerConfig.provider === 'anthropic') {
+          resultText = data?.content?.[0]?.text || '';
+        } else if (providerConfig.provider === 'openai') {
+          resultText = data?.choices?.[0]?.message?.content || '';
+        }
 
-        if (!textResult) {
-          throw new Error('No description returned from Claude vision API.');
+        if (!resultText) {
+          throw new Error('No description returned by vision API');
         }
 
-        setDescription(textResult);
-        return textResult;
+        if (isMountedRef.current) {
+          setDescription(resultText);
+        }
+        return resultText;
       } catch (err) {
-        const message = (err as Error).message || 'Failed to analyze image';
-        setError(message);
+        if (isMountedRef.current) {
+          const message = err instanceof Error ? err.message : 'Failed to analyze image';
+          setError(message);
+        }
         return null;
       } finally {
-        setIsLoading(false);
+        if (isMountedRef.current) {
+          setIsLoading(false);
+        }
       }
     },
-    [normalizeImage, options],
+    [normalizeImage, options, providerConfig],
   );
 
+  useState(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, []);
+
   return {
     description,
     isLoading,

package/src/index.ts

@@ -2,4 +2,31 @@ export { useAIChat } from './hooks/useAIChat';
 export { useAIStream } from './hooks/useAIStream';
 export { useImageAnalysis } from './hooks/useImageAnalysis';
 export { useAIForm } from './hooks/useAIForm';
-export { useAIVoice } from './hooks/useAIVoice';
+export { useAIVoice } from './hooks/useAIVoice';
+export { useAITranslate } from './hooks/useAITranslate';
+export { useAISummarize } from './hooks/useAISummarize';
+export { useAICode } from './hooks/useAICode';
+
+// Type exports
+export type {
+  Message,
+  AIProviderType,
+  ProviderConfig,
+  AIResponse,
+  AIRequestOptions,
+  UseAIChatOptions,
+  UseAIChatReturn,
+  UseAIStreamOptions,
+  UseAIStreamReturn,
+  UseImageAnalysisOptions,
+  UseImageAnalysisReturn,
+  UseAIFormOptions,
+  UseAIFormReturn,
+  FormValidationRequest,
+  FormValidationResult,
+} from './types';
+
+// Utility exports for advanced use cases
+export { createProvider, ProviderFactory } from './utils/providerFactory';
+export { fetchWithRetry } from './utils/fetchWithRetry';
+export type { AIResponse, AIRequestOptions } from './utils/providerFactory';