@umituz/web-ai-groq-provider 1.1.7 → 1.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/web-ai-groq-provider",
-  "version": "1.1.7",
+  "version": "1.1.8",
   "description": "Groq AI text generation provider for React web applications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/domains/chat/hooks/use-chat.hook.ts

@@ -1,9 +1,9 @@
 /**
  * useChat Hook
- * @description Main React hook for chat functionality
+ * @description Main React hook for chat functionality with performance optimizations
  */
 
-import { useState, useCallback, useEffect } from "react";
+import { useState, useCallback, useEffect, useRef } from "react";
 import type {
   ChatMessage,
   ChatConfig,
@@ -19,7 +19,7 @@ const MESSAGE_ID_PREFIX = "msg-";
 const MESSAGE_ID_USER_SUFFIX = "user";
 
 /**
- * Hook for chat functionality with AI integration
+ * Hook for chat functionality with AI integration and performance optimizations
  */
 export function useChat(options: UseChatOptions): UseChatReturn {
   const {
@@ -37,6 +37,11 @@ export function useChat(options: UseChatOptions): UseChatReturn {
   const [isTyping, setIsTyping] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
+  // Refs for deduplication and callback tracking
+  const pendingMessageRef = useRef<string | null>(null);
+  const optionsRef = useRef(options);
+  optionsRef.current = options;
+
   // Initialize chat service config
   useEffect(() => {
     if (config) {
@@ -44,6 +49,13 @@ export function useChat(options: UseChatOptions): UseChatReturn {
     }
   }, [config]);
 
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      pendingMessageRef.current = null;
+    };
+  }, []);
+
   // Load messages from storage on mount
   useEffect(() => {
     if (!storage) return;
@@ -60,7 +72,7 @@ export function useChat(options: UseChatOptions): UseChatReturn {
     void loadMessages();
   }, [conversationId, storage]);
 
-  // Save message to storage
+  // Save message to storage (stable reference)
   const saveToStorage = useCallback(
     async (message: ChatMessage) => {
       if (!autoSave || !storage) return;
@@ -74,16 +86,47 @@ export function useChat(options: UseChatOptions): UseChatReturn {
     [conversationId, storage, autoSave]
   );
 
-  // Send message
+  // Batch save messages to storage
+  const saveMessagesToStorage = useCallback(
+    async (messagesToSave: ChatMessage[]) => {
+      if (!autoSave || !storage || messagesToSave.length === 0) return;
+
+      try {
+        // Try batch save if supported
+        if ('saveMessages' in storage) {
+          await (storage as any).saveMessages(conversationId, messagesToSave);
+        } else {
+          // Fallback to individual saves in parallel
+          await Promise.all(
+            messagesToSave.map(msg => storage.saveMessage(conversationId, msg))
+          );
+        }
+      } catch (err) {
+        // Silently fail
+      }
+    },
+    [conversationId, storage, autoSave]
+  );
+
+  // Send message with deduplication and functional updates
   const sendMessage = useCallback(
     async (text: string, type?: ChatMessage["type"]): Promise<void> => {
       if (!text.trim() || isLoading) return;
 
+      // Prevent duplicate messages
+      if (pendingMessageRef.current === text) {
+        return;
+      }
+
+      pendingMessageRef.current = text;
       setIsLoading(true);
       setError(null);
 
+      // Get latest callbacks from ref
+      const currentOptions = optionsRef.current;
+
       try {
-        // Create user message first
+        // Create user message
         const userMessage: ChatMessage = {
           id: `${MESSAGE_ID_PREFIX}${Date.now()}-${MESSAGE_ID_USER_SUFFIX}`,
           sender: "user",
@@ -92,102 +135,107 @@ export function useChat(options: UseChatOptions): UseChatReturn {
           type: type || "text",
         };
 
-        // Add user message immediately
-        const messagesWithUser = [...messages, userMessage];
-        setMessages(messagesWithUser);
-        await saveToStorage(userMessage);
-        onMessageSent?.(userMessage);
+        // Use functional update to avoid stale closure
+        setMessages(prev => {
+          const updated = [...prev, userMessage];
+          saveToStorage(userMessage);
+          currentOptions.onMessageSent?.(userMessage);
+          return updated;
+        });
 
         // Generate AI response
         setIsTyping(true);
+
+        // Get current messages for context
+        const contextForAI = messages; // Use closure messages, not functional update
+
         const aiResponse = await chatService.generateAIResponse(
           conversationId,
           text,
-          messages
+          contextForAI
         );
 
-        // Update messages with AI response
-        const newMessages = [...messagesWithUser, aiResponse];
-        setMessages(newMessages);
-
-        // Save AI response to storage
-        await saveToStorage(aiResponse);
-        onAIResponse?.(aiResponse);
+        // Use functional update for AI response
+        setMessages(prev => {
+          const updated = [...prev, aiResponse];
+          saveToStorage(aiResponse);
+          currentOptions.onAIResponse?.(aiResponse);
+          return updated;
+        });
       } catch (err) {
         const errorMessage =
           err instanceof Error ? err.message : "Failed to send message";
         setError(errorMessage);
-        onError?.(errorMessage);
+        currentOptions.onError?.(errorMessage);
       } finally {
         setIsLoading(false);
         setIsTyping(false);
+        pendingMessageRef.current = null;
       }
     },
-    [
-      conversationId,
-      messages,
-      isLoading,
-      saveToStorage,
-      onMessageSent,
-      onAIResponse,
-      onError,
-    ]
+    [conversationId, isLoading, saveToStorage, messages]
   );
 
-  // Regenerate last AI response
+  // Regenerate last AI response with functional updates
   const regenerate = useCallback(async (): Promise<void> => {
-    if (messages.length === 0 || isLoading) return;
+    // Use functional update to get latest messages
+    setMessages(currentMessages => {
+      if (currentMessages.length === 0 || isLoading) {
+        return currentMessages;
+      }
 
-    const lastUserMessage = [...messages]
-      .reverse()
-      .find((m) => m.sender === "user");
+      const lastUserMessage = [...currentMessages]
+        .reverse()
+        .find((m) => m.sender === "user");
 
-    if (!lastUserMessage) return;
+      if (!lastUserMessage) return currentMessages;
 
-    setIsLoading(true);
-    setError(null);
+      // Async operation - need to handle differently
+      setIsLoading(true);
+      setError(null);
+
+      const currentOptions = optionsRef.current;
 
-    try {
       // Remove last AI message if exists
-      const messagesWithoutAI = messages.filter(
-        (m, i) => !(i === messages.length - 1 && m.sender === "assistant")
+      const messagesWithoutAI = currentMessages.filter(
+        (m, i) => !(i === currentMessages.length - 1 && m.sender === "assistant")
       );
 
-      setMessages(messagesWithoutAI);
+      // Trigger async update
+      (async () => {
+        try {
+          // Generate new response
+          setIsTyping(true);
+          const aiResponse = await chatService.generateAIResponse(
+            conversationId,
+            lastUserMessage.content,
+            messagesWithoutAI.slice(0, -1)
+          );
 
-      // Generate new response
-      setIsTyping(true);
-      const aiResponse = await chatService.generateAIResponse(
-        conversationId,
-        lastUserMessage.content,
-        messagesWithoutAI.slice(0, -1)
-      );
+          // Update messages with new response
+          setMessages(prev => {
+            const lastIsAI = prev.length > 0 && prev[prev.length - 1].sender === "assistant";
+            const base = lastIsAI ? prev.slice(0, -1) : prev;
+            return [...base, aiResponse];
+          });
 
-      // Update messages
-      const newMessages = [...messagesWithoutAI, aiResponse];
-      setMessages(newMessages);
-
-      // Save to storage
-      await saveToStorage(aiResponse);
-
-      onAIResponse?.(aiResponse);
-    } catch (err) {
-      const errorMessage =
-        err instanceof Error ? err.message : "Failed to regenerate";
-      setError(errorMessage);
-      onError?.(errorMessage);
-    } finally {
-      setIsLoading(false);
-      setIsTyping(false);
-    }
-  }, [
-    conversationId,
-    messages,
-    isLoading,
-    saveToStorage,
-    onAIResponse,
-    onError,
-  ]);
+          // Save to storage
+          await saveToStorage(aiResponse);
+          currentOptions.onAIResponse?.(aiResponse);
+        } catch (err) {
+          const errorMessage =
+            err instanceof Error ? err.message : "Failed to regenerate";
+          setError(errorMessage);
+          currentOptions.onError?.(errorMessage);
+        } finally {
+          setIsLoading(false);
+          setIsTyping(false);
+        }
+      })();
+
+      return messagesWithoutAI;
+    });
+  }, [conversationId, isLoading, saveToStorage]);
 
   // Clear all messages
   const clearMessages = useCallback(() => {

package/src/domains/chat/services/chat.service.ts

@@ -1,6 +1,6 @@
 /**
  * Chat Service
- * @description Core chat logic with AI integration
+ * @description Core chat logic with AI integration and performance optimizations
  */
 
 import type {
@@ -17,6 +17,7 @@ import type {
 import { textGenerationService } from "../../groq/services";
 import { messageFormatter } from "../utils/message-formatter";
 import { DEFAULT_MODELS } from "../../groq/constants";
+import { cacheManager } from "../../groq/utils/cache-manager.util";
 
 const DEFAULT_CONFIG: ChatConfig = {
   temperature: 0.8,
@@ -27,13 +28,20 @@ const DEFAULT_CONFIG: ChatConfig = {
 
 class ChatService implements IChatService {
   private config: ChatConfig = DEFAULT_CONFIG;
+  private systemPromptCache = new Map<string, string>();
+  private readonly PROMPT_CACHE_KEY_PREFIX = "system-prompt";
+  private readonly RESPONSE_CACHE_TTL = 300000; // 5 minutes
 
   initialize(config: ChatConfig): void {
     this.config = { ...DEFAULT_CONFIG, ...config };
+    // Clear system prompt cache when config changes
+    this.clearSystemPromptCache();
   }
 
   updateConfig(config: Partial<ChatConfig>): void {
     this.config = { ...this.config, ...config };
+    // Clear system prompt cache when config changes
+    this.clearSystemPromptCache();
   }
 
   async sendMessage(input: SendMessageInput): Promise<SendMessageResult> {
@@ -74,7 +82,7 @@ class ChatService implements IChatService {
     context: ChatMessage[] = []
   ): Promise<ChatMessage> {
     try {
-      // Build system prompt from config
+      // Build system prompt from config (with caching)
       const systemPrompt = this.buildSystemPrompt();
 
       // Format messages for Groq
@@ -89,17 +97,34 @@ class ChatService implements IChatService {
         content: userMessage,
       });
 
-      // Generate response
-      const response = await textGenerationService.generateChatCompletion(
-        groqMessages,
-        {
-          model: DEFAULT_MODELS.TEXT,
-          generationConfig: {
-            temperature: this.config.temperature,
-            maxTokens: this.config.maxTokens,
-          },
-        }
-      );
+      // Check cache for response
+      const cacheKey = cacheManager.generateKey({
+        companionId,
+        userMessage,
+        context: context.map(m => ({ sender: m.sender, content: m.content })),
+        config: {
+          temperature: this.config.temperature,
+          maxTokens: this.config.maxTokens,
+        },
+      });
+
+      const cachedResponse = cacheManager.get<string>(cacheKey);
+      const response = cachedResponse ||
+        await textGenerationService.generateChatCompletion(
+          groqMessages,
+          {
+            model: DEFAULT_MODELS.TEXT,
+            generationConfig: {
+              temperature: this.config.temperature,
+              maxTokens: this.config.maxTokens,
+            },
+          }
+        );
+
+      // Cache the response if it wasn't cached
+      if (!cachedResponse) {
+        cacheManager.set(cacheKey, response);
+      }
 
       // Format response as chat message
       const aiMessage: ChatMessage = {
@@ -107,6 +132,7 @@ class ChatService implements IChatService {
         metadata: {
           companionId,
           model: DEFAULT_MODELS.TEXT,
+          cached: !!cachedResponse,
         },
       };
 
@@ -122,11 +148,38 @@ class ChatService implements IChatService {
 
   private buildSystemPrompt(): string {
     const language = this.config.language || "tr";
-    const basePrompt = this.config.systemPrompt || this.getDefaultPrompt(language);
+    const customPrompt = this.config.systemPrompt;
+
+    // Generate cache key
+    const cacheKey = `${this.PROMPT_CACHE_KEY_PREFIX}-${language}-${customPrompt?.length || 0}`;
+
+    // Check cache
+    if (this.systemPromptCache.has(cacheKey)) {
+      return this.systemPromptCache.get(cacheKey)!;
+    }
+
+    // Build prompt
+    const basePrompt = customPrompt || this.getDefaultPrompt(language);
+
+    // Cache it
+    this.systemPromptCache.set(cacheKey, basePrompt);
 
     return basePrompt;
   }
 
+  private clearSystemPromptCache(): void {
+    this.systemPromptCache.clear();
+  }
+
+  /**
+   * Clear all cached data (system prompts and response cache)
+   */
+  clearCache(): void {
+    this.clearSystemPromptCache();
+    // Note: Response cache is managed by textGenerationService
+    // Export cache clearing function from there if needed
+  }
+
   private getDefaultPrompt(language: string): string {
     if (language === "tr") {
       return `Sen samimi, eğlenceli ve ilgi çekici bir AI companionsın. Türkçe konuşuyorsun.

package/src/domains/groq/hooks/use-groq.hook.ts

@@ -1,15 +1,16 @@
 /**
  * useGroq Hook
- * @description Main React hook for Groq text generation
+ * @description Main React hook for Groq text generation with performance optimizations
  */
 
-import { useState, useCallback, useMemo } from "react";
+import { useState, useCallback, useMemo, useRef, useEffect } from "react";
 import type { GroqGenerationConfig } from "../interfaces";
 import type { TextGenerationOptions, StreamingCallbacks } from "../interfaces";
 import { textGenerationService } from "../services";
 import { GroqError } from "../utils/groq-error.util";
 import { getUserFriendlyError } from "../utils/error.util";
 import { DEFAULT_MODELS } from "../constants";
+import { groqHttpClient } from "../services/http-client.service";
 
 export interface UseGroqOptions {
   /** Initial model to use */
@@ -51,46 +52,54 @@ export interface UseGroqReturn {
 }
 
 /**
- * Hook for Groq text generation
+ * Hook for Groq text generation with performance optimizations
  */
 export function useGroq(options: UseGroqOptions = {}): UseGroqReturn {
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [result, setResult] = useState<string | null>(null);
 
-  // Memoize options to prevent unnecessary callback recreations
-  const stableOptions = useMemo(
-    () => options,
-    [
-      options.model,
-      options.generationConfig?.temperature,
-      options.generationConfig?.maxTokens,
-      options.generationConfig?.topP,
-      options.onStart,
-      options.onSuccess,
-      options.onError,
-    ]
+  // Use ref for callbacks to avoid stale closures and unstable references
+  const optionsRef = useRef(options);
+  optionsRef.current = options;
+
+  // Memoize only the stable configuration values (not callbacks)
+  const stableConfig = useMemo(
+    () => ({
+      model: options.model,
+      generationConfig: options.generationConfig,
+    }),
+    [options.model, options.generationConfig?.temperature, options.generationConfig?.maxTokens, options.generationConfig?.topP]
   );
 
+  // Cleanup pending requests on unmount
+  useEffect(() => {
+    return () => {
+      groqHttpClient.cancelPendingRequests();
+    };
+  }, []);
+
   const generate = useCallback(
     async (prompt: string, config?: GroqGenerationConfig): Promise<string> => {
       setIsLoading(true);
       setError(null);
       setResult(null);
 
-      stableOptions.onStart?.();
+      // Use ref to get latest callbacks without adding to dependencies
+      const currentOptions = optionsRef.current;
+      currentOptions.onStart?.();
 
       try {
         const response = await textGenerationService.generateCompletion(prompt, {
-          model: stableOptions.model,
+          model: stableConfig.model,
           generationConfig: {
-            ...stableOptions.generationConfig,
+            ...stableConfig.generationConfig,
             ...config,
           },
         });
 
         setResult(response);
-        stableOptions.onSuccess?.(response);
+        currentOptions.onSuccess?.(response);
 
         return response;
       } catch (err) {
@@ -98,14 +107,14 @@ export function useGroq(options: UseGroqOptions = {}): UseGroqReturn {
           err instanceof Error ? err : new Error("Unknown error")
         );
         setError(errorMessage);
-        stableOptions.onError?.(errorMessage);
+        currentOptions.onError?.(errorMessage);
 
         throw err;
       } finally {
         setIsLoading(false);
       }
     },
-    [stableOptions]
+    [stableConfig]
   );
 
   const generateJSON = useCallback(
@@ -117,13 +126,14 @@ export function useGroq(options: UseGroqOptions = {}): UseGroqReturn {
       setError(null);
       setResult(null);
 
-      stableOptions.onStart?.();
+      const currentOptions = optionsRef.current;
+      currentOptions.onStart?.();
 
       try {
         const response = await textGenerationService.generateStructured<T>(prompt, {
-          model: stableOptions.model,
+          model: stableConfig.model,
           generationConfig: {
-            ...stableOptions.generationConfig,
+            ...stableConfig.generationConfig,
             ...config,
           },
           schema: config?.schema,
@@ -131,7 +141,7 @@ export function useGroq(options: UseGroqOptions = {}): UseGroqReturn {
 
         const jsonString = JSON.stringify(response, null, 2);
         setResult(jsonString);
-        stableOptions.onSuccess?.(jsonString);
+        currentOptions.onSuccess?.(jsonString);
 
         return response;
       } catch (err) {
@@ -139,14 +149,14 @@ export function useGroq(options: UseGroqOptions = {}): UseGroqReturn {
           err instanceof Error ? err : new Error("Unknown error")
         );
         setError(errorMessage);
-        stableOptions.onError?.(errorMessage);
+        currentOptions.onError?.(errorMessage);
 
         throw err;
       } finally {
         setIsLoading(false);
       }
     },
-    [stableOptions]
+    [stableConfig]
   );
 
   const stream = useCallback(
@@ -159,19 +169,19 @@ export function useGroq(options: UseGroqOptions = {}): UseGroqReturn {
       setError(null);
       setResult(null);
 
-      let fullContent = "";
-
-      stableOptions.onStart?.();
+      const contentChunks: string[] = [];
+      const currentOptions = optionsRef.current;
+      currentOptions.onStart?.();
 
       try {
         const callbacks: StreamingCallbacks = {
           onChunk: (c) => {
-            fullContent += c;
+            contentChunks.push(c); // Use array accumulation
             onChunk(c);
           },
           onComplete: (text) => {
             setResult(text);
-            stableOptions.onSuccess?.(text);
+            currentOptions.onSuccess?.(text);
           },
         };
 
@@ -179,9 +189,9 @@ export function useGroq(options: UseGroqOptions = {}): UseGroqReturn {
           prompt,
           callbacks,
           {
-            model: stableOptions.model,
+            model: stableConfig.model,
             generationConfig: {
-              ...stableOptions.generationConfig,
+              ...stableConfig.generationConfig,
               ...config,
             },
           }
@@ -194,14 +204,14 @@ export function useGroq(options: UseGroqOptions = {}): UseGroqReturn {
           err instanceof Error ? err : new Error("Unknown error")
         );
         setError(errorMessage);
-        stableOptions.onError?.(errorMessage);
+        currentOptions.onError?.(errorMessage);
 
         throw err;
       } finally {
         setIsLoading(false);
       }
     },
-    [stableOptions]
+    [stableConfig]
   );
 
   const reset = useCallback(() => {