@hef2024/llmasaservice-ui 0.19.0 → 0.20.0

package/AICHATPANEL-PORT-INVENTORY.md

@@ -0,0 +1,830 @@
+# AIChatPanel Port Inventory
+## Complete Feature Gap Analysis: ChatPanel → AIChatPanel
+
+**Last Updated:** Dec 15, 2025
+**Status:** 🚨 CRITICAL - Multiple core features missing
+
+---
+
+## Executive Summary
+
+This document catalogs ALL features present in `ChatPanel.tsx` that are missing from `AIChatPanel.tsx`. This is the authoritative checklist for achieving feature parity.
+
+**Current Status:**
+- ✅ Implemented: ~60%
+- ❌ Missing: ~40%
+- 🔶 Partial: Features that exist but differ in implementation
+
+---
+
+## 1. Missing Props (12 props)
+
+### 1.1 UI Customization Props
+| Prop | Type | Default (ChatPanel) | Status | Notes |
+|------|------|---------------------|--------|-------|
+| `cssUrl` | `string` | `""` | ❌ | Injects custom CSS (URL or inline) |
+| `markdownClass` | `string` | `null` | ❌ | Custom class for ReactMarkdown |
+| `width` | `string` | `"300px"` | ❌ | Panel width |
+| `height` | `string` | `"100vh"` | ❌ | Panel height |
+| `scrollToEnd` | `boolean` | `false` | ❌ | Auto-scroll behavior |
+| `prismStyle` | `PrismStyle` | theme-based | ❌ | Code syntax highlighting style |
+
+**ChatPanel Implementation:**
+```typescript:22:41:src/ChatPanel.tsx
+export interface ChatPanelProps {
+  project_id: string;
+  initialPrompt?: string;
+  initialMessage?: string;
+  title?: string;
+  placeholder?: string;
+  hideInitialPrompt?: boolean;
+  customer?: LLMAsAServiceCustomer;
+  messages?: { role: "user" | "assistant"; content: string }[];
+  data?: { key: string; data: string }[];
+  thumbsUpClick?: (callId: string) => void;
+  thumbsDownClick?: (callId: string) => void;
+  theme?: "light" | "dark";
+  cssUrl?: string;
+  markdownClass?: string;
+  width?: string;
+  height?: string;
+  url?: string | null;
+  scrollToEnd?: boolean;
+  prismStyle?: PrismStyle;
+```
+
+**Usage in ChatPanel:**
+- `cssUrl`: Lines 994-1038 - Dynamic CSS injection via `<link>` or `<style>` elements
+- `markdownClass`: Line 2800 - Applied to `ReactMarkdown` component
+- `width`/`height`: Line 2759 - Applied to root div inline styles
+- `prismStyle`: Line 114 - Passed to `SyntaxHighlighter`
+
+### 1.2 Email & CTA Props
+| Prop | Type | Default | Status | Notes |
+|------|------|---------|--------|-------|
+| `showSaveButton` | `boolean` | `true` | ❌ | Save conversation to HTML |
+| `showEmailButton` | `boolean` | `true` | ❌ | Email conversation |
+| `showCallToAction` | `boolean` | `false` | ❌ | Show CTA button |
+| `callToActionButtonText` | `string` | `"Submit"` | ❌ | CTA button label |
+| `callToActionEmailAddress` | `string` | `""` | ❌ | CTA recipient email |
+| `callToActionEmailSubject` | `string` | `"Agent CTA submitted"` | ❌ | CTA email subject |
+
+**ChatPanel Implementation:**
+```typescript:60:72:src/ChatPanel.tsx
+  showSaveButton?: boolean;
+  showEmailButton?: boolean;
+  showNewConversationButton?: boolean;
+  followOnQuestions?: string[];
+  clearFollowOnQuestionsNextPrompt?: boolean;
+  followOnPrompt?: string;
+  showPoweredBy?: boolean;
+  agent?: string | null;
+  conversation?: string | null;
+  showCallToAction?: boolean;
+  callToActionButtonText?: string;
+  callToActionEmailAddress?: string;
+  callToActionEmailSubject?: string;
+```
+
+**Rendering Location:** Lines 3206-3340 - Button container at bottom of panel
+
+### 1.3 Customer Email Capture Props
+| Prop | Type | Default | Status | Notes |
+|------|------|---------|--------|-------|
+| `customerEmailCaptureMode` | `"HIDE"` \| `"OPTIONAL"` \| `"REQUIRED"` | `"HIDE"` | ❌ | Email capture behavior |
+| `customerEmailCapturePlaceholder` | `string` | `"Please enter your email..."` | ❌ | Email input placeholder |
+
+**ChatPanel Implementation:**
+- State management: Lines 171-184
+- Validation logic: Lines 141-144, 2705-2710
+- UI rendering: Lines 3133-3182 (email input panel above textarea)
+
+### 1.4 Initial Messages Prop
+| Prop | Type | Default | Status | Notes |
+|------|------|---------|--------|-------|
+| `messages` | `{ role: "user" \| "assistant"; content: string }[]` | `[]` | ❌ | Pre-populate conversation history |
+
+**ChatPanel Usage:** Line 102 - Default value only, not actively used in current implementation
+
+---
+
+## 2. Missing Components (2 components)
+
+### 2.1 EmailModal
+**Status:** ❌ Missing
+
+**File:** `src/EmailModal.tsx`
+```typescript:1:57:src/EmailModal.tsx
+import React, { useState } from "react";
+import "./ChatPanel.css"; // Ensure this file contains the modal styles
+
+interface EmailModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSend: (to: string, from: string) => void;
+  defaultEmail?: string;
+}
+
+const EmailModal: React.FC<EmailModalProps> = ({ isOpen, onClose, onSend, defaultEmail }) => {
+  const [email, setEmail] = useState("");
+  const [emailFrom, setEmailFrom] = useState(defaultEmail || "");
+
+  const handleSend = () => {
+    onSend(email, emailFrom);
+    onClose();
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="modal-overlay">
+      <div className="modal-content">
+        <p className="modal-text">
+        Email Addresses
+        <br /> (If multiple, comma separate them)
+        </p>
+        <p>
+          <input
+            type="email"
+            width="100%"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            placeholder="To email address"
+          />
+        </p>
+        <p>
+          <input
+            type="email"
+            width="100%"
+            value={emailFrom}
+            onChange={(e) => setEmailFrom(e.target.value)}
+            placeholder="From email address (optional)"
+          />
+        </p>
+        <div className="modal-buttons">
+          <button onClick={onClose}>Cancel</button>
+          <button onClick={handleSend}>Send</button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default EmailModal;
+```
+
+**Integration in ChatPanel:**
+- Import: Line 19
+- State: Line 161
+- Usage: Lines 3345-3349
+- Trigger: Line 3303 (Email button click)
+
+### 2.2 ToolInfoModal
+**Status:** ❌ Missing
+
+**File:** `src/ToolInfoModal.tsx`
+```typescript:1:50:src/ToolInfoModal.tsx
+import React, { useEffect } from "react";
+import "./ChatPanel.css"; // Reuse styles or create specific ones
+
+interface ToolInfoModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  data: { calls: any[]; responses: any[] } | null;
+}
+
+const ToolInfoModal: React.FC<ToolInfoModalProps> = ({
+  isOpen,
+  onClose,
+  data,
+}) => {
+  if (!isOpen || !data) return null;
+
+  return (
+    <div className="modal-overlay" onClick={onClose}>
+      <div
+        className="modal-content tool-info-modal-content"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="tool-info-container">
+          <div className="tool-info-section">
+            <b>Tool Calls</b>
+            <textarea
+              className="tool-info-json"
+              readOnly
+              value={JSON.stringify(data.calls, null, 2)}
+            />
+          </div>
+          <div className="tool-info-section">
+            <b>Tool Responses</b>
+            <textarea
+              className="tool-info-json"
+              readOnly
+              value={JSON.stringify(data.responses, null, 2)}
+            />
+          </div>
+        </div>
+        <div className="modal-buttons">
+          <button onClick={onClose}>Close</button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ToolInfoModal;
+```
+
+**Integration in ChatPanel:**
+- Import: Line 20
+- State: Lines 162-166
+- Rendering: Lines 3078-3082
+- Trigger: Lines 3049-3071 (Tool info button in action buttons)
+
+---
+
+## 3. Missing Features (7 major features)
+
+### 3.1 Save to HTML
+**Status:** ❌ Missing
+
+**Description:** Download conversation as standalone HTML file
+
+**ChatPanel Implementation:**
+```typescript:2574:2598
+  const convertHistoryToHTML = (history: {
+    [key: string]: HistoryEntry;
+  }): string => {
+    return `
+    <!DOCTYPE html>
+    <html>
+    <head><title>Conversation History</title></head>
+    <body>
+    ${Object.entries(history)
+      .map(
+        ([prompt, historyEntry]) => `
+      <div>
+        <p><strong>User:</strong> ${formatPromptForDisplay(prompt)}</p>
+        <p><strong>Assistant:</strong></p>
+        ${ReactDOMServer.renderToStaticMarkup(
+          <ReactMarkdown>{historyEntry.content}</ReactMarkdown>
+        )}
+      </div>
+      `
+      )
+      .join("")}
+    </body>
+    </html>
+  `;
+  };
+```
+
+**Save Handler:**
+```typescript:2574:2598
+  const saveAsHTMLFile = () => {
+    const htmlContent = convertHistoryToHTML(history);
+    const blob = new Blob([htmlContent], { type: "text/html" });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = `conversation-${Date.now()}.html`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+
+    interactionClicked(lastCallId, "save");
+  };
+```
+
+**Dependencies:**
+- Import: Line 11 - `import ReactDOMServer from "react-dom/server"`
+- Button: Lines 3287-3300
+
+### 3.2 Email Sharing
+**Status:** ❌ Missing
+
+**Description:** Share conversation via email using API
+
+**API Endpoint:** `POST ${publicAPIUrl}/share/email`
+
+**Handler:**
+```typescript:2586:2605
+  const sendShareEmail = async (to: string, from: string) => {
+    const emailList = to.split(",").map((email) => email.trim());
+
+    await fetch(`${publicAPIUrl}/share/email`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        to: emailList,
+        from: from,
+        subject: "Your conversation from " + title,
+        html: convertHistoryToHTML(history),
+        project_id: project_id ?? "",
+        customer: currentCustomer,
+        history: history,
+        title: title,
+      }),
+    });
+
+    await interactionClicked(lastCallId, "email", from);
+  };
+```
+
+**Button & Modal:** Lines 3302-3320 (Email button), Lines 3345-3349 (EmailModal)
+
+### 3.3 Call-to-Action (CTA) System
+**Status:** ❌ Missing
+
+**Description:** Custom button that emails conversation to specified address
+
+**State Management:**
+- `callToActionSent`: Line 181
+- `CTAClickedButNoEmail`: Line 182
+
+**Handler:**
+```typescript:2607:2628
+  const sendCallToActionEmail = async (from: string) => {
+    const r = 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: currentCustomer,
+        history: history,
+        title: title,
+      }),
+    });
+
+    await interactionClicked(lastCallId, "cta", from);
+
+    setCallToActionSent(true);
+  };
+```
+
+**Button:** Lines 3323-3340
+
+### 3.4 Customer Email Capture Panel
+**Status:** ❌ Missing
+
+**Description:** Inline email input for capturing customer email (OPTIONAL or REQUIRED modes)
+
+**State:**
+- `emailInput`: Line 171
+- `emailInputSet`: Line 174
+- `emailValid`: Line 177
+- `showEmailPanel`: Line 178
+- `emailClickedButNoEmail`: Line 184
+
+**Rendering:** Lines 3133-3182
+```typescript:3133:3182
+          {showEmailPanel && !emailInputSet && (
+            <div className="customer-email-panel">
+              <input
+                type="email"
+                className="customer-email-input"
+                value={emailInput}
+                onChange={(e) => {
+                  setEmailInput(e.target.value);
+                  setEmailValid(isEmailAddress(e.target.value));
+                }}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") {
+                    if (isEmailAddress(emailInput)) {
+                      setEmailInputSet(true);
+                      setCurrentCustomer({
+                        ...currentCustomer,
+                        customer_user_email: emailInput,
+                      });
+                      interactionClicked("", "emailcapture", emailInput);
+                    } else {
+                      setEmailValid(false);
+                    }
+                  }
+                }}
+                placeholder={customerEmailCapturePlaceholder}
+              />
+              <button
+                className="email-set-button"
+                onClick={() => {
+                  if (isEmailAddress(emailInput)) {
+                    setEmailInputSet(true);
+                    setCurrentCustomer({
+                      ...currentCustomer,
+                      customer_user_email: emailInput,
+                    });
+                    interactionClicked("", "emailcapture", emailInput);
+                  } else {
+                    setEmailValid(false);
+                  }
+                }}
+              >
+                Set Email
+              </button>
+              {!emailValid && (
+                <div className="email-error-message">
+                  Please enter a valid email
+                </div>
+              )}
+            </div>
+          )}
+```
+
+**Validation:** Lines 2705-2710
+
+### 3.5 Tool Approval UI (MCP Tools)
+**Status:** ❌ Missing
+
+**Description:** User approval interface for MCP tool calls (once/session/always)
+
+**State:**
+- `pendingToolRequests`: Line 203
+- `sessionApprovedTools`: Line 230
+- `alwaysApprovedTools`: Line 231
+
+**Handler:**
+```typescript:2716:2734
+  const handleToolApproval = (
+    toolName: string,
+    scope: "once" | "session" | "always"
+  ) => {
+    if (scope === "session" || scope === "always") {
+      setSessionApprovedTools((p) => Array.from(new Set([...p, toolName])));
+    }
+    if (scope === "always") {
+      setAlwaysApprovedTools((p) => Array.from(new Set([...p, toolName])));
+    }
+
+    // process and remove just this tool's calls
+    const requestsToRun = pendingToolRequests.filter(
+      (r) => r.toolName === toolName
+    );
+    processGivenToolRequests(requestsToRun);
+    setPendingToolRequests((p) => p.filter((r) => r.toolName !== toolName));
+  };
+```
+
+**Rendering:** Lines 2927-2981 (Approval panel above action buttons when tools pending)
+
+**Auto-approval Effect:** Lines 2737-2754
+
+### 3.6 Progressive Actions System
+**Status:** ❌ Missing (AIChatPanel has basic actions, but not progressive)
+
+**Description:** Advanced action button system with streaming support and state management
+
+**Key Differences:**
+1. **Disabled during streaming:** Buttons show as placeholders until response completes
+2. **Stable button IDs:** Registry system prevents duplicate buttons during streaming
+3. **Deferred attachment:** Event handlers only attached once streaming finishes
+4. **History vs Streaming:** Different processing paths for historical vs live content
+
+**State:**
+- `allActions`: Line 190 - Merged array of user + built-in actions
+- `pendingButtonAttachments`: Line 247
+- `actionMatchRegistry`: Line 248 - Map for stable button IDs
+- `deferredActionsRef`: Line 249 - Buttons to finalize after streaming
+- `finalizedButtonsRef`: Line 251 - Prevent duplicate finalization
+- `actionSequenceRef`: Line 252 - Incremental ID generator
+- `buttonActionRegistry`: Line 254 - Fallback for event delegation
+
+**Processing Function:** Lines 761-939 `processActionsWithContext`
+
+**Finalization Logic:** Lines 550-730 (useEffect for button attachment)
+
+### 3.7 Dynamic CSS Injection
+**Status:** ❌ Missing
+
+**Description:** Inject custom CSS from URL or inline string
+
+**Implementation:** Lines 993-1038
+```typescript:993:1038
+  useEffect(() => {
+    // Clean up any previously added CSS from this component
+    const existingLinks = document.querySelectorAll(
+      'link[data-source="llmasaservice-ui"]'
+    );
+    existingLinks.forEach((link) => link.parentNode?.removeChild(link));
+
+    const existingStyles = document.querySelectorAll(
+      'style[data-source="llmasaservice-ui"]'
+    );
+    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";
+        // Add a data attribute to identify and remove this link later if needed
+        link.setAttribute("data-source", "llmasaservice-ui");
+        document.head.appendChild(link);
+        //console.log("Added CSS link", link);
+      } else {
+        // If it's a CSS string, create a style element
+        const style = document.createElement("style");
+        style.textContent = cssUrl;
+        // Add a data attribute to identify and remove this style later if needed
+        style.setAttribute("data-source", "llmasaservice-ui");
+        document.head.appendChild(style);
+        //console.log("Added inline CSS");
+      }
+    }
+
+    // Clean up when component unmounts
+    return () => {
+      const links = document.querySelectorAll(
+        'link[data-source="llmasaservice-ui"]'
+      );
+      links.forEach((link) => link.parentNode?.removeChild(link));
+
+      const styles = document.querySelectorAll(
+        'style[data-source="llmasaservice-ui"]'
+      );
+      styles.forEach((style) => style.parentNode?.removeChild(style));
+    };
+  }, [cssUrl]);
+```
+
+---
+
+## 4. Missing State Variables (15+ state variables)
+
+| State Variable | Type | Purpose | ChatPanel Line |
+|----------------|------|---------|----------------|
+| `nextPrompt` | `string` | Textarea value (OLD pattern) | 146 |
+| `hasScroll` | `boolean` | Tracks if scroll exists | 155 |
+| `textareaRef` | `Ref<HTMLTextAreaElement>` | Direct textarea ref | 158 |
+| `isAtBottom` | `boolean` | Scroll position tracking | 160 |
+| `isEmailModalOpen` | `boolean` | Email modal state | 161 |
+| `isToolInfoModalOpen` | `boolean` | Tool info modal state | 162 |
+| `toolInfoData` | `{calls, responses}` | Tool JSON data for modal | 163-166 |
+| `emailInput` | `string` | Customer email input | 171 |
+| `emailInputSet` | `boolean` | Email confirmed flag | 174 |
+| `emailValid` | `boolean` | Email validation state | 177 |
+| `showEmailPanel` | `boolean` | Show email capture UI | 178 |
+| `callToActionSent` | `boolean` | CTA submitted flag | 181 |
+| `CTAClickedButNoEmail` | `boolean` | CTA error state | 182 |
+| `emailSent` | `boolean` | Email sent confirmation | 183 |
+| `emailClickedButNoEmail` | `boolean` | Email error state | 184 |
+| `allActions` | `Action[]` | Combined user+built-in actions | 190 |
+| `pendingButtonAttachments` | `ButtonAttachment[]` | Buttons to finalize | 247 |
+| `pendingToolRequests` | `ToolRequest[]` | MCP tools awaiting approval | 203 |
+| `sessionApprovedTools` | `string[]` | Tools approved this session | 230 |
+| `alwaysApprovedTools` | `string[]` | Tools approved permanently | 231 |
+
+---
+
+## 5. Missing Helper Functions (10+ functions)
+
+| Function | Purpose | ChatPanel Lines |
+|----------|---------|-----------------|
+| `isEmailAddress()` | Email validation regex | 141-144 |
+| `extractValue()` | Template variable substitution | 1040-1065 |
+| `openUrlActionCallback()` | Built-in action: open URL | 1067-1075 |
+| `copyToClipboardCallback()` | Built-in action: copy text | 1077-1082 |
+| `showAlertCallback()` | Built-in action: show alert | 1085-1090 |
+| `sendFollowOnPromptCallback()` | Built-in action: send message | 1092-1099 |
+| `processActionsWithContext()` | Advanced action processing | 761-939 |
+| `convertHistoryToHTML()` | Convert conversation to HTML | 2574-2598 |
+| `saveAsHTMLFile()` | Download HTML file | 2561-2573 |
+| `sendShareEmail()` | Email conversation | 2586-2605 |
+| `sendCallToActionEmail()` | CTA email handler | 2607-2628 |
+| `isDisabledDueToNoEmail()` | Disable logic for email capture | 2705-2710 |
+| `getUniqueToolNames()` | Dedupe tool names | 2713-2714 |
+| `handleToolApproval()` | MCP tool approval handler | 2716-2734 |
+
+---
+
+## 6. Rendering Differences
+
+### 6.1 Button Container Layout
+**ChatPanel:** Lines 3206-3340
+- Separate container div (`.button-container-actions`)
+- Save, Email, New Conversation buttons in footer
+- CTA button conditional rendering
+
+**AIChatPanel:** Lines 2005-2016
+- Only New Conversation button
+- No Save/Email/CTA buttons
+
+### 6.2 Tool Info Button
+**ChatPanel:** Lines 3049-3071
+- Button in action container
+- Shows tool call/response JSON
+- Only visible if `hasToolData`
+
+**AIChatPanel:** ❌ Missing entirely
+
+### 6.3 Email Capture Panel
+**ChatPanel:** Lines 3133-3182
+- Inline panel above textarea
+- Conditional based on `customerEmailCaptureMode`
+- Validation and error messages
+
+**AIChatPanel:** ❌ Missing entirely
+
+### 6.4 Inline Styles
+**ChatPanel:** Line 2759
+```typescript
+<div
+  style={{ width: width, height: height }}
+  className={"llm-panel" + (theme === "light" ? "" : " dark-theme")}
+>
+```
+
+**AIChatPanel:** Line 1827
+```typescript
+<div className={panelClasses}>
+```
+No width/height props applied.
+
+---
+
+## 7. CSS Dependencies
+
+### Missing CSS Classes (from ChatPanel.css)
+The following CSS classes are used in ChatPanel but don't exist in AIChatPanel.css:
+
+**Email & Modals:**
+- `.modal-overlay`
+- `.modal-content`
+- `.modal-text`
+- `.modal-buttons`
+- `.tool-info-modal-content`
+- `.tool-info-container`
+- `.tool-info-section`
+- `.tool-info-json`
+- `.customer-email-panel`
+- `.customer-email-input`
+- `.email-set-button`
+- `.email-error-message`
+
+**Buttons:**
+- `.button-container-actions`
+- `.save-button`
+- `.new-conversation-button`
+- `.copy-button`
+- `.thumbs-button`
+- `.icon-svg`
+
+**Tool Approval:**
+- `.approve-tools-panel`
+- `.approve-tool-item`
+- `.approve-tools-header`
+- `.approve-tools-buttons`
+- `.approve-tools-button`
+- `.approve-tools-description`
+
+**Actions:**
+- `.action-button` (for progressive actions)
+- Disabled state styling for streaming buttons
+
+---
+
+## 8. Import Differences
+
+**ChatPanel Imports (Missing from AIChatPanel):**
+```typescript:11:20
+import ReactDOMServer from "react-dom/server";
+import "./ChatPanel.css";
+import remarkGfm from "remark-gfm";
+import rehypeRaw from "rehype-raw";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import PrismStyle 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 EmailModal from "./EmailModal";
+import ToolInfoModal from "./ToolInfoModal";
+```
+
+**Present in AIChatPanel:** Lines 7-22
+```typescript
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { LLMAsAServiceCustomer, useLLM } from 'llmasaservice-client';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import rehypeRaw from 'rehype-raw';
+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 './AIChatPanel.css';
+```
+
+**Missing:**
+- `ReactDOMServer` - Required for HTML export
+- `EmailModal` component
+- `ToolInfoModal` component
+- `PrismStyle` type import
+
+---
+
+## 9. Implementation Priority
+
+### 🔴 CRITICAL (P0) - Core Features
+1. **EmailModal & ToolInfoModal components** - Required for email/tool features
+2. **Save to HTML** - Frequently used feature
+3. **Email Sharing** - Core collaboration feature
+4. **Tool Approval UI** - Essential for MCP tools
+5. **Customer Email Capture** - Required for some deployments
+
+### 🟡 HIGH (P1) - Enhanced Functionality
+6. **Call-to-Action System** - Used by marketing/sales agents
+7. **Progressive Actions** - Better UX for streaming responses
+8. **Dynamic CSS Injection** - Custom branding support
+
+### 🟢 MEDIUM (P2) - UI/Polish
+9. **Width/Height props** - Layout flexibility
+10. **scrollToEnd prop** - Scroll behavior control
+11. **prismStyle prop** - Code highlighting customization
+12. **markdownClass prop** - Markdown styling flexibility
+
+### 🔵 LOW (P3) - Legacy/Optional
+13. **messages prop** - Pre-populate history (not actively used)
+14. **cssUrl via string** - Alternative to URL-based CSS
+
+---
+
+## 10. Testing Checklist
+
+For each ported feature, verify:
+
+- [ ] Props are properly typed in interface
+- [ ] Default values match ChatPanel
+- [ ] State management is correct
+- [ ] Event handlers work correctly
+- [ ] API calls use correct endpoints
+- [ ] Visual styling matches (or improves upon) ChatPanel
+- [ ] Accessibility is maintained
+- [ ] Error handling is robust
+- [ ] Loading states are clear
+- [ ] Mobile responsiveness (if applicable)
+
+---
+
+## 11. Notes & Gotchas
+
+### Action Processing Complexity
+ChatPanel's `processActionsWithContext` function (lines 761-939) is **significantly more complex** than AIChatPanel's `processActions` (lines 966-983). Key differences:
+- Context-aware processing (history vs streaming)
+- Progressive action support
+- Button state management during streaming
+- Stable ID registry to prevent duplicates
+
+### Email Validation
+ChatPanel uses regex: `/^[^\s@]+@[^\s@]+\.[^\s@]+$/` (line 142)
+Currently duplicated in multiple places - should be a shared utility.
+
+### API Endpoints
+All email/save/CTA features use: `${publicAPIUrl}/share/email`
+Feedback tracking uses: `${publicAPIUrl}/feedback/{callId}/{action}`
+
+### CSS Modularity
+ChatPanel uses a single CSS file (`ChatPanel.css`) for both the main panel and modals.
+Consider whether AIChatPanel should:
+- Import modal CSS separately
+- Keep everything in `AIChatPanel.css`
+- Use CSS modules
+
+---
+
+## 12. Success Criteria
+
+Port is complete when:
+1. ✅ All props from ChatPanel exist in AIChatPanel
+2. ✅ All components (EmailModal, ToolInfoModal) are integrated
+3. ✅ All features (save, email, CTA, tool approval) work correctly
+4. ✅ All state variables and handlers are ported
+5. ✅ CSS classes are available and styled
+6. ✅ No regressions in existing AIChatPanel features
+7. ✅ All tests pass (create tests if none exist)
+8. ✅ Documentation is updated
+
+---
+
+## 13. Version History
+
+| Date | Version | Changes |
+|------|---------|---------|
+| Dec 15, 2025 | 1.0 | Initial comprehensive inventory |
+
+---
+
+**End of Inventory**