@hef2024/llmasaservice-ui 0.19.0 → 0.20.0

package/src/AIChatPanel.css

@@ -332,7 +332,7 @@
   display: flex;
   gap: 4px;
   margin-top: 8px;
-  opacity: 0;
+  opacity: 1;
   transition: opacity 0.2s;
 }
 
@@ -340,6 +340,31 @@
   opacity: 1;
 }
 
+.ai-chat-action-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  color: var(--ai-sidebar-text-muted, #9ca3af);
+  cursor: pointer;
+  transition: background-color 0.15s, color 0.15s;
+}
+
+.ai-chat-action-button:hover {
+  background-color: var(--ai-button-ghost-hover, rgba(0, 0, 0, 0.04));
+  color: var(--ai-chat-assistant-text, #374151);
+}
+
+.dark-theme .ai-chat-action-button:hover {
+  background-color: var(--ai-button-ghost-hover, rgba(255, 255, 255, 0.08));
+  color: var(--ai-chat-assistant-text, #e5e7eb);
+}
+
 /* ============================================================================
    Thinking Blocks
 ============================================================================ */
@@ -1616,3 +1641,97 @@
   }
 }
 
+/* ============================================================================
+   Error Banner
+============================================================================ */
+
+.ai-chat-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 .ai-chat-error-banner {
+  background: #7f1d1d;
+  border-color: #991b1b;
+}
+
+.ai-chat-error-banner__icon {
+  flex-shrink: 0;
+  color: #dc2626;
+  margin-top: 2px;
+}
+
+.dark-theme .ai-chat-error-banner__icon {
+  color: #fca5a5;
+}
+
+.ai-chat-error-banner__content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.ai-chat-error-banner__message {
+  color: #991b1b;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.4;
+}
+
+.dark-theme .ai-chat-error-banner__message {
+  color: #fecaca;
+}
+
+.ai-chat-error-banner__hint {
+  color: #b91c1c;
+  font-size: 13px;
+  line-height: 1.4;
+}
+
+.dark-theme .ai-chat-error-banner__hint {
+  color: #fca5a5;
+  opacity: 0.8;
+}
+
+.ai-chat-error-banner__close {
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  padding: 4px;
+  cursor: pointer;
+  color: #991b1b;
+  border-radius: 4px;
+  transition: background-color 0.15s;
+}
+
+.dark-theme .ai-chat-error-banner__close {
+  color: #fca5a5;
+}
+
+.ai-chat-error-banner__close:hover {
+  background: rgba(220, 38, 38, 0.1);
+}
+
+.dark-theme .ai-chat-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/AIChatPanel.tsx

@@ -235,6 +235,21 @@ const LLMAsAServiceLogo = () => (
   </svg>
 );
 
+const AlertCircleIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="ai-chat-icon-sm">
+    <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>
+);
+
+const CloseIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="ai-chat-icon-sm">
+    <line x1="18" x2="6" y1="6" y2="18" />
+    <line x1="6" x2="18" y1="6" y2="18" />
+  </svg>
+);
+
 // ============================================================================
 // Isolated Input Component - Prevents full re-renders on every keystroke
 // ============================================================================
@@ -685,6 +700,8 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
   const [newConversationConfirm, setNewConversationConfirm] = useState(false);
   const [justReset, setJustReset] = useState(false);
   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);
 
   // Refs
   const bottomRef = useRef<HTMLDivElement | null>(null);
@@ -752,6 +769,7 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     lastCallId,
     stop,
     setResponse,
+    error: llmError,
   } = llmResult;
   
   // Tool-related properties (may not exist on all versions of useLLM)
@@ -989,6 +1007,50 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     return displayPrompt;
   }, [hideRagContextInPrompt]);
 
