@hef2024/llmasaservice-ui 0.19.1 → 0.20.1

package/src/AgentPanel.tsx

@@ -159,7 +159,9 @@ const AgentPanel: React.FC<AgentPanelProps & ExtraProps> = ({
   useEffect(() => {
     const fetchAgentData = async () => {
       try {
-        const fetchUrl = `https://api.llmasaservice.io/agents/${agent}`;
+        const fetchUrl = url.endsWith("dev")
+          ? `https://8ftw8droff.execute-api.us-east-1.amazonaws.com/dev/agents/${agent}`
+          : `https://api.llmasaservice.io/agents/${agent}`;
 
         const response = await fetch(fetchUrl, {
           method: "GET",

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,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);
@@ -2404,15 +2467,23 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
   };
 
   const convertMarkdownToHTML = (markdown: string): string => {
-    const html = ReactDOMServer.renderToStaticMarkup(
+    const markdownContent = (
       <ReactMarkdown
-        className={markdownClass}
         remarkPlugins={[remarkGfm]}
         rehypePlugins={[rehypeRaw]}
       >
         {markdown}
       </ReactMarkdown>
     );
+    const html = ReactDOMServer.renderToStaticMarkup(
+      markdownClass ? (
+        <div className={markdownClass}>
+          {markdownContent}
+        </div>
+      ) : (
+        markdownContent
+      )
+    );
     return html;
   };
 
@@ -2697,17 +2768,59 @@ 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">
               <div className="response">
-                <ReactMarkdown
-                  className={markdownClass}
-                  remarkPlugins={[remarkGfm]}
-                  rehypePlugins={[rehypeRaw]}
-                >
-                  {initialMessage}
-                </ReactMarkdown>
+                {markdownClass ? (
+                  <div className={markdownClass}>
+                    <ReactMarkdown
+                      remarkPlugins={[remarkGfm]}
+                      rehypePlugins={[rehypeRaw]}
+                    >
+                      {initialMessage}
+                    </ReactMarkdown>
+                  </div>
+                ) : (
+                  <ReactMarkdown
+                    remarkPlugins={[remarkGfm]}
+                    rehypePlugins={[rehypeRaw]}
+                  >
+                    {initialMessage}
+                  </ReactMarkdown>
+                )}
               </div>
             </div>
           ) : null}
@@ -2782,9 +2895,8 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
                         // Get the processed content that includes action buttons from history
                         // During streaming, use the most recent history entry if it exists
                         if (lastKey && history[lastKey] && history[lastKey].content) {
-                          return (
+                          const content = (
                             <ReactMarkdown
-                              className={markdownClass}
                               remarkPlugins={[remarkGfm]}
                               rehypePlugins={[rehypeRaw]}
                               components={{ /*a: CustomLink,*/ code: CodeBlock }}
@@ -2792,22 +2904,34 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
                               {history[lastKey].content}
                             </ReactMarkdown>
                           );
+                          return markdownClass ? (
+                            <div className={markdownClass}>{content}</div>
+                          ) : (
+                            content
+                          );
                         }
                         
                         // Fallback to cleaned text if no processed history exists yet
                         const { cleanedText } = processThinkingTags(
                           response || ""
                         );
-                        return cleanedText && cleanedText.length > 0 ? (
-                          <ReactMarkdown
-                            className={markdownClass}
-                            remarkPlugins={[remarkGfm]}
-                            rehypePlugins={[rehypeRaw]}
-                            components={{ /*a: CustomLink,*/ code: CodeBlock }}
-                          >
-                            {cleanedText}
-                          </ReactMarkdown>
-                        ) : null;
+                        if (cleanedText && cleanedText.length > 0) {
+                          const content = (
+                            <ReactMarkdown
+                              remarkPlugins={[remarkGfm]}
+                              rehypePlugins={[rehypeRaw]}
+                              components={{ /*a: CustomLink,*/ code: CodeBlock }}
+                            >
+                              {cleanedText}
+                            </ReactMarkdown>
+                          );
+                          return markdownClass ? (
+                            <div className={markdownClass}>{content}</div>
+                          ) : (
+                            content
+                          );
+                        }
+                        return null;
                       })()}
                     </div>
                   ) : (
@@ -2818,14 +2942,25 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
                         renderThinkingBlocks()}
 
                       {/* Show the main content (cleaned of thinking tags) */}
-                      <ReactMarkdown
-                        className={markdownClass}
-                        remarkPlugins={[remarkGfm]}
-                        rehypePlugins={[rehypeRaw]}
-                        components={{ /*a: CustomLink,*/ code: CodeBlock }}
-                      >
-                        {processThinkingTags(historyEntry.content).cleanedText}
-                      </ReactMarkdown>
+                      {markdownClass ? (
+                        <div className={markdownClass}>
+                          <ReactMarkdown
+                            remarkPlugins={[remarkGfm]}
+                            rehypePlugins={[rehypeRaw]}
+                            components={{ /*a: CustomLink,*/ code: CodeBlock }}
+                          >
+                            {processThinkingTags(historyEntry.content).cleanedText}
+                          </ReactMarkdown>
+                        </div>
+                      ) : (
+                        <ReactMarkdown
+                          remarkPlugins={[remarkGfm]}
+                          rehypePlugins={[rehypeRaw]}
+                          components={{ /*a: CustomLink,*/ code: CodeBlock }}
+                        >
+                          {processThinkingTags(historyEntry.content).cleanedText}
+                        </ReactMarkdown>
+                      )}
                     </div>
                   )}
 
