@hef2024/llmasaservice-ui 0.20.0 → 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;
 }
 
 /**
@@ -677,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
@@ -703,6 +747,40 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
   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);
   const responseAreaRef = useRef<HTMLDivElement | null>(null);
@@ -722,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)
@@ -796,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)
@@ -907,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
   // ============================================================================
@@ -1226,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);
       
@@ -1314,7 +1598,6 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     clearFollowOnQuestionsNextPrompt,
     history,
     promptTemplate,
-    followOnPrompt,
     send,
     service,
     ensureConversation,
@@ -1447,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);
@@ -1548,6 +1832,15 @@ 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()) {
@@ -1594,6 +1887,50 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     }
   }, [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
   // ============================================================================
@@ -1603,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}
@@ -1615,7 +1952,7 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
         {children}
       </code>
     );
-  }, [prismStyle]);
+  }, [effectivePrismStyle]);
 
   // Agent suggestion card component for inline agent handoff
   const AgentSuggestionCard = React.memo(({ agentId, agentName, reason }: { 
@@ -1824,7 +2161,13 @@ 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>}
       
@@ -1858,9 +2201,23 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
         {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>
         )}
@@ -1895,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>
@@ -1916,13 +2285,25 @@ 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>
@@ -1974,6 +2355,27 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
                         </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>
                 )}
               </div>
@@ -2001,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">
@@ -2015,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}
@@ -2064,6 +2666,13 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
           </div>
         </div>
       )}
+      
+      {/* Modals */}
+      <ToolInfoModal
+        isOpen={isToolInfoModalOpen}
+        onClose={() => setIsToolInfoModalOpen(false)}
+        data={toolInfoData}
+      />
     </div>
   );
 };