+  // Built-in interaction tracking - reports to LLMAsAService API
+  const interactionClicked = useCallback(async (
+    callId: string,
+    action: string,
+    emailaddress: string = "",
+    comment: string = ""
+  ) => {
+    console.log(`[AIChatPanel] Interaction: ${action} for callId: ${callId}`);
+
+    // Ensure conversation exists
+    const convId = currentConversation || await ensureConversation();
+    
+    // Use the callId parameter or fallback to conversation ID
+    const finalCallId = callId || convId;
+    
+    // Get email from customer data
+    const isEmailAddress = (str: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(str);
+    const email = emailaddress && emailaddress !== ""
+      ? emailaddress
+      : isEmailAddress(customer?.customer_user_email ?? "")
+      ? customer?.customer_user_email
+      : isEmailAddress(customer?.customer_id ?? "")
+      ? customer?.customer_id
+      : "";
+
+    // Send feedback to API
+    try {
+      await fetch(`${publicAPIUrl}/feedback/${finalCallId}/${action}`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          project_id: project_id ?? "",
+          conversation_id: convId ?? "",
+          email: email,
+          comment: comment,
+        }),
+      });
+    } catch (err) {
+      console.error('[AIChatPanel] Failed to send feedback:', err);
+    }
+  }, [currentConversation, ensureConversation, customer, project_id, publicAPIUrl]);
+
   // Copy to clipboard
   const copyToClipboard = useCallback(async (text: string, callId: string) => {
     try {
@@ -1003,10 +1065,46 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
       await navigator.clipboard.writeText(cleanText);
       setCopiedCallId(callId);
       setTimeout(() => setCopiedCallId(null), 2000);
+      
+      // Report to API (built-in)
+      await interactionClicked(callId, "copy");
     } catch (err) {
       console.error('Failed to copy:', err);
     }
-  }, []);
+  }, [interactionClicked]);
+
+  // Handle thumbs up/down with visual feedback
+  const handleThumbsUp = useCallback(async (callId: string) => {
+    console.log('[AIChatPanel] Thumbs up clicked:', callId);
+    
+    // Show visual feedback
+    setFeedbackCallId({ callId, type: 'up' });
+    setTimeout(() => setFeedbackCallId(null), 2000);
+    
+    // Report to API (built-in)
+    await interactionClicked(callId, "thumbsup");
+    
+    // Call external callback if provided
+    if (thumbsUpClick) {
+      thumbsUpClick(callId);
+    }
+  }, [thumbsUpClick, interactionClicked]);
+
+  const handleThumbsDown = useCallback(async (callId: string) => {
+    console.log('[AIChatPanel] Thumbs down clicked:', callId);
+    
+    // Show visual feedback
+    setFeedbackCallId({ callId, type: 'down' });
+    setTimeout(() => setFeedbackCallId(null), 2000);
+    
+    // Report to API (built-in)
+    await interactionClicked(callId, "thumbsdown");
+    
+    // Call external callback if provided
+    if (thumbsDownClick) {
+      thumbsDownClick(callId);
+    }
+  }, [thumbsDownClick, interactionClicked]);
 
   // Scroll to bottom - throttled using RAF to prevent layout thrashing
   const scrollToBottom = useCallback(() => {
@@ -1039,9 +1137,17 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     setThinkingBlocks([]);
     setCurrentThinkingIndex(0);
     
+    // Clear any previous errors
+    setError(null);
+    
     // Reset scroll tracking for new message - enable auto-scroll
     setUserHasScrolled(false);
     
+    // 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('');
+    
     // Handle stop if not idle (matches ChatPanel)
     if (!idle) {
       stop(lastController);
@@ -1142,7 +1248,48 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
         true, // includeHistory
         service, // group_id from agent config
         convId, // Use the conversation ID from ensureConversation
-        newController
+        newController,
+        undefined, // onComplete
+        (errorMsg: string) => {
+          // Error callback - handle errors immediately
+          console.log('[AIChatPanel] Error callback triggered:', errorMsg);
+          
+          // Detect 413 Content Too Large error
+          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',
+            });
+          }
+          // Detect other network errors
+          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',
+            });
+          }
+          // Generic error
+          else {
+            setError({
+              message: errorMsg,
+              code: 'UNKNOWN_ERROR',
+            });
+          }
+          
+          // Reset loading state
+          setIsLoading(false);
+          
+          // Update history to show error
+          if (promptKey) {
+            setHistory((prev) => ({
+              ...prev,
+              [promptKey]: {
+                content: `Error: ${errorMsg}`,
+                callId: lastCallId || '',
+              },
+            }));
+          }
+        }
       );
       
       setLastMessages(messagesAndHistory);
