@hef2024/llmasaservice-ui 0.19.1 → 0.20.1

package/src/AIChatPanel.tsx

@@ -11,6 +11,7 @@ import React, {
   useRef,
   useState,
 } from 'react';
+import ReactDOMServer from 'react-dom/server';
 import { LLMAsAServiceCustomer, useLLM } from 'llmasaservice-client';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
@@ -19,6 +20,7 @@ import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import materialDark from 'react-syntax-highlighter/dist/esm/styles/prism/material-dark.js';
 import materialLight from 'react-syntax-highlighter/dist/esm/styles/prism/material-light.js';
 import { Button, ScrollArea, Tooltip } from './components/ui';
+import ToolInfoModal from './components/ui/ToolInfoModal';
 import './AIChatPanel.css';
 
 // ============================================================================
@@ -89,6 +91,29 @@ export interface AIChatPanelProps {
 
   // Callback when a new conversation is created via API
   onConversationCreated?: (conversationId: string) => void;
+
+  // UI Customization Props (from ChatPanel)
+  cssUrl?: string;
+  markdownClass?: string;
+  width?: string;
+  height?: string;
+  scrollToEnd?: boolean;
+  prismStyle?: any; // PrismStyle type from react-syntax-highlighter
+
+  // Email & Save Props
+  showSaveButton?: boolean;
+  showEmailButton?: boolean;
+  messages?: { role: "user" | "assistant"; content: string }[];
+
+  // Call-to-Action Props
+  showCallToAction?: boolean;
+  callToActionButtonText?: string;
+  callToActionEmailAddress?: string;
+  callToActionEmailSubject?: string;
+
+  // Customer Email Capture Props
+  customerEmailCaptureMode?: "HIDE" | "OPTIONAL" | "REQUIRED";
+  customerEmailCapturePlaceholder?: string;
 }
 
 /**
@@ -235,6 +260,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
 // ============================================================================
@@ -662,6 +702,25 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
   maxContextTokens = 8000,
   enableContextDetailView = false,
   onConversationCreated,
+  // UI Customization Props
+  cssUrl,
+  markdownClass,
+  width,
+  height,
+  scrollToEnd = false,
+  prismStyle,
+  // Email & Save Props
+  showSaveButton = true,
+  showEmailButton = true,
+  messages = [],
+  // Call-to-Action Props
+  showCallToAction = false,
+  callToActionButtonText = 'Submit',
+  callToActionEmailAddress = '',
+  callToActionEmailSubject = 'Agent CTA submitted',
+  // Customer Email Capture Props
+  customerEmailCaptureMode = 'HIDE',
+  customerEmailCapturePlaceholder = 'Please enter your email...',
 }) => {
   // ============================================================================
   // API URL
@@ -685,6 +744,42 @@ 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);
+
+  // Email & Save state
+  const [emailSent, setEmailSent] = useState(false);
+
+  // Tool Info Modal state
+  const [isToolInfoModalOpen, setIsToolInfoModalOpen] = useState(false);
+  const [toolInfoData, setToolInfoData] = useState<{ calls: any[]; responses: any[] } | null>(null);
+
+  // Call-to-Action state
+  const [callToActionSent, setCallToActionSent] = useState(false);
+  const [CTAClickedButNoEmail, setCTAClickedButNoEmail] = useState(false);
+
+  // Customer Email Capture state
+  const [emailInput, setEmailInput] = useState(customer?.customer_user_email ?? '');
+  const [emailInputSet, setEmailInputSet] = useState(false);
+  const [emailValid, setEmailValid] = useState(true);
+  const [showEmailPanel, setShowEmailPanel] = useState(customerEmailCaptureMode !== 'HIDE');
+  const [emailClickedButNoEmail, setEmailClickedButNoEmail] = useState(false);
+
+  // Tool Approval state (for MCP tools)
+  const [pendingToolRequests, setPendingToolRequests] = useState<any[]>([]);
+  const [sessionApprovedTools, setSessionApprovedTools] = useState<string[]>([]);
+  const [alwaysApprovedTools, setAlwaysApprovedTools] = useState<string[]>([]);
+
+  // Email capture mode effect - like ChatPanel
+  useEffect(() => {
+    setShowEmailPanel(customerEmailCaptureMode !== 'HIDE');
+
+    if (customerEmailCaptureMode === 'REQUIRED') {
+      if (!isEmailAddress(emailInput)) {
+        setEmailValid(false);
+      }
+    }
+  }, [customerEmailCaptureMode, emailInput]);
 
   // Refs
   const bottomRef = useRef<HTMLDivElement | null>(null);
@@ -705,6 +800,8 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
   const latestHistoryRef = useRef<Record<string, HistoryEntry>>(initialHistory);
   // Track if we've sent the initial prompt (prevents loops)
   const initialPromptSentRef = useRef<boolean>(false);
+  // Track the last followOnPrompt to detect changes (for auto-submit trigger)
+  const lastFollowOnPromptRef = useRef<string>('');
 
   // Sync new entries from initialHistory into local history state
   // This allows parent components to inject messages (e.g., page-based agent suggestions)
@@ -752,6 +849,7 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     lastCallId,
     stop,
     setResponse,
+    error: llmError,
   } = llmResult;
   
   // Tool-related properties (may not exist on all versions of useLLM)
@@ -778,9 +876,9 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
   // ============================================================================
   // Memoized Values
   // ============================================================================
-  const prismStyle = useMemo(
-    () => (theme === 'light' ? materialLight : materialDark),
-    [theme]
+  const effectivePrismStyle = useMemo(
+    () => prismStyle ?? (theme === 'light' ? materialLight : materialDark),
+    [prismStyle, theme]
   );
 
   // Browser info for context (matches ChatPanel)
@@ -889,6 +987,215 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
   const currentAgentLabel = currentAgentInfo.label;
   const currentAgentAvatarUrl = currentAgentInfo.avatarUrl;
 
+  // ============================================================================
+  // Helper Functions
+  // ============================================================================
+
+  // Email validation helper
+  const isEmailAddress = (email: string): boolean => {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email);
+  };
+
+  // Convert conversation history to standalone HTML file
+  // Convert markdown to HTML - like ChatPanel
+  const convertMarkdownToHTML = (markdown: string): string => {
+    const html = ReactDOMServer.renderToStaticMarkup(
+      <div className={markdownClass}>
+        <ReactMarkdown
+          remarkPlugins={[remarkGfm]}
+          rehypePlugins={[rehypeRaw]}
+        >
+          {markdown}
+        </ReactMarkdown>
+      </div>
+    );
+    return html;
+  };
+
+  // Convert conversation history to HTML - like ChatPanel
+  const convertHistoryToHTML = (history: Record<string, HistoryEntry>): string => {
+    const stylesheet = `
+        <style>
+      .conversation-history {
+        font-family: Arial, sans-serif;
+        line-height: 1.5;
+      }
+      .history-entry {
+        margin-bottom: 15px;
+      }
+      .prompt-container, .response-container {
+        margin-bottom: 10px;
+      }
+      .prompt, .response {
+        display: block;
+        margin: 5px 0;
+        padding: 10px;
+        border-radius: 5px;
+        max-width: 80%;
+      }
+      .prompt {
+        background-color: #efefef;
+        margin-left: 0;
+      }
+      .response {
+        background-color: #f0fcfd;
+        margin-left: 25px;
+      }
+    </style>
+`;
+
+    let html = `
+    <html>
+      <head>
+        ${stylesheet}
+      </head>
+      <body>
+        <h1>Conversation History (${new Date().toLocaleString()})</h1>
+        <div class="conversation-history">
+  `;
+
+    Object.entries(history).forEach(([prompt, response], index) => {
+      if (hideInitialPrompt && index === 0) {
+        html += `
+        <div class="history-entry">
+          <div class="response-container">
+            <div class="response">${convertMarkdownToHTML(response.content)}</div>
+          </div>
+        </div>
+      `;
+      } else {
+        html += `
+      <div class="history-entry">
+        <div class="prompt-container">
+          <div class="prompt">${convertMarkdownToHTML(
+            formatPromptForDisplay(prompt)
+          )}</div>
+        </div>
+        <div class="response-container">
+          <div class="response">${convertMarkdownToHTML(response.content)}</div>
+        </div>
+      </div>
+    `;
+      }
+    });
+
+    html += `
+        </div>
+      </body>
+    </html>
+  `;
+
+    return html;
+  };
+
+  // Save HTML to file - like ChatPanel
+  const saveHTMLToFile = (html: string, filename: string) => {
+    const blob = new Blob([html], { type: 'text/html' });
+    const link = document.createElement('a');
+    link.href = URL.createObjectURL(blob);
+    link.download = filename;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
+  // Download conversation as HTML file
+  const saveAsHTMLFile = useCallback(() => {
+    saveHTMLToFile(
+      convertHistoryToHTML(history),
+      `conversation-${new Date().toISOString()}.html`
+    );
+    interactionClicked(lastCallId || '', 'save');
+  }, [history, lastCallId]);
+
+  const handleSendEmail = (to: string, from: string) => {
+    sendConversationsViaEmail(to, `Conversation History from ${title}`, from);
+    interactionClicked(lastCallId || '', 'email', to);
+    setEmailSent(true);
+  };
+
+  const sendConversationsViaEmail = async (
+    to: string,
+    subject: string = `Conversation History from ${title}`,
+    from: string = ''
+  ) => {
+    fetch(`${publicAPIUrl}/share/email`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        to: to,
+        from: from,
+        subject: subject,
+        html: convertHistoryToHTML(history),
+        project_id: project_id ?? '',
+        customer: customer,
+        history: history,
+        title: title,
+      }),
+    });
+
+    await interactionClicked(lastCallId || '', 'email', from);
+  };
+
+
+  // Send CTA email
+  const sendCallToActionEmail = useCallback(async (from: string) => {
+    try {
+      await fetch(`${publicAPIUrl}/share/email`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          to: callToActionEmailAddress,
+          from: from,
+          subject: `${callToActionEmailSubject} from ${from}`,
+          html: convertHistoryToHTML(history),
+          project_id: project_id ?? '',
+          customer: customer,
+          history: history,
+          title: title,
+        }),
+      });
+
+      await interactionClicked(lastCallId || '', 'cta', from);
+      setCallToActionSent(true);
+    } catch (err) {
+      console.error('[AIChatPanel] Failed to send CTA email:', err);
+    }
+  }, [history, title, project_id, customer, lastCallId, publicAPIUrl, callToActionEmailAddress, callToActionEmailSubject]);
+
+  // Check if button should be disabled due to email capture requirements
+  const isDisabledDueToNoEmail = useCallback(() => {
+    if (customerEmailCaptureMode === 'REQUIRED' && !emailInputSet) {
+      return true;
+    }
+    return false;
+  }, [customerEmailCaptureMode, emailInputSet]);
+
+  // Handle tool approval for MCP tools
+  const handleToolApproval = useCallback((toolName: string, scope: 'once' | 'session' | 'always') => {
+    if (scope === 'session' || scope === 'always') {
+      setSessionApprovedTools((prev) => Array.from(new Set([...prev, toolName])));
+    }
+    if (scope === 'always') {
+      setAlwaysApprovedTools((prev) => Array.from(new Set([...prev, toolName])));
+    }
+
+    // Remove approved tool from pending list
+    setPendingToolRequests((prev) => prev.filter((r) => r.toolName !== toolName));
+    
+    console.log(`[AIChatPanel] Tool "${toolName}" approved with scope: ${scope}`);
+  }, []);
+
+  // Get unique tool names from pending requests
+  const getUniqueToolNames = useCallback(() => {
+    return Array.from(new Set(pendingToolRequests.map((r) => r.toolName)));
+  }, [pendingToolRequests]);
+
   // ============================================================================
   // Callbacks
   // ============================================================================
@@ -989,6 +1296,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 +1354,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,6 +1426,9 @@ 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);
     
@@ -1125,11 +1515,6 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
         fullPromptToSend = promptTemplate.replace('{{prompt}}', fullPromptToSend);
       }
       
-      // Add follow-on prompt
-      if (followOnPrompt) {
-        fullPromptToSend += `\n\n${followOnPrompt}`;
-      }
-      
       const newController = new AbortController();
       setLastController(newController);
       
@@ -1147,7 +1532,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);
@@ -1172,7 +1598,6 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     clearFollowOnQuestionsNextPrompt,
     history,
     promptTemplate,
-    followOnPrompt,
     send,
     service,
     ensureConversation,
@@ -1221,6 +1646,7 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     setJustReset(true);
     setLastController(new AbortController());
     setUserHasScrolled(false);
+    setError(null); // Clear any errors
     
     setTimeout(() => {
       setJustReset(false);
@@ -1271,6 +1697,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;
@@ -1301,12 +1730,13 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
   useEffect(() => {
     // Only auto-scroll if:
     // 1. We're actively streaming (!idle)
-    // 2. User hasn't manually scrolled up during this response
+    // 2. User hasn't manually scrolled up during this response (or scrollToEnd prop is true)
     // 3. We have content to show (response exists)
-    if (!idle && !userHasScrolled && response) {
+    const shouldAutoScroll = scrollToEnd || !userHasScrolled;
+    if (!idle && shouldAutoScroll && response) {
       scrollToBottom();
     }
-  }, [response, scrollToBottom, idle, userHasScrolled]); // Removed history dependency
+  }, [response, scrollToBottom, idle, userHasScrolled, scrollToEnd]); // Removed history dependency
 
   // Ref to track idle state for scroll handler (avoids stale closure)
   const idleRef = useRef(idle);
@@ -1402,6 +1832,105 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     }
   }, [initialPrompt, continueChat]);
 
+  // Auto-send followOnPrompt when it changes (like ChatPanel)
+  // This allows parent components to programmatically submit prompts to the current conversation
+  useEffect(() => {
+    if (followOnPrompt && followOnPrompt !== '' && followOnPrompt !== lastFollowOnPromptRef.current) {
+      lastFollowOnPromptRef.current = followOnPrompt;
+      continueChat(followOnPrompt);
+    }
+  }, [followOnPrompt, 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]);
+
+  // Dynamic CSS Injection
+  useEffect(() => {
+    // Clean up any previously added CSS from this component
+    const existingLinks = document.querySelectorAll(
+      'link[data-source="ai-chat-panel"]'
+    );
+    existingLinks.forEach((link) => link.parentNode?.removeChild(link));
+
+    const existingStyles = document.querySelectorAll(
+      'style[data-source="ai-chat-panel"]'
+    );
+    existingStyles.forEach((style) => style.parentNode?.removeChild(style));
+
+    if (cssUrl) {
+      if (cssUrl.startsWith('http://') || cssUrl.startsWith('https://')) {
+        // If it's a URL, create a link element
+        const link = document.createElement('link');
+        link.href = cssUrl;
+        link.rel = 'stylesheet';
+        link.setAttribute('data-source', 'ai-chat-panel');
+        document.head.appendChild(link);
+      } else {
+        // If it's a CSS string, create a style element
+        const style = document.createElement('style');
+        style.textContent = cssUrl;
+        style.setAttribute('data-source', 'ai-chat-panel');
+        document.head.appendChild(style);
+      }
+    }
+
+    // Clean up when component unmounts
+    return () => {
+      const links = document.querySelectorAll(
+        'link[data-source="ai-chat-panel"]'
+      );
+      links.forEach((link) => link.parentNode?.removeChild(link));
+
+      const styles = document.querySelectorAll(
+        'style[data-source="ai-chat-panel"]'
+      );
+      styles.forEach((style) => style.parentNode?.removeChild(style));
+    };
+  }, [cssUrl]);
+
   // ============================================================================
   // Render Helpers
   // ============================================================================
@@ -1411,7 +1940,7 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     const match = /language-(\w+)/.exec(className || '');
     return !inline && match ? (
       <SyntaxHighlighter
-        style={prismStyle}
+        style={effectivePrismStyle}
         language={match[1]}
         PreTag="div"
         {...props}
@@ -1423,14 +1952,23 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
         {children}
       </code>
     );
-  }, [prismStyle]);
+  }, [effectivePrismStyle]);
 
   // 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
@@ -1547,15 +2085,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(() => ({
@@ -1623,19 +2161,63 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
   const panelClasses = ['ai-chat-panel', theme === 'dark' ? 'dark-theme' : ''].filter(Boolean).join(' ');
 
   return (
-    <div className={panelClasses}>
+    <div 
+      className={panelClasses}
+      style={{ 
+        ...(width && { width }), 
+        ...(height && { height }) 
+      }}
+    >
       {/* 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 */}
         {initialMessage && (
           <div className="ai-chat-message ai-chat-message--assistant">
             <div className="ai-chat-message__content">
-              <ReactMarkdown 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>
         )}
