@hef2024/llmasaservice-ui 0.19.1 → 0.20.0

package/src/ChatPanel.tsx

@@ -222,6 +222,9 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
   >([]);
   const [currentThinkingIndex, setCurrentThinkingIndex] = useState(0);
 
+  // State for error handling
+  const [error, setError] = useState<{ message: string; code?: string } | null>(null);
+
   // State for tracking user-resized textarea height
   const [userResizedHeight, setUserResizedHeight] = useState<number | null>(null);
 
@@ -680,7 +683,7 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
     fetchAndSetTools();
   }, [mcpServers, publicAPIUrl]);
 
-  const { send, response, idle, stop, lastCallId, setResponse } = useLLM({
+  const llmResult = useLLM({
     project_id: project_id,
     customer: currentCustomer,
     url: url,
@@ -694,6 +697,57 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
       };
     }) as [],
   });
+  
+  const { send, response, idle, stop, lastCallId, setResponse, error: llmError } = llmResult;
+
+  // Error handler function - reusable for both error state and callbacks
+  const handleError = useCallback((errorMessage: string, historyKey?: string) => {
+    console.log('[ChatPanel] Error detected:', errorMessage);
+    
+    // Detect 413 Content Too Large error
+    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',
+      });
+    }
+    // Detect other network errors
+    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',
+      });
+    }
+    // Generic error
+    else {
+      setError({
+        message: errorMessage,
+        code: 'UNKNOWN_ERROR',
+      });
+    }
+    
+    // Reset loading state
+    setIsLoading(false);
+    
+    // Update history to show error
+    const keyToUse = historyKey || lastKey;
+    if (keyToUse) {
+      setHistory((prev) => ({
+        ...prev,
+        [keyToUse]: {
+          content: `Error: ${errorMessage}`,
+          callId: lastCallId || '',
+        },
+      }));
+    }
+  }, [lastKey, lastCallId]);
+
+  // Monitor for errors from useLLM hook (for errors not caught by callback)
+  useEffect(() => {
+    if (llmError && llmError.trim()) {
+      handleError(llmError);
+    }
+  }, [llmError, handleError]);
 
   // Centralized action processing function to eliminate duplication
   const processActionsOnContent = useCallback((
@@ -1459,7 +1513,9 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
         true,
         service,
         currentConversation,
-        lastController
+        lastController,
+        undefined, // onComplete
+        (errorMsg: string) => handleError(errorMsg) // onError
       );
     } catch (error) {
       console.error("Error in processing all tools:", error);
@@ -1941,7 +1997,9 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
             true,
             service,
             convId,
-            controller
+            controller,
+            undefined, // onComplete
+            (errorMsg: string) => handleError(errorMsg) // onError
           );
 
           // Store the context in component state
@@ -2153,6 +2211,9 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
     // Clear thinking blocks for new response
     setThinkingBlocks([]);
     setCurrentThinkingIndex(0);
+    
+    // Clear any previous errors
+    setError(null);
 
     // IMPORTANT: Clear the response BEFORE setting new lastKey
     // This prevents the old response from being written to the new history entry
@@ -2302,7 +2363,9 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
           true,
           service,
           convId,
-          controller
+          controller,
+          undefined, // onComplete
+          (errorMsg: string) => handleError(errorMsg) // onError
         );
 
         setLastPrompt(nextPromptToSend);
@@ -2697,6 +2760,38 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
         className={"llm-panel" + (theme === "light" ? "" : " dark-theme")}
       >
         {title && title !== "" ? <div className="title">{title}</div> : null}
+        
+        {/* Error Banner */}
+        {error && (
+          <div className="error-banner">
+            <div className="error-banner__icon">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <circle cx="12" cy="12" r="10" />
+                <line x1="12" x2="12" y1="8" y2="12" />
+                <line x1="12" x2="12.01" y1="16" y2="16" />
+              </svg>
+            </div>
+            <div className="error-banner__content">
+              <div className="error-banner__message">{error.message}</div>
+              {error.code === '413' && (
+                <div className="error-banner__hint">
+                  Try starting a new conversation or reducing the amount of information being sent.
+                </div>
+              )}
+            </div>
+            <button 
+              className="error-banner__close"
+              onClick={() => setError(null)}
+              aria-label="Dismiss error"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <line x1="18" x2="6" y1="6" y2="18" />
+                <line x1="6" x2="18" y1="6" y2="18" />
+              </svg>
+            </button>
+          </div>
+        )}
+        
         <div className="responseArea" ref={responseAreaRef}>
           {initialMessage && initialMessage !== "" ? (
             <div className="history-entry">
@@ -3158,6 +3253,7 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
                   setIsToolInfoModalOpen(false);
                   setToolInfoData(null);
                   setJustReset(true);
+                  setError(null); // Clear any errors
 
                   // Create a new AbortController for future requests
                   setLastController(new AbortController());