@@ -1174,6 +1321,7 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     dataWithExtras,
     scrollToBottom,
     onConversationCreated,
+    setResponse,
   ]);
 
   // Handle suggestion click - directly sends like ChatPanel does
@@ -1215,6 +1363,7 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     setJustReset(true);
     setLastController(new AbortController());
     setUserHasScrolled(false);
+    setError(null); // Clear any errors
     
     setTimeout(() => {
       setJustReset(false);
@@ -1265,6 +1414,9 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     if (wasStreaming && isNowIdle && !hasNotifiedCompletionRef.current) {
       hasNotifiedCompletionRef.current = true;
       
+      // Reset loading state on completion
+      setIsLoading(false);
+      
       // Get the latest values from refs (stable, not from closure)
       const currentHistory = latestHistoryRef.current;
       const currentLastKey = lastKeyRef.current;
@@ -1396,6 +1548,52 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     }
   }, [initialPrompt, continueChat]);
 
+  // Monitor for errors from useLLM hook
+  useEffect(() => {
+    if (llmError && llmError.trim()) {
+      console.log('[AIChatPanel] Error detected:', llmError);
+      
+      // Parse error message to detect specific error types
+      const errorMessage = llmError;
+      
+      // 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
+      if (lastKey) {
+        setHistory((prev) => ({
+          ...prev,
+          [lastKey]: {
+            content: `Error: ${errorMessage}`,
+            callId: lastCallId || '',
+          },
+        }));
+      }
+    }
+  }, [llmError, lastKey, lastCallId]);
+
   // ============================================================================
   // Render Helpers
   // ============================================================================
@@ -1420,11 +1618,20 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
   }, [prismStyle]);
 
   // Agent suggestion card component for inline agent handoff
-  const AgentSuggestionCard = useCallback(({ agentId, agentName, reason }: { 
+  const AgentSuggestionCard = React.memo(({ agentId, agentName, reason }: { 
     agentId: string; 
     agentName: string; 
     reason: string;
   }) => {
+    // Auto-scroll when the agent suggestion card appears
+    useEffect(() => {
+      // Small delay to ensure the card is fully rendered in the DOM
+      const timer = setTimeout(() => {
+        scrollToBottom();
+      }, 100);
+      return () => clearTimeout(timer);
+    }, []); // Empty deps - only run on mount
+    
     if (!agentId || !onAgentChange) return null;
     
     // Validate agent ID - must be a valid UUID or exist in agentOptions
@@ -1541,15 +1748,15 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
             onAgentChange(agentId);
             // Scroll to bottom after a brief delay to let React re-render
             setTimeout(() => {
-              bottomRef.current?.scrollIntoView({ behavior: 'auto' });
-            }, 50);
+              scrollToBottom();
+            }, 100);
           }}
         >
           Switch
         </Button>
       </span>
     );