@@ -1670,13 +2252,25 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
                       {thinkingBlocks.length > 0 && renderThinkingBlocks()}
                       
                       {processedContent ? (
-                        <ReactMarkdown
-                          remarkPlugins={[remarkGfm]}
-                          rehypePlugins={[rehypeRaw]}
-                          components={markdownComponents}
-                        >
-                          {processedContent}
-                        </ReactMarkdown>
+                        markdownClass ? (
+                          <div className={markdownClass}>
+                            <ReactMarkdown
+                              remarkPlugins={[remarkGfm]}
+                              rehypePlugins={[rehypeRaw]}
+                              components={markdownComponents}
+                            >
+                              {processedContent}
+                            </ReactMarkdown>
+                          </div>
+                        ) : (
+                          <ReactMarkdown
+                            remarkPlugins={[remarkGfm]}
+                            rehypePlugins={[rehypeRaw]}
+                            components={markdownComponents}
+                          >
+                            {processedContent}
+                          </ReactMarkdown>
+                        )
                       ) : (
                         <div className="ai-chat-loading">
                           <span>Thinking</span>
@@ -1691,52 +2285,96 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
                   ) : (
                     <>
                       {isLastEntry && thinkingBlocks.length > 0 && renderThinkingBlocks()}
-                      <ReactMarkdown
-                        remarkPlugins={[remarkGfm]}
-                        rehypePlugins={[rehypeRaw]}
-                        components={markdownComponents}
-                      >
-                        {processedContent}
-                      </ReactMarkdown>
+                      {markdownClass ? (
+                        <div className={markdownClass}>
+                          <ReactMarkdown
+                            remarkPlugins={[remarkGfm]}
+                            rehypePlugins={[rehypeRaw]}
+                            components={markdownComponents}
+                          >
+                            {processedContent}
+                          </ReactMarkdown>
+                        </div>
+                      ) : (
+                        <ReactMarkdown
+                          remarkPlugins={[remarkGfm]}
+                          rehypePlugins={[rehypeRaw]}
+                          components={markdownComponents}
+                        >
+                          {processedContent}
+                        </ReactMarkdown>
+                      )}
                     </>
                   )}
                 </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>
