@hef2024/llmasaservice-ui 0.19.0 → 0.20.0

package/src/ChatPanel.css

@@ -1090,4 +1090,115 @@ button[data-pending="true"]::after {
 
 .searching-section {
   border-left: 3px solid #7b68ee;
+}
+
+/* ============================================================================
+   Error Banner
+============================================================================ */
+
+.error-banner {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 12px 16px;
+  margin: 12px 16px;
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  border-radius: 8px;
+  animation: slideDown 0.2s ease-out;
+}
+
+.dark-theme .error-banner {
+  background: #7f1d1d;
+  border-color: #991b1b;
+}
+
+.error-banner__icon {
+  flex-shrink: 0;
+  color: #dc2626;
+  margin-top: 2px;
+  width: 20px;
+  height: 20px;
+}
+
+.error-banner__icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.dark-theme .error-banner__icon {
+  color: #fca5a5;
+}
+
+.error-banner__content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.error-banner__message {
+  color: #991b1b;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.4;
+}
+
+.dark-theme .error-banner__message {
+  color: #fecaca;
+}
+
+.error-banner__hint {
+  color: #b91c1c;
+  font-size: 13px;
+  line-height: 1.4;
+}
+
+.dark-theme .error-banner__hint {
+  color: #fca5a5;
+  opacity: 0.8;
+}
+
+.error-banner__close {
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  padding: 4px;
+  cursor: pointer;
+  color: #991b1b;
+  border-radius: 4px;
+  transition: background-color 0.15s;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.error-banner__close svg {
+  width: 16px;
+  height: 16px;
+}
+
+.dark-theme .error-banner__close {
+  color: #fca5a5;
+}
+
+.error-banner__close:hover {
+  background: rgba(220, 38, 38, 0.1);
+}
+
+.dark-theme .error-banner__close:hover {
+  background: rgba(252, 165, 165, 0.1);
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(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,14 @@ 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
+    // when the history update effect runs
+    setResponse("");
 
     // Auto-set email if valid before proceeding
     if (emailInput && isEmailAddress(emailInput) && !emailInputSet) {
@@ -2297,7 +2363,9 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
           true,
           service,
           convId,
-          controller
+          controller,
+          undefined, // onComplete
+          (errorMsg: string) => handleError(errorMsg) // onError
         );
 
         setLastPrompt(nextPromptToSend);
@@ -2692,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">
@@ -3153,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());