@@ -3158,6 +3293,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());

package/src/components/ui/Button.tsx

@@ -59,3 +59,4 @@ export default Button;
 
 
 
+

package/src/components/ui/Dialog.tsx

@@ -155,3 +155,4 @@ export default Dialog;
 
 
 
+

package/src/components/ui/Input.tsx

@@ -35,3 +35,4 @@ export default Input;
 
 
 
+

package/src/components/ui/Select.tsx

@@ -158,3 +158,4 @@ export default Select;
 
 
 
+

package/src/components/ui/ToolInfoModal.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+
+interface ToolInfoModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  data: { calls: any[]; responses: any[] } | null;
+}
+
+const ToolInfoModal: React.FC<ToolInfoModalProps> = ({
+  isOpen,
+  onClose,
+  data,
+}) => {
+  if (!isOpen || !data) return null;
+
+  return (
+    <div className="ai-chat-modal-overlay" onClick={onClose}>
+      <div
+        className="ai-chat-modal-content ai-chat-tool-info-modal"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="ai-chat-modal-header">
+          <h3>Tool Information</h3>
+          <button 
+            className="ai-chat-modal-close"
+            onClick={onClose}
+            aria-label="Close"
+          >
+            ×
+          </button>
+        </div>
+        
+        <div className="ai-chat-modal-body ai-chat-tool-info-container">
+          <div className="ai-chat-tool-info-section">
+            <h4>Tool Calls</h4>
+            <textarea
+              className="ai-chat-tool-info-json"
+              readOnly
+              value={JSON.stringify(data.calls, null, 2)}
+            />
+          </div>
+          <div className="ai-chat-tool-info-section">
+            <h4>Tool Responses</h4>
+            <textarea
+              className="ai-chat-tool-info-json"
+              readOnly
+              value={JSON.stringify(data.responses, null, 2)}
+            />
+          </div>
+        </div>
+        
+        <div className="ai-chat-modal-footer">
+          <button 
+            className="ai-chat-modal-button ai-chat-modal-button--primary"
+            onClick={onClose}
+          >
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ToolInfoModal;
+

package/src/components/ui/Tooltip.tsx

@@ -75,3 +75,4 @@ export default Tooltip;
 
 
 
+

package/src/components/ui/index.ts

@@ -22,3 +22,4 @@ export type { DialogProps, DialogFooterProps } from './Dialog';
 
 
 
+

package/src/hooks/useAgentRegistry.ts

@@ -106,6 +106,7 @@ export function useAgentRegistry(
 
         const data = await response.json();
         const agentData = Array.isArray(data) ? data[0] : data;
+        
 
         if (!agentData) {
           throw new Error(`No data returned for agent ${agentId}`);