@hef2024/llmasaservice-ui 0.16.8

package/src/AIAgentPanel.tsx

@@ -0,0 +1,1883 @@
+import React, { useState, useCallback, useMemo, useRef, useEffect } from 'react';
+import AIChatPanel, { AgentOption } from './AIChatPanel';
+import { useAgentRegistry } from './hooks/useAgentRegistry';
+import { Button, Input, ScrollArea, Dialog, DialogFooter, Tooltip } from './components/ui';
+import { LLMAsAServiceCustomer } from 'llmasaservice-client';
+import './AIAgentPanel.css';
+
+/**
+ * Context section for agent awareness
+ */
+export interface ContextSection {
+  id: string;
+  title: string;
+  data: Record<string, unknown>;
+  tokens?: number;
+}
+
+/**
+ * Agent context passed to the panel
+ */
+export interface AgentContext {
+  route?: string;
+  sections: ContextSection[];
+  totalTokens?: number;
+}
+
+/**
+ * API Conversation Summary from LLMAsAService
+ */
+export interface APIConversationSummary {
+  conversationId: string;
+  title?: string;
+  summary?: string;
+  createdAt: string;
+  updatedAt: string;
+  agentId?: string;
+  messageCount?: number;
+}
+
+/**
+ * Active conversation state for multi-conversation support
+ */
+export interface ActiveConversation {
+  conversationId: string;
+  agentId: string;
+  history: Record<string, { content: string; callId: string }>;
+  isLoading: boolean;
+  title: string;
+}
+
+/**
+ * Agent configuration with optional local overrides
+ */
+export interface AgentConfig {
+  id: string;
+  localName?: string;
+  avatarUrl?: string;
+}
+
+/**
+ * Props for AIAgentPanel
+ */
+export interface AIAgentPanelProps {
+  // Agent Configuration - can be string IDs or full config objects
+  agents: (string | AgentConfig)[];
+  defaultAgent?: string;
+
+  // Customer ID - REQUIRED for conversation history
+  customerId: string;
+
+  // API Key for authenticated endpoints (conversations, etc.)
+  apiKey?: string;
+
+  // Context Management
+  context?: AgentContext | null;
+  contextDataSources?: Record<string, unknown>;
+  sharedContextSections?: ContextSection[];
+  pageContextSections?: ContextSection[];
+  onContextChange?: (context: AgentContext) => void;
+  maxContextTokens?: number;
+  data?: { key: string; data: string }[];
+
+  // UI Configuration
+  theme?: 'light' | 'dark';
+  defaultCollapsed?: boolean;
+  defaultWidth?: number;
+  minWidth?: number;
+  maxWidth?: number;
+  position?: 'left' | 'right';
+  sidebarPosition?: 'left' | 'right';
+
+  // Agent Suggestions (inline agent handoff cards)
+  enableAgentSuggestions?: boolean;
+
+  // Context Viewer Configuration
+  enableContextDetailView?: boolean;
+
+  // Callbacks
+  onAgentSwitch?: (fromAgent: string, toAgent: string) => void;
+  onConversationChange?: (conversationId: string) => void;
+  historyChangedCallback?: (history: Record<string, { content: string; callId: string }>) => void;
+  responseCompleteCallback?: (callId: string, prompt: string, response: string) => void;
+  thumbsUpClick?: (callId: string) => void;
+  thumbsDownClick?: (callId: string) => void;
+
+  // Standard props
+  customer?: LLMAsAServiceCustomer;
+  url?: string;
+  showPoweredBy?: boolean;
+  conversation?: string | null;
+
+  // Actions/Regex
+  actions?: {
+    pattern: string;
+    type?: string;
+    markdown?: string;
+    callback?: (match: string, groups: any[]) => void;
+    clickCode?: string;
+    style?: string;
+  }[];
+
+  // Follow-on
+  followOnQuestions?: string[];
+  followOnPrompt?: string;
+
+  // Conversation history settings
+  historyListLimit?: number;
+}
+
+// Icons
+const SearchIcon = () => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M7.333 12.667A5.333 5.333 0 1 0 7.333 2a5.333 5.333 0 0 0 0 10.667ZM14 14l-2.9-2.9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+  </svg>
+);
+
+const PlusIcon = () => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M8 3.333v9.334M3.333 8h9.334" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+  </svg>
+);
+
+const ChevronLeftIcon = () => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M10 12L6 8l4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+  </svg>
+);
+
+const ChevronRightIcon = () => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M6 12l4-4-4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+  </svg>
+);
+
+const MessageIcon = () => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M14 10a1.333 1.333 0 0 1-1.333 1.333H4L2 14V3.333A1.333 1.333 0 0 1 3.333 2h9.334A1.333 1.333 0 0 1 14 3.333V10Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+  </svg>
+);
+
+const TrashIcon = () => (
+  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M1.75 3.5h10.5M4.667 3.5V2.333a1.167 1.167 0 0 1 1.166-1.166h2.334a1.167 1.167 0 0 1 1.166 1.166V3.5m1.75 0v8.167a1.167 1.167 0 0 1-1.166 1.166H4.083a1.167 1.167 0 0 1-1.166-1.166V3.5h8.166Z" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"/>
+  </svg>
+);
+
+const ContextIcon = () => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M2 4h12M2 8h12M2 12h8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+  </svg>
+);
+
+const CloseIcon = () => (
+  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M9 3L3 9M3 3l6 6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+  </svg>
+);
+
+const LoadingDotIcon = () => (
+  <span className="ai-agent-panel__loading-dot" />
+);
+
+const HistoryIcon = () => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M8 4v4l2.5 1.5M14 8A6 6 0 1 1 2 8a6 6 0 0 1 12 0Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+  </svg>
+);
+
+const SidebarIcon = () => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" strokeWidth="1.5"/>
+    <path d="M6 2v12" stroke="currentColor" strokeWidth="1.5"/>
+  </svg>
+);
+
+/**
+ * AIAgentPanel - Cursor-inspired multi-agent panel
+ */
+// Normalize conversation list payload from API
+const normalizeConversationListPayload = (payload: any): APIConversationSummary[] => {
+  if (!payload) return [];
+  
+  const conversations = Array.isArray(payload) ? payload : payload.conversations || [];
+  
+  return conversations.map((conv: any) => {
+    // Get title, but filter out generic "Conversation" from API
+    let title = conv.title && conv.title !== 'Conversation' ? conv.title : '';
+    if (!title) {
+      title = conv.summary || extractTitleFromConversation(conv);
+    }
+    
+    return {
+      conversationId: conv.conversationId || conv.id || conv.conversation_id,
+      title,
+      summary: conv.summary,
+      createdAt: conv.createdAt || conv.created_at || conv.timestamp || new Date().toISOString(),
+      updatedAt: conv.updatedAt || conv.updated_at || conv.lastUpdated || conv.createdAt || new Date().toISOString(),
+      agentId: conv.agentId || conv.agent_id,
+      messageCount: conv.messageCount || conv.message_count,
+    };
+  });
+};
+
+// Extract title from conversation data
+const extractTitleFromConversation = (conv: any): string => {
+  // Try to get the first user message as the title
+  if (conv.messages && Array.isArray(conv.messages) && conv.messages.length > 0) {
+    const firstUserMessage = conv.messages.find((m: any) => m.role === 'user');
+    if (firstUserMessage?.content) {
+      const content = typeof firstUserMessage.content === 'string' 
+        ? firstUserMessage.content 
+        : firstUserMessage.content[0]?.text || '';
+      return content.length > 60 ? content.slice(0, 57) + '...' : content;
+    }
+  }
+  
+  // Try prompts object (keys are the prompts)
+  if (conv.prompts && typeof conv.prompts === 'object') {
+    const firstPrompt = Object.keys(conv.prompts)[0];
+    if (firstPrompt) {
+      return firstPrompt.length > 60 ? firstPrompt.slice(0, 57) + '...' : firstPrompt;
+    }
+  }
+  
+  // Try calls array - first call's prompt
+  if (conv.calls && Array.isArray(conv.calls) && conv.calls.length > 0) {
+    const firstCall = conv.calls[0];
+    if (firstCall.prompt) {
+      return firstCall.prompt.length > 60 ? firstCall.prompt.slice(0, 57) + '...' : firstCall.prompt;
+    }
+  }
+  
+  // Try firstPrompt field (in case API provides it directly)
+  if (conv.firstPrompt || conv.first_prompt) {
+    const prompt = conv.firstPrompt || conv.first_prompt;
+    return prompt.length > 60 ? prompt.slice(0, 57) + '...' : prompt;
+  }
+  
+  // Fall back to a human-readable timestamp
+  const timestamp = conv.createdAt || conv.created_at || conv.timestamp;
+  if (timestamp) {
+    const date = new Date(timestamp);
+    const now = new Date();
+    const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+    const chatDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+    
+    if (chatDate.getTime() === today.getTime()) {
+      // Today - show time
+      return `Chat from ${date.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' })}`;
+    } else {
+      // Other day - show date
+      const yesterday = new Date(today.getTime() - 24 * 60 * 60 * 1000);
+      if (chatDate.getTime() === yesterday.getTime()) {
+        return `Chat from yesterday`;
+      }
+      return `Chat from ${date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}`;
+    }
+  }
+  
+  return 'New chat';
+};
+
+// Group conversations by time
+const groupConversationsByTime = (conversations: APIConversationSummary[], showAllGroups: boolean = false): { label: string; conversations: APIConversationSummary[]; count: number }[] => {
+  const now = new Date();
+  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+  const yesterday = new Date(today.getTime() - 24 * 60 * 60 * 1000);
+  const thisWeek = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000);
+  const thisMonth = new Date(today.getTime() - 30 * 24 * 60 * 60 * 1000);
+
+  const groups: Record<string, APIConversationSummary[]> = {
+    'Today': [],
+    'Yesterday': [],
+    'This Week': [],
+    'This Month': [],
+    'Older': [],
+  };
+
+  conversations
+    .sort((a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime())
+    .forEach(conv => {
+      const date = new Date(conv.updatedAt);
+      if (date >= today) {
+        groups['Today']!.push(conv);
+      } else if (date >= yesterday) {
+        groups['Yesterday']!.push(conv);
+      } else if (date >= thisWeek) {
+        groups['This Week']!.push(conv);
+      } else if (date >= thisMonth) {
+        groups['This Month']!.push(conv);
+      } else {
+        groups['Older']!.push(conv);
+      }
+    });
+
+  return Object.entries(groups)
+    .filter(([_, convs]) => showAllGroups || convs.length > 0)
+    .map(([label, conversations]) => ({ label, conversations, count: conversations.length }));
+};
+
+// Empty arrays/objects to prevent recreating on every render
+const EMPTY_ARRAY: never[] = [];
+const EMPTY_HISTORY: Record<string, { content: string; callId: string }> = {};
+
+/**
+ * Memoized wrapper for AIChatPanel to prevent unnecessary re-renders
+ */
+interface ChatPanelWrapperProps {
+  activeConv: ActiveConversation;
+  currentConversationId: string | null;
+  getAgent: (id: string) => any;
+  url: string;
+  theme: 'light' | 'dark';
+  chatPanelData: { key: string; data: string }[];
+  handleHistoryChanged: (history: Record<string, { content: string; callId: string }>, conversationId?: string) => void;
+  handleLoadingChange: (isLoading: boolean, conversationId?: string) => void;
+  responseCompleteCallback?: (callId: string, prompt: string, response: string) => void;
+  thumbsUpClick?: (callId: string) => void;
+  thumbsDownClick?: (callId: string) => void;
+  effectiveCustomer: any;
+  showPoweredBy: boolean;
+  actions: any[];
+  followOnQuestions: string[];
+  followOnPrompt: string;
+  agentOptions: any[];
+  currentAgentId: string;
+  handleAgentSwitch: (agentId: string) => void;
+  agentsLoading: boolean;
+  // Context viewer props
+  contextSections: ContextSection[];
+  totalContextTokens: number;
+  maxContextTokens: number;
+  enableContextDetailView: boolean;
+}
+
+// Remove React.memo temporarily to debug - ChatPanelWrapper needs to re-render when agentId changes
+const ChatPanelWrapper = (({
+  activeConv,
+  currentConversationId,
+  getAgent,
+  url,
+  theme,
+  chatPanelData,
+  handleHistoryChanged,
+  handleLoadingChange,
+  responseCompleteCallback,
+  thumbsUpClick,
+  thumbsDownClick,
+  effectiveCustomer,
+  showPoweredBy,
+  actions,
+  followOnQuestions,
+  followOnPrompt,
+  agentOptions,
+  currentAgentId,
+  handleAgentSwitch,
+  agentsLoading,
+  contextSections,
+  totalContextTokens,
+  maxContextTokens,
+  enableContextDetailView,
+}) => {
+  const convAgentProfile = getAgent(activeConv.agentId);
+  const convAgentMetadata = convAgentProfile?.metadata;
+  const isVisible = currentConversationId === activeConv.conversationId;
+  
+  // Memoize callbacks to prevent recreating on every render
+  const historyCallback = useCallback(
+    (history: Record<string, { content: string; callId: string }>) => {
+      handleHistoryChanged(history, activeConv.conversationId);
+    },
+    [handleHistoryChanged, activeConv.conversationId]
+  );
+  
+  const loadingCallback = useCallback(
+    (loading: boolean) => {
+      handleLoadingChange(loading, activeConv.conversationId);
+    },
+    [handleLoadingChange, activeConv.conversationId]
+  );
+  
+  // Compute follow-on questions - MUST update when agent switches
+  // Don't use useMemo - compute fresh every render to ensure it always reflects current agent
+  // The computation is cheap (just string split), and this guarantees updates
+  const agentStatus = convAgentProfile?.status;
+  const promptsString = convAgentMetadata?.displayFollowOnPrompts || '';
+  
+  // Compute fresh every render - no memoization to avoid stale data
+  let effectiveFollowOnQuestions: string[];
+  if (followOnQuestions.length > 0) {
+    effectiveFollowOnQuestions = [...followOnQuestions];
+  } else {
+    const prompts = promptsString ? promptsString.split('|').filter((p: string) => p.trim()) : [];
+    effectiveFollowOnQuestions = [...prompts];
+  }
+  
+  // Memoize mcpServers
+  const mcpServers = useMemo(() => {
+    return convAgentProfile?.mcpServers || EMPTY_ARRAY;
+  }, [convAgentProfile?.mcpServers]);
+  
+  if (!convAgentMetadata) return null;
+  
+  return (
+    <div
+      className="ai-agent-panel__chat-wrapper"
+      style={{ display: isVisible ? 'flex' : 'none' }}
+    >
+      <AIChatPanel
+        project_id={convAgentMetadata.projectId}
+        service={convAgentMetadata.groupId || null}
+        url={url}
+        title=""
+        theme={theme}
+        promptTemplate={convAgentMetadata.displayPromptTemplate || '{{prompt}}'}
+        initialMessage={
+          convAgentMetadata.displayStartMessageOrPrompt === 'message'
+            ? convAgentMetadata.displayInitialMessageOrPrompt
+            : undefined
+        }
+        initialPrompt={
+          convAgentMetadata.displayStartMessageOrPrompt === 'prompt'
+            ? convAgentMetadata.displayInitialMessageOrPrompt
+            : undefined
+        }
+        placeholder={convAgentMetadata.displayPlaceholder || 'Type a message...'}
+        hideInitialPrompt={convAgentMetadata.displayHideInitialPrompt ?? true}
+        data={chatPanelData}
+        agent={activeConv.agentId}
+        conversation={activeConv.conversationId.startsWith('new-') ? undefined : activeConv.conversationId}
+        initialHistory={activeConv.history || EMPTY_HISTORY}
+        historyChangedCallback={historyCallback}
+        onLoadingChange={loadingCallback}
+        responseCompleteCallback={responseCompleteCallback}
+        thumbsUpClick={thumbsUpClick}
+        thumbsDownClick={thumbsDownClick}
+        customer={effectiveCustomer}
+        showPoweredBy={showPoweredBy}
+        showNewConversationButton={false}
+        createConversationOnFirstChat={convAgentMetadata.createConversationOnFirstChat ?? true}
+        mcpServers={mcpServers}
+        actions={actions}
+        followOnQuestions={effectiveFollowOnQuestions}
+        followOnPrompt={followOnPrompt}
+        progressiveActions={true}
+        hideRagContextInPrompt={true}
+        agentOptions={agentOptions}
+        currentAgentId={currentAgentId}
+        onAgentChange={handleAgentSwitch}
+        agentsLoading={agentsLoading}
+        contextSections={contextSections}
+        totalContextTokens={totalContextTokens}
+        maxContextTokens={maxContextTokens}
+        enableContextDetailView={enableContextDetailView}
+      />
+    </div>
+  );
+}) as React.FC<ChatPanelWrapperProps>;
+
+ChatPanelWrapper.displayName = 'ChatPanelWrapper';
+
+const AIAgentPanel: React.FC<AIAgentPanelProps> = ({
+  agents,
+  defaultAgent,
+  customerId,
+  apiKey,
+  context,
+  contextDataSources,
+  sharedContextSections = [],
+  pageContextSections = [],
+  onContextChange,
+  maxContextTokens = 8000,
+  data = [],
+  theme = 'light',
+  defaultCollapsed = false,
+  defaultWidth = 720,
+  minWidth = 520,
+  maxWidth = 1200,
+  position = 'right',
+  sidebarPosition = 'left',
+  enableAgentSuggestions = true,
+  enableContextDetailView = false,
+  onAgentSwitch,
+  onConversationChange,
+  historyChangedCallback,
+  responseCompleteCallback,
+  thumbsUpClick,
+  thumbsDownClick,
+  customer,
+  url = 'https://chat.llmasaservice.io',
+  showPoweredBy = true,
+  conversation,
+  actions = [],
+  followOnQuestions = [],
+  followOnPrompt = '',
+  historyListLimit = 50,
+}) => {
+  // Panel state
+  const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
+  const [isHistoryCollapsed, setIsHistoryCollapsed] = useState(() => {
+    if (typeof window !== 'undefined') {
+      const saved = localStorage.getItem('ai-agent-panel-history-collapsed');
+      return saved === 'true';
+    }
+    return false;
+  });
+  const [panelWidth, setPanelWidth] = useState(() => {
+    if (typeof window !== 'undefined') {
+      const savedWidth = localStorage.getItem('ai-agent-panel-width');
+      if (savedWidth) {
+        const width = parseInt(savedWidth, 10);
+        if (width >= minWidth && width <= maxWidth) {
+          return width;
+        }
+      }
+    }
+    return defaultWidth;
+  });
+  const [isResizing, setIsResizing] = useState(false);
+  const [showSearch, setShowSearch] = useState(false);
+  const [showHandoffDialog, setShowHandoffDialog] = useState(false);
+  const [suggestedAgent, setSuggestedAgent] = useState<string | null>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
+  const resizeRef = useRef<HTMLDivElement>(null);
+
+  // Normalize agents prop to extract IDs and local overrides
+  const { agentIds, localOverrides } = useMemo(() => {
+    const ids: string[] = [];
+    const overrides: Record<string, { localName?: string; avatarUrl?: string }> = {};
+    
+    for (const agent of agents) {
+      if (typeof agent === 'string') {
+        ids.push(agent);
+      } else {
+        ids.push(agent.id);
+        if (agent.localName || agent.avatarUrl) {
+          overrides[agent.id] = {
+            localName: agent.localName,
+            avatarUrl: agent.avatarUrl,
+          };
+        }
+      }
+    }
+    
+    return { agentIds: ids, localOverrides: overrides };
+  }, [agents]);
+
+  // Current agent state
+  const [currentAgentId, setCurrentAgentId] = useState<string>(
+    defaultAgent || agentIds[0] || ''
+  );
+
+  // API-based conversation state
+  const [apiConversations, setApiConversations] = useState<APIConversationSummary[]>([]);
+  const [conversationsLoading, setConversationsLoading] = useState(false);
+  const [conversationsError, setConversationsError] = useState<string | null>(null);
+  const [searchQuery, setSearchQuery] = useState('');
+  
+  // Multi-conversation state
+  const [activeConversations, setActiveConversations] = useState<Map<string, ActiveConversation>>(new Map());
+  const [currentConversationId, setCurrentConversationId] = useState<string | null>(conversation || null);
+  
+  // Store first prompts for conversations (conversationId -> firstPrompt)
+  const [conversationFirstPrompts, setConversationFirstPrompts] = useState<Record<string, string>>({});
+  const [loadingPrompts, setLoadingPrompts] = useState<Set<string>>(new Set());
+  
+  // Loading state for conversation transcript
+  const [loadingConversationId, setLoadingConversationId] = useState<string | null>(null);
+  
+  // Expand/collapse state for time sections
+  const [expandedSections, setExpandedSections] = useState<Record<string, boolean>>({
+    'Today': true,
+    'Yesterday': true,
+    'This Week': false,
+    'This Month': false,
+    'Older': false,
+  });
+
+  // Agent registry hook
+  const {
+    agents: agentProfiles,
+    isLoading: agentsLoading,
+    getAgent,
+    buildAgentAwarenessInstructions,
+    agentList,
+  } = useAgentRegistry(agentIds, { url, localOverrides });
+
+  // Ref to track if fetch is in progress (prevents duplicate calls)
+  const fetchInProgressRef = useRef(false);
+  
+  // Ref to track the last agent we fetched for
+  const lastFetchedAgentRef = useRef<string | null>(null);
+  
+  // Ref to track which conversations we've checked for prompts
+  const checkedPromptsRef = useRef<Set<string>>(new Set());
+  
+  // Ref to track which conversations are currently being fetched (prevents duplicate requests)
+  const fetchingPromptsRef = useRef<Set<string>>(new Set());
+  
+  // Ref to track failed requests with timestamps (prevents immediate retries on errors)
+  const failedPromptsRef = useRef<Map<string, { timestamp: number; status?: number }>>(new Map());
+  
+  // Ref to access activeConversations without causing dependency issues
+  const activeConversationsRef = useRef<Map<string, ActiveConversation>>(activeConversations);
+  activeConversationsRef.current = activeConversations;
+  
+  // Ref to access currentConversationId without causing dependency issues
+  const currentConversationIdRef = useRef<string | null>(currentConversationId);
+  currentConversationIdRef.current = currentConversationId;
+
+  // Fetch first prompt from a conversation
+  const fetchFirstPrompt = useCallback(async (conversationId: string, agentIdForConversation?: string) => {
+    // Skip if already checked/loaded
+    if (checkedPromptsRef.current.has(conversationId)) {
+      return;
+    }
+    
+    // Skip if currently being fetched (prevents duplicate requests)
+    if (fetchingPromptsRef.current.has(conversationId)) {
+      return;
+    }
+    
+    // Check if this request recently failed with a server error (502, 503, 504)
+    // Don't retry server errors immediately - wait at least 30 seconds
+    const failedRequest = failedPromptsRef.current.get(conversationId);
+    if (failedRequest) {
+      const timeSinceFailure = Date.now() - failedRequest.timestamp;
+      const isServerError = failedRequest.status && failedRequest.status >= 500 && failedRequest.status < 600;
+      
+      // For server errors, wait 30 seconds before retrying
+      // For other errors, wait 5 seconds
+      const cooldownPeriod = isServerError ? 30000 : 5000;
+      
+      if (timeSinceFailure < cooldownPeriod) {
+        return; // Still in cooldown period, don't retry
+      }
+    }
+    
+    // Mark as currently fetching
+    fetchingPromptsRef.current.add(conversationId);
+    
+    // Mark as loading
+    setLoadingPrompts(prev => new Set(prev).add(conversationId));
+
+    // Use the conversation's agentId if available, otherwise fall back to currentAgentId
+    const agentIdToUse = agentIdForConversation || currentAgentId;
+    const agentProfile = getAgent(agentIdToUse);
+    const projectId = agentProfile?.metadata?.projectId;
+
+    if (!apiKey || !projectId) {
+      fetchingPromptsRef.current.delete(conversationId);
+      setLoadingPrompts(prev => {
+        const next = new Set(prev);
+        next.delete(conversationId);
+        return next;
+      });
+      return;
+    }
+
+    try {
+      const url = `https://api.llmasaservice.io/conversations/${conversationId}/calls`;
+      
+      const response = await fetch(url, {
+        headers: {
+          'x-api-key': apiKey,
+          'x-project-id': projectId,
+        },
+      });
+      
+      if (!response.ok) {
+        // Track failed requests with status code
+        failedPromptsRef.current.set(conversationId, {
+          timestamp: Date.now(),
+          status: response.status,
+        });
+        
+        // For server errors (5xx), don't retry immediately - the error will be logged but we won't spam
+        if (response.status >= 500 && response.status < 600) {
+          // Remove from fetching set but don't mark as checked, so it can retry after cooldown
+          fetchingPromptsRef.current.delete(conversationId);
+          setLoadingPrompts(prev => {
+            const next = new Set(prev);
+            next.delete(conversationId);
+            return next;
+          });
+          // Silently fail for server errors - don't log to avoid console spam
+          return;
+        }
+        
+        throw new Error(`Failed to fetch calls (${response.status})`);
+      }
+
+      // Success - mark as checked and clear any failure record
+      checkedPromptsRef.current.add(conversationId);
+      failedPromptsRef.current.delete(conversationId);
+
+      const payload = await response.json();
+      
+      // Extract first prompt from calls array
+      if (Array.isArray(payload) && payload.length > 0) {
+        const firstCall = payload[0];
+        if (firstCall.prompt) {
+          const promptText = typeof firstCall.prompt === 'string' 
+            ? firstCall.prompt 
+            : firstCall.prompt[0]?.text || '';
+          
+          if (promptText) {
+            // Truncate to 60 characters
+            const truncated = promptText.length > 60 ? promptText.slice(0, 57) + '...' : promptText;
+            setConversationFirstPrompts(prev => ({
+              ...prev,
+              [conversationId]: truncated,
+            }));
+          }
+        }
+      }
+    } catch (error: any) {
+      // Only log non-server errors to avoid console spam
+      if (!error.message || !error.message.includes('50')) {
+        console.error('Failed to fetch first prompt:', error);
+      }
+      
+      // Track failed requests
+      failedPromptsRef.current.set(conversationId, {
+        timestamp: Date.now(),
+      });
+    } finally {
+      // Always remove from fetching set
+      fetchingPromptsRef.current.delete(conversationId);
+      setLoadingPrompts(prev => {
+        const next = new Set(prev);
+        next.delete(conversationId);
+        return next;
+      });
+    }
+  }, [apiKey, currentAgentId, getAgent]);
+
+  // Fetch conversations from API
+  const fetchConversations = useCallback(async (agentId: string, signal?: AbortSignal) => {
+    // Get the agent profile to access projectId
+    const agentProfile = getAgent(agentId);
+    const projectId = agentProfile?.metadata?.projectId;
+
+    if (!agentId || !apiKey || !projectId) {
+      setApiConversations([]);
+      return;
+    }
+
+    // Prevent duplicate fetches
+    if (fetchInProgressRef.current) {
+      return;
+    }
+    fetchInProgressRef.current = true;
+
+    setConversationsLoading(true);
+    setConversationsError(null);
+
+    try {
+      console.log('fetchConversations - customerId:', customerId);
+      const url = `https://api.llmasaservice.io/conversations?customer_id=${customerId}`;
+      console.log('fetchConversations - URL:', url);
+      
+      const response = await fetch(url, {
+        signal,
+        headers: {
+          'x-api-key': apiKey,
+          'x-project-id': projectId,
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error(`Failed to fetch conversations (${response.status})`);
+      }
+
+      const payload = await response.json();
+      const normalized = normalizeConversationListPayload(payload);
+      
+      if (!signal?.aborted) {
+        setApiConversations(normalized);
+        
+        // Fetch first prompts for Today and Yesterday conversations
+        const now = new Date();
+        const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+        const yesterday = new Date(today.getTime() - 24 * 60 * 60 * 1000);
+        
+        normalized.forEach(conv => {
+          const date = new Date(conv.updatedAt);
+          if (date >= yesterday && !checkedPromptsRef.current.has(conv.conversationId)) {
+            // Fetch first prompt for Today and Yesterday conversations
+            fetchFirstPrompt(conv.conversationId, conv.agentId);
+          }
+        });
+      }
+    } catch (error: any) {
+      if (!signal?.aborted) {
+        setConversationsError(error.message || 'Failed to load conversations');
+      }
+    } finally {
+      fetchInProgressRef.current = false;
+      if (!signal?.aborted) {
+        setConversationsLoading(false);
+      }
+    }
+  }, [apiKey, customerId, getAgent, fetchFirstPrompt]);
+
+  // Helper to strip context/template data from a prompt - keeps only the user's actual message
+  const stripContextFromPrompt = useCallback((prompt: string): string => {
+    let cleanPrompt = prompt;
+    
+    // Strip ---context--- block and everything after it
+    const contextIndex = cleanPrompt.indexOf('---context---');
+    if (contextIndex !== -1) {
+      cleanPrompt = cleanPrompt.substring(0, contextIndex).trim();
+    }
+    
+    // Strip timestamp prefix (ISO format: 2024-01-01T00:00:00.000Z:)
+    const isoTimestampRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z:/;
+    if (isoTimestampRegex.test(cleanPrompt)) {
+      const colonIndex = cleanPrompt.indexOf(':', 19);
+      cleanPrompt = cleanPrompt.substring(colonIndex + 1);
+    } else if (/^\d+:/.test(cleanPrompt)) {
+      const colonIndex = cleanPrompt.indexOf(':');
+      cleanPrompt = cleanPrompt.substring(colonIndex + 1);
+    }
+    
+    return cleanPrompt.trim();
+  }, []);
+
+  // Load a specific conversation's transcript (or switch to it if already active)
+  const loadConversationTranscript = useCallback(async (conversationId: string, agentIdForConversation?: string, title?: string) => {
+    // Check if conversation is already in activeConversations (use ref to avoid dependency)
+    const existingActive = activeConversationsRef.current.get(conversationId);
+    if (existingActive) {
+      // Just switch to it, no API call needed
+      setCurrentConversationId(conversationId);
+      if (onConversationChange) {
+        onConversationChange(conversationId);
+      }
+      return;
+    }
+
+    // Use the conversation's agentId if available, otherwise fall back to currentAgentId
+    const agentIdToUse = agentIdForConversation || currentAgentId;
+    const agentProfile = getAgent(agentIdToUse);
+    const projectId = agentProfile?.metadata?.projectId;
+
+    if (!apiKey || !projectId) {
+      setConversationsError('Missing API key or project ID');
+      return;
+    }
+
+    // Set loading state
+    setLoadingConversationId(conversationId);
+
+    try {
+      console.log('loadConversationTranscript - conversationId:', conversationId);
+      const url = `https://api.llmasaservice.io/conversations/${conversationId}/calls`;
+      console.log('loadConversationTranscript - URL:', url);
+      
+      const response = await fetch(url, {
+        headers: {
+          'x-api-key': apiKey,
+          'x-project-id': projectId,
+        },
+      });
+      
+      if (!response.ok) {
+        throw new Error(`Failed to load conversation (${response.status})`);
+      }
+
+      const payload = await response.json();
+      console.log('loadConversationTranscript - API response:', payload);
+      
+      // The /calls endpoint returns an array of calls
+      // Build history from all calls in chronological order
+      // IMPORTANT: Strip context/template data from prompts to prevent token bloat
+      const history: Record<string, { content: string; callId: string }> = {};
+      let firstPrompt: string | null = null;
+      
+      if (Array.isArray(payload) && payload.length > 0) {
+        // Parse all calls in order
+        payload.forEach((call: any, index: number) => {
+          if (call.prompt && call.response) {
+            // Get the raw prompt text
+            const rawPrompt = typeof call.prompt === 'string' 
+              ? call.prompt 
+              : call.prompt[0]?.text || '';
+            
+            // Strip context/template data - keep only the user's actual message
+            const cleanedPrompt = stripContextFromPrompt(rawPrompt);
+            
+            // Extract first prompt for display in list
+            if (index === 0 && cleanedPrompt) {
+              firstPrompt = cleanedPrompt.length > 60 ? cleanedPrompt.slice(0, 57) + '...' : cleanedPrompt;
+            }
+            
+            // Use timestamp-prefixed key to maintain order and uniqueness
+            const timestamp = call.createdAt || call.created_at || new Date().toISOString();
+            const historyKey = `${timestamp}:${cleanedPrompt}`;
+            
+            history[historyKey] = {
+              content: call.response,
+              callId: call.id || '',
+            };
+          }
+        });
+      }
+
+      console.log('loadConversationTranscript - parsed history:', history);
+      
+      // Update first prompt in state if we found one
+      if (firstPrompt) {
+        setConversationFirstPrompts(prev => ({
+          ...prev,
+          [conversationId]: firstPrompt!,
+        }));
+      }
+      
+      // Add to active conversations
+      const conversationTitle = title || firstPrompt || 'Conversation';
+      setActiveConversations(prev => {
+        const next = new Map(prev);
+        next.set(conversationId, {
+          conversationId,
+          agentId: agentIdToUse,
+          history,
+          isLoading: false,
+          title: conversationTitle,
+        });
+        return next;
+      });
+      
+      setCurrentConversationId(conversationId);
+      
+      if (onConversationChange) {
+        onConversationChange(conversationId);
+      }
+      
+      // Clear loading state on success
+      setLoadingConversationId(null);
+    } catch (error: any) {
+      console.error('Failed to load conversation:', error);
+      setConversationsError(error.message || 'Failed to load conversation');
+      
+      // Clear loading state on error
+      setLoadingConversationId(null);
+    }
+  }, [apiKey, currentAgentId, getAgent, onConversationChange, stripContextFromPrompt]);
+
+
+  // Refresh conversations callback
+  const handleRefreshConversations = useCallback(() => {
+    fetchConversations(currentAgentId);
+  }, [currentAgentId, fetchConversations]);
+
+  // Fetch conversations on mount and when agent changes
+  useEffect(() => {
+    // Only fetch if agents are loaded and we have necessary data
+    if (!agentsLoading && currentAgentId && apiKey) {
+      // Check if agent is ready (has projectId)
+      const agentProfile = getAgent(currentAgentId);
+      const projectId = agentProfile?.metadata?.projectId;
+      
+      // Only fetch once per agent, and only if agent is ready
+      if (projectId && lastFetchedAgentRef.current !== currentAgentId) {
+        lastFetchedAgentRef.current = currentAgentId;
+        fetchConversations(currentAgentId);
+      }
+    }
+  }, [agentsLoading, currentAgentId, apiKey, fetchConversations, getAgent]);
+
+  // Start new conversation
+  const handleNewConversation = useCallback(() => {
+    // Generate a temporary ID for the new conversation
+    const tempId = `new-${Date.now()}`;
+    
+    // Add to active conversations with empty history
+    setActiveConversations(prev => {
+      const next = new Map(prev);
+      next.set(tempId, {
+        conversationId: tempId,
+        agentId: currentAgentId,
+        history: {},
+        isLoading: false,
+        title: 'New conversation',
+      });
+      return next;
+    });
+    
+    setCurrentConversationId(tempId);
+  }, [currentAgentId]);
+  
+  // Auto-start a new conversation when none exist and agent is ready
+  useEffect(() => {
+    const agentProfile = getAgent(currentAgentId);
+    const isAgentReady = agentProfile?.metadata?.projectId;
+    
+    if (isAgentReady && !agentsLoading && activeConversations.size === 0) {
+      handleNewConversation();
+    }
+  }, [currentAgentId, agentsLoading, activeConversations.size, getAgent, handleNewConversation]);
+  
+  // Close an active conversation
+  const handleCloseConversation = useCallback((conversationId: string, e?: React.MouseEvent) => {
+    if (e) {
+      e.stopPropagation();
+    }
+    
+    setActiveConversations(prev => {
+      const next = new Map(prev);
+      next.delete(conversationId);
+      return next;
+    });
+    
+    // If closing the current conversation, switch to another active one or null
+    if (currentConversationIdRef.current === conversationId) {
+      const remaining = Array.from(activeConversationsRef.current.keys()).filter(id => id !== conversationId);
+      const nextId = remaining.length > 0 ? remaining[0] ?? null : null;
+      setCurrentConversationId(nextId);
+    }
+  }, []);
+
+  // Select conversation
+  const handleSelectConversation = useCallback((conversationId: string) => {
+    loadConversationTranscript(conversationId);
+  }, [loadConversationTranscript]);
+
+  // Toggle section expansion
+  const toggleSection = useCallback((sectionLabel: string) => {
+    setExpandedSections(prev => {
+      const isExpanding = !prev[sectionLabel];
+      
+      // If expanding, fetch first prompts for conversations in this section
+      if (isExpanding) {
+        // Use a ref to get current conversations to avoid dependency issues
+        const conversationsToCheck = apiConversations;
+        const now = new Date();
+        const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+        const yesterday = new Date(today.getTime() - 24 * 60 * 60 * 1000);
+        const thisWeek = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000);
+        const thisMonth = new Date(today.getTime() - 30 * 24 * 60 * 60 * 1000);
+        
+        // Fetch prompts for conversations in this section
+        conversationsToCheck.forEach(conv => {
+          const date = new Date(conv.updatedAt);
+          let shouldFetch = false;
+          
+          if (sectionLabel === 'Today' && date >= today) {
+            shouldFetch = true;
+          } else if (sectionLabel === 'Yesterday' && date >= yesterday && date < today) {
+            shouldFetch = true;
+          } else if (sectionLabel === 'This Week' && date >= thisWeek && date < yesterday) {
+            shouldFetch = true;
+          } else if (sectionLabel === 'This Month' && date >= thisMonth && date < thisWeek) {
+            shouldFetch = true;
+          } else if (sectionLabel === 'Older' && date < thisMonth) {
+            shouldFetch = true;
+          }
+          
+          if (shouldFetch && !checkedPromptsRef.current.has(conv.conversationId)) {
+            fetchFirstPrompt(conv.conversationId, conv.agentId);
+          }
+        });
+      }
+      
+      return {
+        ...prev,
+        [sectionLabel]: isExpanding,
+      };
+    });
+  }, [apiConversations, fetchFirstPrompt]);
+
+  // Group conversations
+  const groupedConversations = useMemo(() => {
+    let filtered = apiConversations;
+    
+    // Filter by search query
+    if (searchQuery) {
+      const query = searchQuery.toLowerCase();
+      filtered = filtered.filter(conv => 
+        conv.title?.toLowerCase().includes(query) ||
+        conv.summary?.toLowerCase().includes(query)
+      );
+    }
+    
+    // Group all conversations, show all groups even if empty
+    return groupConversationsByTime(filtered, true);
+  }, [apiConversations, searchQuery]);
+
+  // Build effective customer object with required customerId
+  const effectiveCustomer = useMemo(() => {
+    return {
+      ...customer,
+      customer_id: customerId,
+    };
+  }, [customer, customerId]);
+
+
+  // Resize start handler - attaches listeners directly
+  const handleResizeStart = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    setIsResizing(true);
+    
+    let currentWidth = panelWidth;
+    
+    const handleMouseMove = (moveEvent: MouseEvent) => {
+      const newWidth = position === 'right'
+        ? window.innerWidth - moveEvent.clientX
+        : moveEvent.clientX;
+      
+      if (newWidth >= minWidth && newWidth <= maxWidth) {
+        currentWidth = newWidth;
+        setPanelWidth(newWidth);
+      }
+    };
+
+    const handleMouseUp = () => {
+      setIsResizing(false);
+      localStorage.setItem('ai-agent-panel-width', currentWidth.toString());
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+  }, [panelWidth, minWidth, maxWidth, position]);
+
+  // Get current agent profile
+  const currentAgentProfile = useMemo(() => {
+    return getAgent(currentAgentId);
+  }, [currentAgentId, getAgent]);
+
+  const currentAgentMetadata = currentAgentProfile?.metadata;
+  
+  // Get current active conversation
+  const currentActiveConversation = useMemo(() => {
+    if (!currentConversationId) return null;
+    return activeConversations.get(currentConversationId) || null;
+  }, [currentConversationId, activeConversations]);
+  
+  // Get list of active conversations sorted by most recent
+  const activeConversationsList = useMemo(() => {
+    return Array.from(activeConversations.values());
+  }, [activeConversations]);
+
+  // Build agent select options
+  const agentOptions: AgentOption[] = useMemo(() => {
+    return agentList.map((agent) => ({
+      value: agent.id,
+      label: agent.name,
+      description: agent.description,
+      avatarUrl: agent.avatarUrl,
+    }));
+  }, [agentList]);
+
+  // Merge context from all sources
+  const mergedContext = useMemo(() => {
+    const sections: ContextSection[] = [
+      ...sharedContextSections,
+      ...pageContextSections,
+      ...(context?.sections || []),
+    ];
+
+    // Add context data sources
+    if (contextDataSources) {
+      Object.entries(contextDataSources).forEach(([key, value]) => {
+        sections.push({
+          id: key,
+          title: key,
+          data: typeof value === 'object' ? (value as Record<string, unknown>) : { value },
+        });
+      });
+    }
+
+    const totalTokens = sections.reduce((sum, s) => sum + (s.tokens || 0), 0);
+
+    return {
+      route: context?.route,
+      sections,
+      totalTokens,
+    };
+  }, [context, sharedContextSections, pageContextSections, contextDataSources]);
+
+
+  // Build data array for ChatPanel
+  const chatPanelData = useMemo(() => {
+    const contextData = mergedContext.sections.map((section) => ({
+      key: section.id,
+      data: JSON.stringify(section.data),
+    }));
+
+    // Add agent awareness instructions (only if agent suggestions are enabled)
+    if (enableAgentSuggestions) {
+      const awarenessInstructions = buildAgentAwarenessInstructions(currentAgentId);
+      if (awarenessInstructions) {
+        contextData.push({
+          key: 'agent_awareness',
+          data: awarenessInstructions,
+        });
+      }
+    }
+
+    return [...data, ...contextData];
+  }, [data, mergedContext.sections, buildAgentAwarenessInstructions, currentAgentId, enableAgentSuggestions]);
+
+  // Handle agent switch - updates the agent for the current conversation without starting a new one
+  const handleAgentSwitch = useCallback(
+    (newAgentId: string) => {
+      const oldAgentId = currentAgentId;
+      setCurrentAgentId(newAgentId);
+      
+      if (onAgentSwitch) {
+        onAgentSwitch(oldAgentId, newAgentId);
+      }
+
+      // Update the current conversation's agent ID (don't start a new conversation)
+      if (currentConversationIdRef.current) {
+        setActiveConversations(prev => {
+          const existing = prev.get(currentConversationIdRef.current!);
+          if (existing) {
+            const next = new Map(prev);
+            next.set(currentConversationIdRef.current!, {
+              ...existing,
+              agentId: newAgentId,
+            });
+            return next;
+          }
+          return prev;
+        });
+      }
+    },
+    [currentAgentId, onAgentSwitch]
+  );
+
+  // Handle conversation select from sidebar
+  const handleConversationSelect = useCallback(
+    (conv: APIConversationSummary) => {
+      // Determine which agent to use - prefer conversation's agent, but fall back if not available
+      let agentIdToUse = conv.agentId || currentAgentId;
+      
+      // Check if the conversation's agent exists
+      const targetAgent = getAgent(agentIdToUse);
+      if (!targetAgent && conv.agentId) {
+        // Conversation's agent not found, fall back to current agent
+        console.warn('Agent not found for conversation:', conv.agentId, 'Falling back to current agent:', currentAgentId);
+        agentIdToUse = currentAgentId;
+      }
+      
+      // Final check - ensure we have a valid agent
+      const finalAgent = getAgent(agentIdToUse);
+      if (!finalAgent) {
+        console.error('No valid agent available. Current:', currentAgentId, 'Available agents:', agentList.map(a => a.id));
+        setConversationsError('No agent available');
+        return;
+      }
+
+      // Get title from first prompts or conv title
+      const title = conversationFirstPrompts[conv.conversationId] || conv.title || 'Conversation';
+
+      // Switch to the agent for this conversation if different
+      if (agentIdToUse !== currentAgentId) {
+        setCurrentAgentId(agentIdToUse);
+        // Wait for state update, then load transcript
+        setTimeout(() => {
+          loadConversationTranscript(conv.conversationId, agentIdToUse, title);
+        }, 0);
+      } else {
+        // Same agent, load immediately
+        loadConversationTranscript(conv.conversationId, agentIdToUse, title);
+      }
+    },
+    [currentAgentId, loadConversationTranscript, getAgent, agentList, conversationFirstPrompts]
+  );
+
+  // Handle history changes from ChatPanel
+  const handleHistoryChanged = useCallback(
+    (history: Record<string, { content: string; callId: string }>, conversationId?: string) => {
+      const targetConversationId = conversationId || currentConversationIdRef.current;
+      
+      // Update active conversation history
+      if (targetConversationId) {
+        setActiveConversations(prev => {
+          const existing = prev.get(targetConversationId);
+          if (existing) {
+            const next = new Map(prev);
+            // Derive title from first prompt if conversation is new
+            let title = existing.title;
+            if (title === 'New conversation' && Object.keys(history).length > 0) {
+              const firstPrompt = Object.keys(history)[0];
+              if (firstPrompt) {
+                // Strip timestamp prefix
+                let cleanPrompt = firstPrompt;
+                const isoMatch = cleanPrompt.match(/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z:(.+)/);
+                if (isoMatch && isoMatch[1]) {
+                  cleanPrompt = isoMatch[1];
+                }
+                title = cleanPrompt.length > 60 ? cleanPrompt.slice(0, 57) + '...' : cleanPrompt;
+              }
+            }
+            next.set(targetConversationId, {
+              ...existing,
+              history,
+              title,
+            });
+            return next;
+          }
+          return prev;
+        });
+      }
+      
+      // Check for agent handoff suggestion
+      const lastEntry = Object.entries(history).pop();
+      if (lastEntry) {
+        const content = lastEntry[1].content;
+        const handoffMatch = content.match(/\[SUGGEST_AGENT:([^\]]+)\]/);
+        if (handoffMatch) {
+          const suggestedId = handoffMatch[1];
+          if (suggestedId && suggestedId !== currentAgentId && agents.includes(suggestedId)) {
+            setSuggestedAgent(suggestedId);
+            setShowHandoffDialog(true);
+          }
+        }
+      }
+
+      if (historyChangedCallback) {
+        historyChangedCallback(history);
+      }
+    },
+    [
+      currentAgentId,
+      historyChangedCallback,
+      agents,
+    ]
+  );
+  
+  // Handle loading state changes from ChatPanel
+  const handleLoadingChange = useCallback((isLoading: boolean, conversationId?: string) => {
+    const targetConversationId = conversationId || currentConversationIdRef.current;
+    
+    if (targetConversationId) {
+      setActiveConversations(prev => {
+        const existing = prev.get(targetConversationId);
+        if (existing && existing.isLoading !== isLoading) {
+          const next = new Map(prev);
+          next.set(targetConversationId, {
+            ...existing,
+            isLoading,
+          });
+          return next;
+        }
+        return prev;
+      });
+    }
+  }, []);
+
+  // Handle handoff confirmation
+  const handleHandoffConfirm = useCallback(() => {
+    if (suggestedAgent) {
+      handleAgentSwitch(suggestedAgent);
+    }
+    setShowHandoffDialog(false);
+    setSuggestedAgent(null);
+  }, [suggestedAgent, handleAgentSwitch]);
+
+  const handleHandoffCancel = useCallback(() => {
+    setShowHandoffDialog(false);
+    setSuggestedAgent(null);
+  }, []);
+
+  // Toggle collapse
+  const toggleCollapse = useCallback(() => {
+    setIsCollapsed((prev) => !prev);
+  }, []);
+
+  // Toggle history collapse
+  const toggleHistoryCollapse = useCallback(() => {
+    setIsHistoryCollapsed((prev) => {
+      const next = !prev;
+      localStorage.setItem('ai-agent-panel-history-collapsed', String(next));
+      return next;
+    });
+  }, []);
+
+  // Panel classes
+  const panelClasses = [
+    'ai-agent-panel',
+    theme === 'dark' ? 'dark-theme' : '',
+    isCollapsed ? 'ai-agent-panel--collapsed' : '',
+    position === 'left' ? 'ai-agent-panel--left' : 'ai-agent-panel--right',
+    sidebarPosition === 'right' ? 'ai-agent-panel--sidebar-right' : 'ai-agent-panel--sidebar-left',
+  ].filter(Boolean).join(' ');
+
+  // Collapsed view
+  if (isCollapsed) {
+    return (
+      <div className={panelClasses} ref={panelRef}>
+        <div 
+          className="ai-agent-panel__collapsed-bar"
+          onClick={(e) => {
+            // Only expand if clicking on the bar itself, not on buttons
+            if (e.target === e.currentTarget) {
+              toggleCollapse();
+            }
+          }}
+          title="Click to expand"
+        >
+          {/* Expand button at top for discoverability */}
+          <Tooltip content="Expand Panel" side="left">
+            <Button variant="ghost" size="icon" onClick={toggleCollapse}>
+              {position === 'right' ? <ChevronLeftIcon /> : <ChevronRightIcon />}
+            </Button>
+          </Tooltip>
+
+          <div className="ai-agent-panel__collapsed-divider" />
+
+          <Tooltip content="Search" side="left">
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => {
+                setIsCollapsed(false);
+                setShowSearch(true);
+              }}
+            >
+              <SearchIcon />
+            </Button>
+          </Tooltip>
+
+          <Tooltip content="New Chat" side="left">
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => {
+                setIsCollapsed(false);
+                handleNewConversation();
+              }}
+            >
+              <PlusIcon />
+            </Button>
+          </Tooltip>
+
+          <div className="ai-agent-panel__collapsed-divider" />
+
+          {agentList.map((agent) => {
+            // Check if this agent has an active conversation
+            const activeConvForAgent = activeConversationsList.find(
+              (conv) => conv.agentId === agent.id
+            );
+            const hasActiveConversation = !!activeConvForAgent;
+            
+            return (
+              <Tooltip key={agent.id} content={agent.name} side="left">
+                <Button
+                  variant={agent.id === currentAgentId ? 'secondary' : 'ghost'}
+                  size="icon"
+                  onClick={() => {
+                    setIsCollapsed(false);
+                    if (hasActiveConversation && activeConvForAgent) {
+                      // Switch to the existing conversation
+                      setCurrentConversationId(activeConvForAgent.conversationId);
+                      setCurrentAgentId(agent.id);
+                      if (onConversationChange) {
+                        onConversationChange(activeConvForAgent.conversationId);
+                      }
+                    } else {
+                      // Start a new conversation with this agent
+                      const tempId = `new-${Date.now()}`;
+                      setActiveConversations(prev => {
+                        const next = new Map(prev);
+                        next.set(tempId, {
+                          conversationId: tempId,
+                          agentId: agent.id,
+                          history: {},
+                          isLoading: false,
+                          title: 'New conversation',
+                        });
+                        return next;
+                      });
+                      setCurrentConversationId(tempId);
+                      setCurrentAgentId(agent.id);
+                    }
+                  }}
+                  className={`ai-agent-panel__agent-icon ${hasActiveConversation ? 'ai-agent-panel__agent-icon--active' : ''}`}
+                >
+                  {agent.avatarUrl ? (
+                    <img
+                      src={agent.avatarUrl}
+                      alt={agent.name}
+                      className="ai-agent-panel__agent-avatar"
+                    />
+                  ) : (
+                    agent.name.charAt(0).toUpperCase()
+                  )}
+                  {hasActiveConversation && (
+                    <span className="ai-agent-panel__agent-active-indicator" />
+                  )}
+                </Button>
+              </Tooltip>
+            );
+          })}
+
+          <div className="ai-agent-panel__collapsed-spacer" />
+        </div>
+      </div>
+    );
+  }
+
+  // Expanded view
+  return (
+    <div
+      className={panelClasses}
+      ref={panelRef}
+      style={{ width: `${panelWidth}px` }}
+    >
+      {/* Resize handle */}
+      <div
+        ref={resizeRef}
+        className={`ai-agent-panel__resize-handle ai-agent-panel__resize-handle--${position}`}
+        onMouseDown={handleResizeStart}
+        role="separator"
+        aria-orientation="vertical"
+        aria-label="Resize panel"
+        tabIndex={0}
+      />
+
+      {/* Sidebar */}
+      <div className={`ai-agent-panel__sidebar ${isHistoryCollapsed ? 'ai-agent-panel__sidebar--collapsed' : ''}`}>
+        {isHistoryCollapsed ? (
+          // Collapsed history bar
+          <div 
+            className="ai-agent-panel__history-collapsed-bar"
+            onClick={(e) => {
+              // Only expand if clicking on the bar itself, not on buttons
+              if (e.target === e.currentTarget) {
+                toggleHistoryCollapse();
+              }
+            }}
+            title="Click to expand history"
+          >
+            {/* Expand button at top for discoverability */}
+            <Tooltip content="Expand History" side={sidebarPosition === 'left' ? 'right' : 'left'}>
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={toggleHistoryCollapse}
+              >
+                <ChevronRightIcon />
+              </Button>
+            </Tooltip>
+            
+            <div className="ai-agent-panel__collapsed-divider" />
+            
+            <Tooltip content="New Chat" side={sidebarPosition === 'left' ? 'right' : 'left'}>
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={handleNewConversation}
+              >
+                <PlusIcon />
+              </Button>
+            </Tooltip>
+            
+            <div className="ai-agent-panel__collapsed-divider" />
+            
+            {agentList.map((agent) => {
+              // Check if this agent has an active conversation
+              const activeConvForAgent = activeConversationsList.find(
+                (conv) => conv.agentId === agent.id
+              );
+              const hasActiveConversation = !!activeConvForAgent;
+              
+              return (
+                <Tooltip key={agent.id} content={agent.name} side={sidebarPosition === 'left' ? 'right' : 'left'}>
+                  <Button
+                    variant={agent.id === currentAgentId ? 'secondary' : 'ghost'}
+                    size="icon"
+                    onClick={() => {
+                      if (hasActiveConversation && activeConvForAgent) {
+                        // Switch to the existing conversation
+                        setCurrentConversationId(activeConvForAgent.conversationId);
+                        setCurrentAgentId(agent.id);
+                        if (onConversationChange) {
+                          onConversationChange(activeConvForAgent.conversationId);
+                        }
+                      } else {
+                        // Start a new conversation with this agent
+                        const tempId = `new-${Date.now()}`;
+                        setActiveConversations(prev => {
+                          const next = new Map(prev);
+                          next.set(tempId, {
+                            conversationId: tempId,
+                            agentId: agent.id,
+                            history: {},
+                            isLoading: false,
+                            title: 'New conversation',
+                          });
+                          return next;
+                        });
+                        setCurrentConversationId(tempId);
+                        setCurrentAgentId(agent.id);
+                      }
+                    }}
+                    className={`ai-agent-panel__agent-icon ${hasActiveConversation ? 'ai-agent-panel__agent-icon--active' : ''}`}
+                  >
+                    {agent.avatarUrl ? (
+                      <img
+                        src={agent.avatarUrl}
+                        alt={agent.name}
+                        className="ai-agent-panel__agent-avatar"
+                      />
+                    ) : (
+                      agent.name.charAt(0).toUpperCase()
+                    )}
+                    {hasActiveConversation && (
+                      <span className="ai-agent-panel__agent-active-indicator" />
+                    )}
+                  </Button>
+                </Tooltip>
+              );
+            })}
+            
+            <div className="ai-agent-panel__history-collapsed-spacer" />
+          </div>
+        ) : (
+          <>
+            {/* Header */}
+            <div className="ai-agent-panel__header">
+              <div className="ai-agent-panel__header-actions">
+                {showSearch ? (
+                  <Input
+                    placeholder="Search conversations..."
+                    value={searchQuery}
+                    onChange={(e) => setSearchQuery(e.target.value)}
+                    icon={<SearchIcon />}
+                    autoFocus
+                    onBlur={() => {
+                      if (!searchQuery) setShowSearch(false);
+                    }}
+                  />
+                ) : (
+                  <>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      onClick={() => setShowSearch(true)}
+                    >
+                      <SearchIcon />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      onClick={handleNewConversation}
+                    >
+                      <PlusIcon />
+                    </Button>
+                  </>
+                )}
+              </div>
+              <Tooltip content="Collapse History" side="bottom">
+                <Button variant="ghost" size="icon" onClick={toggleHistoryCollapse}>
+                  <SidebarIcon />
+                </Button>
+              </Tooltip>
+              <Button variant="ghost" size="icon" onClick={toggleCollapse}>
+                {position === 'right' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
+              </Button>
+            </div>
+
+            {/* Conversation list */}
+            <ScrollArea className="ai-agent-panel__conversations">
+          {/* Active Conversations Section */}
+          {activeConversationsList.length > 0 && (
+            <div className="ai-agent-panel__group ai-agent-panel__group--active">
+              <div className="ai-agent-panel__group-label">
+                <span>Active ({activeConversationsList.length})</span>
+              </div>
+              {activeConversationsList.map((activeConv) => (
+                <div
+                  key={activeConv.conversationId}
+                  className={`ai-agent-panel__conversation ai-agent-panel__conversation--active-item ${
+                    currentConversationId === activeConv.conversationId
+                      ? 'ai-agent-panel__conversation--current'
+                      : ''
+                  }`}
+                  onClick={() => {
+                    setCurrentConversationId(activeConv.conversationId);
+                    if (onConversationChange) {
+                      onConversationChange(activeConv.conversationId);
+                    }
+                  }}
+                >
+                  <div className="ai-agent-panel__conversation-content">
+                    <div className="ai-agent-panel__conversation-title">
+                      {activeConv.isLoading && <LoadingDotIcon />}
+                      <span>{activeConv.title}</span>
+                    </div>
+                  </div>
+                  <button
+                    className="ai-agent-panel__conversation-close"
+                    onClick={(e) => handleCloseConversation(activeConv.conversationId, e)}
+                    title="Close conversation"
+                  >
+                    <CloseIcon />
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+          
+          {/* History Section */}
+          {conversationsLoading ? (
+            <div className="ai-agent-panel__loading">
+              <div className="ai-agent-panel__loading-spinner" />
+              <span>Loading conversations...</span>
+            </div>
+          ) : conversationsError ? (
+            <div className="ai-agent-panel__empty">
+              <p>Error: {conversationsError}</p>
+              <Button variant="secondary" size="sm" onClick={handleRefreshConversations}>
+                Retry
+              </Button>
+            </div>
+          ) : groupedConversations.length === 0 && activeConversationsList.length === 0 ? (
+            <div className="ai-agent-panel__empty">
+              <MessageIcon />
+              <p>No conversations yet</p>
+              <p className="ai-agent-panel__empty-hint">
+                Start chatting to create your first conversation
+              </p>
+            </div>
+          ) : (
+            <>
+              {activeConversationsList.length > 0 && groupedConversations.some(g => g.count > 0) && (
+                <div className="ai-agent-panel__group-divider" />
+              )}
+              {groupedConversations.map((group) => (
+                <div key={group.label} className="ai-agent-panel__group">
+                  <div 
+                    className="ai-agent-panel__group-label ai-agent-panel__group-label--clickable"
+                    onClick={() => toggleSection(group.label)}
+                  >
+                    <span>{group.label} {group.count > 0 && `(${group.count})`}</span>
+                    <span className="ai-agent-panel__group-chevron">
+                      {expandedSections[group.label] ? '▼' : '▶'}
+                    </span>
+                  </div>
+                  {expandedSections[group.label] && group.conversations.length > 0 && group.conversations.map((conv) => {
+                    // Check if this conversation is already active
+                    const isActive = activeConversations.has(conv.conversationId);
+                    return (
+                      <div
+                        key={conv.conversationId}
+                        className={`ai-agent-panel__conversation ${
+                          currentConversationId === conv.conversationId
+                            ? 'ai-agent-panel__conversation--current'
+                            : ''
+                        } ${isActive ? 'ai-agent-panel__conversation--in-active' : ''}`}
+                        onClick={() => handleConversationSelect(conv)}
+                      >
+                        <div className="ai-agent-panel__conversation-content">
+                          <div className="ai-agent-panel__conversation-title">
+                            {isActive && <span className="ai-agent-panel__active-badge">●</span>}
+                            {conversationFirstPrompts[conv.conversationId] || conv.title}
+                          </div>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              ))}
+            </>
+          )}
+            </ScrollArea>
+
+          </>
+        )}
+      </div>
+
+      {/* Chat area */}
+      <div className="ai-agent-panel__chat">
+        {/* Chat panels - one per active conversation, shown/hidden via CSS */}
+        {activeConversationsList.map((activeConv) => (
+          <ChatPanelWrapper
+            key={`${activeConv.conversationId}-${activeConv.agentId}`}
+            activeConv={activeConv}
+            currentConversationId={currentConversationId}
+            getAgent={getAgent}
+            url={url}
+            theme={theme}
+            chatPanelData={chatPanelData}
+            handleHistoryChanged={handleHistoryChanged}
+            handleLoadingChange={handleLoadingChange}
+            responseCompleteCallback={responseCompleteCallback}
+            thumbsUpClick={thumbsUpClick}
+            thumbsDownClick={thumbsDownClick}
+            effectiveCustomer={effectiveCustomer}
+            showPoweredBy={showPoweredBy}
+            actions={actions}
+            followOnQuestions={followOnQuestions}
+            followOnPrompt={followOnPrompt}
+            agentOptions={agentOptions}
+            currentAgentId={currentAgentId}
+            handleAgentSwitch={handleAgentSwitch}
+            agentsLoading={agentsLoading}
+            contextSections={mergedContext.sections}
+            totalContextTokens={mergedContext.totalTokens || 0}
+            maxContextTokens={maxContextTokens}
+            enableContextDetailView={enableContextDetailView}
+          />
+        ))}
+        
+        {/* Conversation loading overlay */}
+        {loadingConversationId && (
+          <div className="ai-agent-panel__conversation-loading-overlay">
+            <div className="ai-agent-panel__loading-spinner" />
+            <p>Loading conversation...</p>
+          </div>
+        )}
+        
+        {/* Empty state when no conversation is selected */}
+        {currentAgentMetadata && activeConversationsList.length === 0 && !loadingConversationId && (
+          <div className="ai-agent-panel__empty-chat">
+            <MessageIcon />
+            <p>Select a conversation or start a new one</p>
+            <Button variant="default" size="sm" onClick={handleNewConversation}>
+              New Conversation
+            </Button>
+          </div>
+        )}
+
+        {/* Agent loading state */}
+        {agentsLoading && !currentAgentMetadata && (
+          <div className="ai-agent-panel__loading">
+            <div className="ai-agent-panel__loading-spinner" />
+            <p>Loading agent...</p>
+          </div>
+        )}
+      </div>
+
+      {/* Handoff confirmation dialog */}
+      <Dialog
+        isOpen={showHandoffDialog}
+        onClose={handleHandoffCancel}
+        title="Switch Agent?"
+        description={`The current agent suggests transferring this conversation to ${
+          suggestedAgent ? getAgent(suggestedAgent)?.metadata?.displayTitle || suggestedAgent : 'another agent'
+        }.`}
+      >
+        <DialogFooter>
+          <Button variant="outline" onClick={handleHandoffCancel}>
+            Stay with current agent
+          </Button>
+          <Button onClick={handleHandoffConfirm}>
+            Switch agent
+          </Button>
+        </DialogFooter>
+      </Dialog>
+    </div>
+  );
+};
+
+export default AIAgentPanel;
+