+                    
+                    {/* Tool Info Button - show if entry has tool data */}
+                    {(entry.toolCalls || entry.toolResponses) && (
+                      <button
+                        className="ai-chat-action-button"
+                        onClick={() => {
+                          setToolInfoData({
+                            calls: entry.toolCalls || [],
+                            responses: entry.toolResponses || [],
+                          });
+                          setIsToolInfoModalOpen(true);
+                        }}
+                        title="View tool information"
+                      >
+                        <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="16" y2="12" />
+                          <line x1="12" x2="12.01" y1="8" y2="8" />
+                        </svg>
+                      </button>
                     )}
                   </div>
                 )}
@@ -1765,6 +2403,109 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
         <div ref={bottomRef} />
       </ScrollArea>
       
+      {/* Tool Approval Panel */}
+      {pendingToolRequests.length > 0 && (
+        <div className="ai-chat-approve-tools-panel">
+          <div className="ai-chat-approve-tools-header">
+            Tool Approval Required
+          </div>
+          <div className="ai-chat-approve-tools-description">
+            The AI wants to use the following tools:
+          </div>
+          {getUniqueToolNames().map((toolName) => (
+            <div key={toolName} className="ai-chat-approve-tool-item">
+              <div className="ai-chat-approve-tool-name">{toolName}</div>
+              <div className="ai-chat-approve-tools-buttons">
+                <Button
+                  size="sm"
+                  variant="outline"
+                  className="ai-chat-approve-tools-button"
+                  onClick={() => handleToolApproval(toolName, 'once')}
+                >
+                  Once
+                </Button>
+                <Button
+                  size="sm"
+                  variant="outline"
+                  className="ai-chat-approve-tools-button"
+                  onClick={() => handleToolApproval(toolName, 'session')}
+                >
+                  This Session
+                </Button>
+                <Button
+                  size="sm"
+                  variant="default"
+                  className="ai-chat-approve-tools-button"
+                  onClick={() => handleToolApproval(toolName, 'always')}
+                >
+                  Always
+                </Button>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+      
+      {/* Button Container - Save, Email, CTA */}
+      {(showSaveButton || showEmailButton || showCallToAction) && (
+        <div className="ai-chat-button-container">
+          {showSaveButton && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={saveAsHTMLFile}
+              disabled={Object.keys(history).length === 0}
+              className="ai-chat-save-button"
+            >
+              💾 Save
+            </Button>
+          )}
+          
+          {showEmailButton && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => {
+                if (isEmailAddress(emailInput)) {
+                  setEmailInputSet(true);
+                  setEmailValid(true);
+                  handleSendEmail(emailInput, emailInput);
+                  setEmailClickedButNoEmail(false);
+                } else {
+                  setShowEmailPanel(true);
+                  setEmailValid(false);
+                  setEmailClickedButNoEmail(true);
+                }
+              }}
+              disabled={Object.keys(history).length === 0 || isDisabledDueToNoEmail()}
+              className="ai-chat-email-button"
+            >
+              📧 Email Conversation{emailSent ? ' ✓' : ''}
+            </Button>
+          )}
+          
+          {showCallToAction && (
+            <Button
+              variant={callToActionSent ? 'outline' : 'default'}
+              size="sm"
+              onClick={() => {
+                if (customerEmailCaptureMode !== 'HIDE' && !emailInputSet) {
+                  setCTAClickedButNoEmail(true);
+                  setTimeout(() => setCTAClickedButNoEmail(false), 3000);
+                  return;
+                }
+                const fromEmail = emailInput || customer?.customer_user_email || '';
+                sendCallToActionEmail(fromEmail);
+              }}
+              disabled={callToActionSent || Object.keys(history).length === 0}
+              className="ai-chat-cta-button"
+            >
+              {callToActionSent ? '✓ Submitted' : callToActionButtonText}
+            </Button>
+          )}
+        </div>
+      )}
+      
       {/* New Conversation Button */}
       {showNewConversationButton && (
         <div className="ai-chat-panel__new-conversation">
@@ -1779,6 +2520,103 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
         </div>
       )}
       
+      {/* Customer Email Capture Panel */}
+      {showEmailPanel && (
+        <>
+          {!emailValid && (
+            <div className="ai-chat-email-input-message">
+              {isDisabledDueToNoEmail()
+                ? "Let's get started - please enter your email"
+                : CTAClickedButNoEmail || emailClickedButNoEmail
+                ? 'Sure, we just need an email address to contact you'
+                : 'Email address is invalid'}
+            </div>
+          )}
+          <div className="ai-chat-email-input-container">
+            <input
+              type="email"
+              name="email"
+              id="email"
+              className={
+                emailValid
+                  ? emailInputSet
+                    ? 'ai-chat-email-input-set'
+                    : 'ai-chat-email-input'
+                  : 'ai-chat-email-input-invalid'
+              }
+              placeholder={customerEmailCapturePlaceholder}
+              value={emailInput}
+              onChange={(e) => {
+                const newEmail = e.target.value;
+                setEmailInput(newEmail);
+                // Reset validation while typing
+                if (!emailInputSet) {
+                  if (customerEmailCaptureMode === 'REQUIRED' && newEmail !== '') {
+                    setEmailValid(isEmailAddress(newEmail));
+                  } else {
+                    setEmailValid(true);
+                  }
+                }
+              }}
+              onBlur={() => {
+                // Auto-validate and set email when field loses focus
+                if (emailInput && isEmailAddress(emailInput) && !emailInputSet) {
+                  setEmailInputSet(true);
+                  setEmailValid(true);
+                  interactionClicked('', 'emailcapture', emailInput);
+                  
+                  // Handle pending actions
+                  if (CTAClickedButNoEmail) {
+                    sendCallToActionEmail(emailInput);
+                    setCTAClickedButNoEmail(false);
+                  }
+                  if (emailClickedButNoEmail) {
+                    handleSendEmail(emailInput, emailInput);
+                    setEmailClickedButNoEmail(false);
+                  }
+                } else if (customerEmailCaptureMode === 'REQUIRED' && emailInput !== '') {
+                  setEmailValid(isEmailAddress(emailInput));
+                }
+              }}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  if (isEmailAddress(emailInput)) {
+                    setEmailInputSet(true);
+                    setEmailValid(true);
+                    interactionClicked('', 'emailcapture', emailInput);
+                    
+                    // Handle pending actions
+                    if (CTAClickedButNoEmail) {
+                      sendCallToActionEmail(emailInput);
+                      setCTAClickedButNoEmail(false);
+                    }
+                    if (emailClickedButNoEmail) {
+                      handleSendEmail(emailInput, emailInput);
+                      setEmailClickedButNoEmail(false);
+                    }
+                  } else {
+                    setEmailValid(false);
+                  }
+                }
+              }}
+              disabled={false}
+            />
+            {emailInputSet && (
+              <button
+                className="ai-chat-email-edit-button"
+                onClick={() => {
+                  setEmailInputSet(false);
+                  setEmailValid(true);
+                }}
+                title="Edit email"
+              >
+                ✎
+              </button>
+            )}
+          </div>
+        </>
+      )}
+      
       {/* Input Area - Isolated component for performance */}
       <ChatInput
         placeholder={placeholder}
@@ -1828,6 +2666,13 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
           </div>
         </div>
       )}
+      
+      {/* Modals */}
+      <ToolInfoModal
+        isOpen={isToolInfoModalOpen}
+        onClose={() => setIsToolInfoModalOpen(false)}
+        data={toolInfoData}
+      />
     </div>
   );
 };