-  }, [onAgentChange, agentOptions, currentAgentId]);
+  });
 
   // Markdown components including custom agent-suggestion element
   const markdownComponents = useMemo(() => ({
@@ -1621,6 +1828,30 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
       {/* Title */}
       {title && <div className="ai-chat-panel__title">{title}</div>}
       
+      {/* Error Banner */}
+      {error && (
+        <div className="ai-chat-error-banner">
+          <div className="ai-chat-error-banner__icon">
+            <AlertCircleIcon />
+          </div>
+          <div className="ai-chat-error-banner__content">
+            <div className="ai-chat-error-banner__message">{error.message}</div>
+            {error.code === '413' && (
+              <div className="ai-chat-error-banner__hint">
+                Try starting a new conversation or reducing the amount of information being sent.
+              </div>
+            )}
+          </div>
+          <button 
+            className="ai-chat-error-banner__close"
+            onClick={() => setError(null)}
+            aria-label="Dismiss error"
+          >
+            <CloseIcon />
+          </button>
+        </div>
+      )}
+      
       {/* Messages Area */}
       <ScrollArea className="ai-chat-panel__messages" ref={responseAreaRef}>
         {/* Initial Message */}
@@ -1635,8 +1866,8 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
         )}
         
         {/* History */}
-        {Object.entries(history).map(([prompt, entry], index) => {
-          const isLastEntry = index === Object.keys(history).length - 1;
+        {Object.entries(history).map(([prompt, entry], index, entries) => {
+          const isLastEntry = index === entries.length - 1;
           // Check if this is a system message (injected by page context, etc.)
           const isSystemMessage = prompt.startsWith('__system__:');
           // Process thinking tags first, then apply actions at render time
@@ -1697,41 +1928,52 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
                 </div>
                 
                 {/* Action Buttons */}
-                {idle && !isLoading && (
+                {(!isLastEntry || !isLoading) && (
                   <div className="ai-chat-message__actions">
-                    <Tooltip content={copiedCallId === entry.callId ? 'Copied!' : 'Copy'}>
-                      <Button
-                        variant="ghost"
-                        size="icon"
-                        onClick={() => copyToClipboard(entry.content, entry.callId)}
-                      >
-                        <CopyIcon />
-                      </Button>
-                    </Tooltip>
+                    <button
+                      className="ai-chat-action-button"
+                      onClick={() => copyToClipboard(entry.content, entry.callId)}
+                      title={copiedCallId === entry.callId ? 'Copied!' : 'Copy'}
+                    >
+                      {copiedCallId === entry.callId ? (
+                        <span style={{ fontSize: '11px', fontWeight: 500 }}>Copied!</span>
+                      ) : (
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="ai-chat-icon-sm">
+                          <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+                          <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+                        </svg>
+                      )}
+                    </button>
                     
-                    {thumbsUpClick && (
-                      <Tooltip content="Good response">
-                        <Button
-                          variant="ghost"
-                          size="icon"
-                          onClick={() => thumbsUpClick(entry.callId)}
-                        >
-                          <ThumbsUpIcon />
-                        </Button>
-                      </Tooltip>
-                    )}
+                    <button
+                      className="ai-chat-action-button"
+                      onClick={() => handleThumbsUp(entry.callId)}
+                      title={feedbackCallId?.callId === entry.callId && feedbackCallId?.type === 'up' ? 'Thanks!' : 'Good response'}
+                      style={feedbackCallId?.callId === entry.callId && feedbackCallId?.type === 'up' ? { color: '#22c55e' } : undefined}
+                    >
+                      {feedbackCallId?.callId === entry.callId && feedbackCallId?.type === 'up' ? (
+                        <span style={{ fontSize: '11px', fontWeight: 500 }}>Thanks!</span>
+                      ) : (
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="ai-chat-icon-sm">
+                          <path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3" />
+                        </svg>
+                      )}
+                    </button>
                     
-                    {thumbsDownClick && (
-                      <Tooltip content="Poor response">
-                        <Button
-                          variant="ghost"
-                          size="icon"
-                          onClick={() => thumbsDownClick(entry.callId)}
-                        >
-                          <ThumbsDownIcon />
-                        </Button>
-                      </Tooltip>
-                    )}
+                    <button
+                      className="ai-chat-action-button"
+                      onClick={() => handleThumbsDown(entry.callId)}
+                      title={feedbackCallId?.callId === entry.callId && feedbackCallId?.type === 'down' ? 'Thanks!' : 'Poor response'}
+                      style={feedbackCallId?.callId === entry.callId && feedbackCallId?.type === 'down' ? { color: '#ef4444' } : undefined}
+                    >
+                      {feedbackCallId?.callId === entry.callId && feedbackCallId?.type === 'down' ? (
+                        <span style={{ fontSize: '11px', fontWeight: 500 }}>Thanks!</span>
+                      ) : (
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="ai-chat-icon-sm">
+                          <path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17" />
+                        </svg>
+                      )}
+                    </button>
                   </div>
                 )}
               </div>