@hef2024/llmasaservice-ui 0.22.10 → 0.22.11

package/dist/index.js

@@ -3865,6 +3865,7 @@ var AIChatPanel = ({
   const [copiedCallId, setCopiedCallId] = (0, import_react12.useState)(null);
   const [feedbackCallId, setFeedbackCallId] = (0, import_react12.useState)(null);
   const [error, setError] = (0, import_react12.useState)(null);
+  const lastProcessedErrorRef = (0, import_react12.useRef)(null);
   const [emailSent, setEmailSent] = (0, import_react12.useState)(false);
   const [isToolInfoModalOpen, setIsToolInfoModalOpen] = (0, import_react12.useState)(false);
   const [toolInfoData, setToolInfoData] = (0, import_react12.useState)(null);
@@ -4369,6 +4370,7 @@ var AIChatPanel = ({
     setThinkingBlocks([]);
     setCurrentThinkingIndex(0);
     setError(null);
+    lastProcessedErrorRef.current = null;
     setUserHasScrolled(false);
     prevResponseLengthRef.current = 0;
     setResponse("");
@@ -4442,31 +4444,58 @@ var AIChatPanel = ({
         // onComplete
         (errorMsg) => {
           console.log("[AIChatPanel] Error callback triggered:", errorMsg);
-          if (errorMsg.includes("413") || errorMsg.toLowerCase().includes("content too large")) {
+          const isAbortError = errorMsg.toLowerCase().includes("abort") || errorMsg.toLowerCase().includes("canceled") || errorMsg.toLowerCase().includes("cancelled");
+          if (isAbortError) {
+            console.log("[AIChatPanel] Request was aborted by user");
+            if (promptKey) {
+              setHistory((prev) => __spreadProps(__spreadValues({}, prev), {
+                [promptKey]: {
+                  content: "Response canceled",
+                  callId: lastCallId || ""
+                }
+              }));
+            }
+          } else if (errorMsg.includes("413") || errorMsg.toLowerCase().includes("content too large")) {
             setError({
               message: "The context is too large to process. Please start a new conversation or reduce the amount of context.",
               code: "413"
             });
+            if (promptKey) {
+              setHistory((prev) => __spreadProps(__spreadValues({}, prev), {
+                [promptKey]: {
+                  content: `Error: ${errorMsg}`,
+                  callId: lastCallId || ""
+                }
+              }));
+            }
           } else if (errorMsg.toLowerCase().includes("network error") || errorMsg.toLowerCase().includes("fetch")) {
             setError({
               message: "Network error. Please check your connection and try again.",
               code: "NETWORK_ERROR"
             });
+            if (promptKey) {
+              setHistory((prev) => __spreadProps(__spreadValues({}, prev), {
+                [promptKey]: {
+                  content: `Error: ${errorMsg}`,
+                  callId: lastCallId || ""
+                }
+              }));
+            }
           } else {
             setError({
               message: errorMsg,
               code: "UNKNOWN_ERROR"
             });
+            if (promptKey) {
+              setHistory((prev) => __spreadProps(__spreadValues({}, prev), {
+                [promptKey]: {
+                  content: `Error: ${errorMsg}`,
+                  callId: lastCallId || ""
+                }
+              }));
+            }
           }
           setIsLoading(false);
-          if (promptKey) {
-            setHistory((prev) => __spreadProps(__spreadValues({}, prev), {
-              [promptKey]: {
-                content: `Error: ${errorMsg}`,
-                callId: lastCallId || ""
-              }
-            }));
-          }
         }
       );
       setLastMessages(messagesAndHistory);
@@ -4656,33 +4685,57 @@ var AIChatPanel = ({
   }, [followOnPrompt, continueChat]);
   (0, import_react12.useEffect)(() => {
     if (llmError && llmError.trim()) {
+      if (lastProcessedErrorRef.current === llmError) {
+        console.log("[AIChatPanel] Skipping duplicate error:", llmError);
+        return;
+      }
       console.log("[AIChatPanel] Error detected:", llmError);
+      lastProcessedErrorRef.current = llmError;
       const errorMessage = llmError;
-      if (errorMessage.includes("413") || errorMessage.toLowerCase().includes("content too large")) {
+      const isAbortError = errorMessage.toLowerCase().includes("abort") || errorMessage.toLowerCase().includes("canceled") || errorMessage.toLowerCase().includes("cancelled");
+      if (isAbortError) {
+        console.log("[AIChatPanel] Request was aborted by user (useEffect)");
+      } else if (errorMessage.includes("413") || errorMessage.toLowerCase().includes("content too large")) {
         setError({
           message: "The context is too large to process. Please start a new conversation or reduce the amount of context.",
           code: "413"
         });
+        if (lastKey) {
+          setHistory((prev) => __spreadProps(__spreadValues({}, prev), {
+            [lastKey]: {
+              content: `Error: ${errorMessage}`,
+              callId: lastCallId || ""
+            }
+          }));
+        }
       } else if (errorMessage.toLowerCase().includes("network error") || errorMessage.toLowerCase().includes("fetch")) {
         setError({
           message: "Network error. Please check your connection and try again.",
           code: "NETWORK_ERROR"
         });
+        if (lastKey) {
+          setHistory((prev) => __spreadProps(__spreadValues({}, prev), {
+            [lastKey]: {
+              content: `Error: ${errorMessage}`,
+              callId: lastCallId || ""
+            }
+          }));
+        }
       } else {
         setError({
           message: errorMessage,
           code: "UNKNOWN_ERROR"
         });
+        if (lastKey) {
+          setHistory((prev) => __spreadProps(__spreadValues({}, prev), {
+            [lastKey]: {
+              content: `Error: ${errorMessage}`,
+              callId: lastCallId || ""
+            }
+          }));
+        }
       }
       setIsLoading(false);
-      if (lastKey) {
-        setHistory((prev) => __spreadProps(__spreadValues({}, prev), {
-          [lastKey]: {
-            content: `Error: ${errorMessage}`,
-            callId: lastCallId || ""
-          }
-        }));
-      }
     }
   }, [llmError, lastKey, lastCallId]);
   (0, import_react12.useEffect)(() => {

package/dist/index.mjs

@@ -3832,6 +3832,7 @@ var AIChatPanel = ({
   const [copiedCallId, setCopiedCallId] = useState6(null);
   const [feedbackCallId, setFeedbackCallId] = useState6(null);
   const [error, setError] = useState6(null);
+  const lastProcessedErrorRef = useRef5(null);
   const [emailSent, setEmailSent] = useState6(false);
   const [isToolInfoModalOpen, setIsToolInfoModalOpen] = useState6(false);
   const [toolInfoData, setToolInfoData] = useState6(null);
@@ -4336,6 +4337,7 @@ var AIChatPanel = ({
     setThinkingBlocks([]);
     setCurrentThinkingIndex(0);
     setError(null);
+    lastProcessedErrorRef.current = null;
     setUserHasScrolled(false);
     prevResponseLengthRef.current = 0;
     setResponse("");
@@ -4409,31 +4411,58 @@ var AIChatPanel = ({
         // onComplete
         (errorMsg) => {
           console.log("[AIChatPanel] Error callback triggered:", errorMsg);
-          if (errorMsg.includes("413") || errorMsg.toLowerCase().includes("content too large")) {
+          const isAbortError = errorMsg.toLowerCase().includes("abort") || errorMsg.toLowerCase().includes("canceled") || errorMsg.toLowerCase().includes("cancelled");
+          if (isAbortError) {
+            console.log("[AIChatPanel] Request was aborted by user");
+            if (promptKey) {
+              setHistory((prev) => __spreadProps(__spreadValues({}, prev), {
+                [promptKey]: {
+                  content: "Response canceled",
+                  callId: lastCallId || ""
+                }
+              }));
+            }
+          } else if (errorMsg.includes("413") || errorMsg.toLowerCase().includes("content too large")) {
             setError({
               message: "The context is too large to process. Please start a new conversation or reduce the amount of context.",
               code: "413"
             });
+            if (promptKey) {
+              setHistory((prev) => __spreadProps(__spreadValues({}, prev), {
+                [promptKey]: {
+                  content: `Error: ${errorMsg}`,
+                  callId: lastCallId || ""
+                }
+              }));
+            }
           } else if (errorMsg.toLowerCase().includes("network error") || errorMsg.toLowerCase().includes("fetch")) {
             setError({
               message: "Network error. Please check your connection and try again.",
               code: "NETWORK_ERROR"
             });
+            if (promptKey) {
+              setHistory((prev) => __spreadProps(__spreadValues({}, prev), {
+                [promptKey]: {
+                  content: `Error: ${errorMsg}`,
+                  callId: lastCallId || ""
+                }
+              }));
+            }
           } else {
             setError({
               message: errorMsg,
               code: "UNKNOWN_ERROR"
             });
+            if (promptKey) {
+              setHistory((prev) => __spreadProps(__spreadValues({}, prev), {
+                [promptKey]: {
+                  content: `Error: ${errorMsg}`,
+                  callId: lastCallId || ""
+                }
+              }));
+            }
           }
           setIsLoading(false);
-          if (promptKey) {
-            setHistory((prev) => __spreadProps(__spreadValues({}, prev), {
-              [promptKey]: {
-                content: `Error: ${errorMsg}`,
-                callId: lastCallId || ""
-              }
-            }));
-          }
         }
       );
       setLastMessages(messagesAndHistory);
@@ -4623,33 +4652,57 @@ var AIChatPanel = ({
   }, [followOnPrompt, continueChat]);
   useEffect7(() => {
     if (llmError && llmError.trim()) {
+      if (lastProcessedErrorRef.current === llmError) {
+        console.log("[AIChatPanel] Skipping duplicate error:", llmError);
+        return;
+      }
       console.log("[AIChatPanel] Error detected:", llmError);
+      lastProcessedErrorRef.current = llmError;
       const errorMessage = llmError;
-      if (errorMessage.includes("413") || errorMessage.toLowerCase().includes("content too large")) {
+      const isAbortError = errorMessage.toLowerCase().includes("abort") || errorMessage.toLowerCase().includes("canceled") || errorMessage.toLowerCase().includes("cancelled");
+      if (isAbortError) {
+        console.log("[AIChatPanel] Request was aborted by user (useEffect)");
+      } else if (errorMessage.includes("413") || errorMessage.toLowerCase().includes("content too large")) {
         setError({
           message: "The context is too large to process. Please start a new conversation or reduce the amount of context.",
           code: "413"
         });
+        if (lastKey) {
+          setHistory((prev) => __spreadProps(__spreadValues({}, prev), {
+            [lastKey]: {
+              content: `Error: ${errorMessage}`,
+              callId: lastCallId || ""
+            }
+          }));
+        }
       } else if (errorMessage.toLowerCase().includes("network error") || errorMessage.toLowerCase().includes("fetch")) {
         setError({
           message: "Network error. Please check your connection and try again.",
           code: "NETWORK_ERROR"
         });
+        if (lastKey) {
+          setHistory((prev) => __spreadProps(__spreadValues({}, prev), {
+            [lastKey]: {
+              content: `Error: ${errorMessage}`,
+              callId: lastCallId || ""
+            }
+          }));
+        }
       } else {
         setError({
           message: errorMessage,
           code: "UNKNOWN_ERROR"
         });
+        if (lastKey) {
+          setHistory((prev) => __spreadProps(__spreadValues({}, prev), {
+            [lastKey]: {
+              content: `Error: ${errorMessage}`,
+              callId: lastCallId || ""
+            }
+          }));
+        }
       }
       setIsLoading(false);
-      if (lastKey) {
-        setHistory((prev) => __spreadProps(__spreadValues({}, prev), {
-          [lastKey]: {
-            content: `Error: ${errorMessage}`,
-            callId: lastCallId || ""
-          }
-        }));
-      }
     }
   }, [llmError, lastKey, lastCallId]);
   useEffect7(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hef2024/llmasaservice-ui",
-  "version": "0.22.10",
+  "version": "0.22.11",
   "description": "Prebuilt UI components for LLMAsAService.io",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/AIChatPanel.css

@@ -2352,4 +2352,4 @@
 
 .dark-theme .ai-chat-email-edit-button:hover {
   background-color: #374151;
-}
+}

package/src/AIChatPanel.tsx

@@ -797,6 +797,7 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
   const [copiedCallId, setCopiedCallId] = useState<string | null>(null);
   const [feedbackCallId, setFeedbackCallId] = useState<{ callId: string; type: 'up' | 'down' } | null>(null);
   const [error, setError] = useState<{ message: string; code?: string } | null>(null);
+  const lastProcessedErrorRef = useRef<string | null>(null);
 
   // Email & Save state
   const [emailSent, setEmailSent] = useState(false);
@@ -1520,6 +1521,7 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     
     // Clear any previous errors
     setError(null);
+    lastProcessedErrorRef.current = null; // Allow new errors to be processed
     
     // Reset scroll tracking for new message - enable auto-scroll
     setUserHasScrolled(false);
@@ -1632,12 +1634,44 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
           // Error callback - handle errors immediately
           console.log('[AIChatPanel] Error callback triggered:', errorMsg);
           
+          // Check if this is a user-initiated abort
+          const isAbortError = errorMsg.toLowerCase().includes('abort') || 
+                               errorMsg.toLowerCase().includes('canceled') ||
+                               errorMsg.toLowerCase().includes('cancelled');
+          
+          if (isAbortError) {
+            // User canceled the request - don't show error banner
+            console.log('[AIChatPanel] Request was aborted by user');
+            // Don't set error state - no red banner
+            
+            // Update history to show cancellation
+            if (promptKey) {
+              setHistory((prev) => ({
+                ...prev,
+                [promptKey]: {
+                  content: 'Response canceled',
+                  callId: lastCallId || '',
+                },
+              }));
+            }
+          }
           // Detect 413 Content Too Large error
-          if (errorMsg.includes('413') || errorMsg.toLowerCase().includes('content too large')) {
+          else if (errorMsg.includes('413') || errorMsg.toLowerCase().includes('content too large')) {
             setError({
               message: 'The context is too large to process. Please start a new conversation or reduce the amount of context.',
               code: '413',
             });
+            
+            // Update history to show error
+            if (promptKey) {
+              setHistory((prev) => ({
+                ...prev,
+                [promptKey]: {
+                  content: `Error: ${errorMsg}`,
+                  callId: lastCallId || '',
+                },
+              }));
+            }
           }
           // Detect other network errors
           else if (errorMsg.toLowerCase().includes('network error') || errorMsg.toLowerCase().includes('fetch')) {
@@ -1645,6 +1679,17 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
               message: 'Network error. Please check your connection and try again.',
               code: 'NETWORK_ERROR',
             });
+            
+            // Update history to show error
+            if (promptKey) {
+              setHistory((prev) => ({
+                ...prev,
+                [promptKey]: {
+                  content: `Error: ${errorMsg}`,
+                  callId: lastCallId || '',
+                },
+              }));
+            }
           }
           // Generic error
           else {
@@ -1652,21 +1697,21 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
               message: errorMsg,
               code: 'UNKNOWN_ERROR',
             });
+            
+            // Update history to show error
+            if (promptKey) {
+              setHistory((prev) => ({
+                ...prev,
+                [promptKey]: {
+                  content: `Error: ${errorMsg}`,
+                  callId: lastCallId || '',
+                },
+              }));
+            }
           }
           
           // Reset loading state
           setIsLoading(false);
-          
-          // Update history to show error
-          if (promptKey) {
-            setHistory((prev) => ({
-              ...prev,
-              [promptKey]: {
-                content: `Error: ${errorMsg}`,
-                callId: lastCallId || '',
-              },
-            }));
-          }
         }
       );
       
@@ -1959,17 +2004,49 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
   // Monitor for errors from useLLM hook
   useEffect(() => {
     if (llmError && llmError.trim()) {
+      // Skip if we've already processed this exact error
+      if (lastProcessedErrorRef.current === llmError) {
+        console.log('[AIChatPanel] Skipping duplicate error:', llmError);
+        return;
+      }
+      
       console.log('[AIChatPanel] Error detected:', llmError);
+      lastProcessedErrorRef.current = llmError;
       
       // Parse error message to detect specific error types
       const errorMessage = llmError;
       
+      // Check if this is a user-initiated abort
+      const isAbortError = errorMessage.toLowerCase().includes('abort') || 
+                           errorMessage.toLowerCase().includes('canceled') ||
+                           errorMessage.toLowerCase().includes('cancelled');
+      
+      if (isAbortError) {
+        // User canceled the request - don't show error banner
+        console.log('[AIChatPanel] Request was aborted by user (useEffect)');
+        // Don't set error state - no red banner
+        
+        // Don't update history here - the error callback in send() already handled it
+        // with the correct promptKey. Updating here with lastKey can affect the wrong entry
+        // if the user has already submitted a new prompt.
+      }
       // Detect 413 Content Too Large error
-      if (errorMessage.includes('413') || errorMessage.toLowerCase().includes('content too large')) {
+      else if (errorMessage.includes('413') || errorMessage.toLowerCase().includes('content too large')) {
         setError({
           message: 'The context is too large to process. Please start a new conversation or reduce the amount of context.',
           code: '413',
         });
+        
+        // Update history to show error
+        if (lastKey) {
+          setHistory((prev) => ({
+            ...prev,
+            [lastKey]: {
+              content: `Error: ${errorMessage}`,
+              callId: lastCallId || '',
+            },
+          }));
+        }
       }
       // Detect other network errors
       else if (errorMessage.toLowerCase().includes('network error') || errorMessage.toLowerCase().includes('fetch')) {
@@ -1977,6 +2054,17 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
           message: 'Network error. Please check your connection and try again.',
           code: 'NETWORK_ERROR',
         });
+        
+        // Update history to show error
+        if (lastKey) {
+          setHistory((prev) => ({
+            ...prev,
+            [lastKey]: {
+              content: `Error: ${errorMessage}`,
+              callId: lastCallId || '',
+            },
+          }));
+        }
       }
       // Generic error
       else {
@@ -1984,21 +2072,21 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
           message: errorMessage,
           code: 'UNKNOWN_ERROR',
         });
+        
+        // Update history to show error
+        if (lastKey) {
+          setHistory((prev) => ({
+            ...prev,
+            [lastKey]: {
+              content: `Error: ${errorMessage}`,
+              callId: lastCallId || '',
+            },
+          }));
+        }
       }
       
       // Reset loading state
       setIsLoading(false);
-      
-      // Update history to show error
-      if (lastKey) {
-        setHistory((prev) => ({
-          ...prev,
-          [lastKey]: {
-            content: `Error: ${errorMessage}`,
-            callId: lastCallId || '',
-          },
-        }));
-      }
     }
   }, [llmError, lastKey, lastCallId]);