@hef2024/llmasaservice-ui 0.16.8

package/src/AIChatPanel.tsx

@@ -0,0 +1,1725 @@
+/**
+ * AIChatPanel - A modern chat interface using shadcn-style components
+ * 
+ * This component provides the chat functionality for AIAgentPanel,
+ * using consistent shadcn-style UI components.
+ */
+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';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+/**
+ * Agent option for the agent selector dropdown
+ */
+export interface AgentOption {
+  value: string;
+  label: string;
+  description?: string;
+  icon?: React.ReactNode;
+  avatarUrl?: string;
+}
+
+export interface AIChatPanelProps {
+  project_id: string;
+  initialPrompt?: string;
+  initialMessage?: string;
+  title?: string;
+  placeholder?: string;
+  hideInitialPrompt?: boolean;
+  customer?: LLMAsAServiceCustomer;
+  data?: { key: string; data: string }[];
+  thumbsUpClick?: (callId: string) => void;
+  thumbsDownClick?: (callId: string) => void;
+  theme?: 'light' | 'dark';
+  url?: string | null;
+  service?: string | null;
+  historyChangedCallback?: (history: Record<string, { content: string; callId: string }>) => void;
+  responseCompleteCallback?: (callId: string, prompt: string, response: string) => void;
+  onLoadingChange?: (isLoading: boolean) => void;
+  promptTemplate?: string;
+  actions?: {
+    pattern: string;
+    type?: string;
+    markdown?: string;
+    callback?: (match: string, groups: any[]) => void;
+    clickCode?: string;
+    style?: string;
+  }[];
+  showNewConversationButton?: boolean;
+  followOnQuestions?: string[];
+  clearFollowOnQuestionsNextPrompt?: boolean;
+  followOnPrompt?: string;
+  showPoweredBy?: boolean;
+  agent?: string | null;
+  conversation?: string | null;
+  initialHistory?: Record<string, { content: string; callId: string }>;
+  hideRagContextInPrompt?: boolean;
+  createConversationOnFirstChat?: boolean;
+  mcpServers?: any[];
+  progressiveActions?: boolean;
+  
+  // Agent selector props (Cursor-style at bottom of input)
+  agentOptions?: AgentOption[];
+  currentAgentId?: string;
+  onAgentChange?: (agentId: string) => void;
+  agentsLoading?: boolean;
+
+  // Context viewer props
+  contextSections?: ContextSection[];
+  totalContextTokens?: number;
+  maxContextTokens?: number;
+  enableContextDetailView?: boolean;
+}
+
+/**
+ * Context section for the context viewer
+ */
+export interface ContextSection {
+  id: string;
+  title: string;
+  data: Record<string, unknown>;
+  tokens?: number;
+}
+
+interface HistoryEntry {
+  content: string;
+  callId: string;
+  toolCalls?: any[];
+  toolResponses?: any[];
+}
+
+interface ThinkingBlock {
+  type: 'reasoning' | 'searching';
+  content: string;
+  index: number;
+}
+
+// ============================================================================
+// Icons
+// ============================================================================
+
+const SendIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="ai-chat-icon">
+    <path d="M10 14l11-11M21 3l-6.5 18a.55.55 0 0 1-1 0l-3.5-7-7-3.5a.55.55 0 0 1 0-1L21 3" />
+  </svg>
+);
+
+const ArrowUpIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="ai-chat-icon-sm">
+    <path d="M12 19V5M5 12l7-7 7 7" />
+  </svg>
+);
+
+const StopIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="ai-chat-icon">
+    <rect x="6" y="6" width="12" height="12" rx="2" />
+  </svg>
+);
+
+const CopyIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="ai-chat-icon-sm">
+    <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+  </svg>
+);
+
+const ThumbsUpIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="ai-chat-icon-sm">
+    <path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3" />
+  </svg>
+);
+
+const ThumbsDownIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="ai-chat-icon-sm">
+    <path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17" />
+  </svg>
+);
+
+const RefreshIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="ai-chat-icon-sm">
+    <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" />
+    <path d="M21 3v5h-5" />
+    <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" />
+    <path d="M8 16H3v5" />
+  </svg>
+);
+
+const ChevronDownIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="ai-chat-icon-sm">
+    <path d="m6 9 6 6 6-6" />
+  </svg>
+);
+
+const ChevronUpIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="ai-chat-icon-sm">
+    <path d="m18 15-6-6-6 6" />
+  </svg>
+);
+
+const AgentIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="ai-chat-icon-sm">
+    <path d="M12 8V4H8" />
+    <rect width="16" height="12" x="4" y="8" rx="2" />
+    <path d="M2 14h2" />
+    <path d="M20 14h2" />
+    <path d="M15 13v2" />
+    <path d="M9 13v2" />
+  </svg>
+);
+
+const CheckIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="ai-chat-icon-sm">
+    <polyline points="20 6 9 17 4 12" />
+  </svg>
+);
+
+const BrainIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="ai-chat-icon-sm">
+    <path d="M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.96-3.08 3 3 0 0 1-.34-5.58 2.5 2.5 0 0 1 1.32-4.24 2.5 2.5 0 0 1 1.98-3A2.5 2.5 0 0 1 9.5 2Z" />
+    <path d="M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-1.98-3A2.5 2.5 0 0 0 14.5 2Z" />
+  </svg>
+);
+
+const SearchIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="ai-chat-icon-sm">
+    <circle cx="11" cy="11" r="8" />
+    <path d="m21 21-4.3-4.3" />
+  </svg>
+);
+
+const ContextViewerIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="ai-chat-icon-sm">
+    <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" />
+    <polyline points="14 2 14 8 20 8" />
+    <line x1="16" x2="8" y1="13" y2="13" />
+    <line x1="16" x2="8" y1="17" y2="17" />
+    <line x1="10" x2="8" y1="9" y2="9" />
+  </svg>
+);
+
+const ChevronRightSmallIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="ai-chat-icon-xs">
+    <path d="m9 18 6-6-6-6" />
+  </svg>
+);
+
+const LLMAsAServiceLogo = () => (
+  <svg width="16" height="16" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <ellipse cx="14.0868" cy="59.2146" rx="7.8261" ry="7.7854" fill="#2487D8" />
+    <ellipse cx="24.9013" cy="43.0776" rx="6.11858" ry="6.08676" fill="#2487D8" />
+    <ellipse cx="45.391" cy="43.0776" rx="6.11858" ry="6.08676" fill="#2487D8" />
+    <ellipse cx="65.8813" cy="43.0776" rx="6.11858" ry="6.08676" fill="#2487D8" />
+    <ellipse cx="35.1461" cy="26.5327" rx="4.41103" ry="4.3878" fill="#2487D8" />
+    <ellipse cx="55.6364" cy="26.5327" rx="4.41103" ry="4.3878" fill="#2487D8" />
+    <ellipse cx="45.391" cy="10.3959" rx="2.70351" ry="2.68919" fill="#2487D8" />
+  </svg>
+);
+
+// ============================================================================
+// Isolated Input Component - Prevents full re-renders on every keystroke
+// ============================================================================
+
+interface ChatInputProps {
+  placeholder: string;
+  idle: boolean;
+  onSubmit: (text: string) => void;
+  onStop: () => void;
+  agentOptions: AgentOption[];
+  currentAgentId?: string;
+  onAgentChange?: (agentId: string) => void;
+  agentsLoading: boolean;
+  currentAgentLabel?: string;
+  currentAgentAvatarUrl?: string;
+  // Context viewer props
+  contextSections?: ContextSection[];
+  totalContextTokens?: number;
+  maxContextTokens?: number;
+  enableContextDetailView?: boolean;
+  onContextViewerToggle?: () => void;
+}
+
+const ChatInput = React.memo<ChatInputProps>(({
+  placeholder,
+  idle,
+  onSubmit,
+  onStop,
+  agentOptions,
+  currentAgentId,
+  onAgentChange,
+  agentsLoading,
+  currentAgentLabel,
+  currentAgentAvatarUrl,
+  contextSections = [],
+  totalContextTokens = 0,
+  maxContextTokens = 8000,
+  enableContextDetailView = false,
+}) => {
+  const [inputValue, setInputValue] = useState('');
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [contextViewerOpen, setContextViewerOpen] = useState(false);
+  const [contextViewMode, setContextViewMode] = useState<'summary' | 'detail'>('summary');
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const contextPopoverRef = useRef<HTMLDivElement | null>(null);
+
+  // Auto-resize textarea
+  const autoResize = useCallback(() => {
+    const textarea = textareaRef.current;
+    if (textarea) {
+      textarea.style.height = 'auto';
+      textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`;
+    }
+  }, []);
+
+  // Handle submit
+  const handleSubmit = useCallback(() => {
+    const trimmed = inputValue.trim();
+    if (trimmed && idle) {
+      onSubmit(trimmed);
+      setInputValue('');
+      // Reset textarea height
+      if (textareaRef.current) {
+        textareaRef.current.style.height = 'auto';
+      }
+    }
+  }, [inputValue, idle, onSubmit]);
+
+  // Close dropdown on outside click
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setDropdownOpen(false);
+      }
+    };
+    if (dropdownOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => document.removeEventListener('mousedown', handleClickOutside);
+    }
+  }, [dropdownOpen]);
+
+  // Close context popover on outside click
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (contextPopoverRef.current && !contextPopoverRef.current.contains(event.target as Node)) {
+        setContextViewerOpen(false);
+        setContextViewMode('summary');
+      }
+    };
+    if (contextViewerOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => document.removeEventListener('mousedown', handleClickOutside);
+    }
+  }, [contextViewerOpen]);
+
+  // Format tokens for display
+  const formatTokens = (tokens: number): string => {
+    if (tokens >= 1000) {
+      return `${(tokens / 1000).toFixed(1)}K`;
+    }
+    return tokens.toString();
+  };
+
+  // Calculate token percentage
+  const tokenPercentage = maxContextTokens > 0 ? Math.min((totalContextTokens / maxContextTokens) * 100, 100) : 0;
+  const isOverLimit = totalContextTokens > maxContextTokens;
+
+  // Detect content format (JSON, XML, or Markdown)
+  const detectFormat = (data: Record<string, unknown>): 'json' | 'xml' | 'markdown' => {
+    const str = JSON.stringify(data);
+    if (str.includes('<?xml') || str.includes('</')) return 'xml';
+    // Default to JSON for objects
+    return 'json';
+  };
+
+  // Format content for display
+  const formatContent = (data: Record<string, unknown>, format: 'json' | 'xml' | 'markdown'): string => {
+    if (format === 'json') {
+      return JSON.stringify(data, null, 2);
+    }
+    // For XML or markdown, if it's stored as a string in the data, return it
+    if (typeof data === 'string') return data;
+    return JSON.stringify(data, null, 2);
+  };
+
+  return (
+    <div 
+      className={`ai-chat-panel__input-container ${dropdownOpen ? 'ai-chat-panel__input-container--dropdown-open' : ''}`}
+      ref={containerRef}
+    >
+      <div className="ai-chat-panel__input">
+        <textarea
+          ref={textareaRef}
+          className="ai-chat-input"
+          placeholder={placeholder}
+          value={inputValue}
+          onChange={(e) => {
+            setInputValue(e.target.value);
+            setTimeout(autoResize, 0);
+          }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+              e.preventDefault();
+              handleSubmit();
+            }
+          }}
+          rows={1}
+        />
+      </div>
+      
+      {/* Footer row with agent selector and send button */}
+      <div className="ai-chat-panel__input-footer">
+        {agentOptions.length > 0 ? (
+          <div className="ai-chat-agent-selector">
+            <button
+              className="ai-chat-agent-selector__trigger"
+              onClick={() => setDropdownOpen(!dropdownOpen)}
+              disabled={agentsLoading}
+            >
+              {currentAgentAvatarUrl ? (
+                <img
+                  src={currentAgentAvatarUrl}
+                  alt={currentAgentLabel || 'Agent'}
+                  className="ai-chat-agent-selector__avatar"
+                />
+              ) : (
+                <AgentIcon />
+              )}
+              <span className="ai-chat-agent-selector__label">
+                {agentsLoading ? 'Loading...' : currentAgentLabel || 'Select agent'}
+              </span>
+              {dropdownOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}
+            </button>
+          </div>
+        ) : (
+          <div className="ai-chat-panel__input-footer-spacer" />
+        )}
+
+        {/* Context viewer pill - Cursor style */}
+        {contextSections.length > 0 && (
+          <div className="ai-chat-context-pill-wrapper">
+            <button
+              className={`ai-chat-context-pill ${contextViewerOpen ? 'ai-chat-context-pill--active' : ''} ${isOverLimit ? 'ai-chat-context-pill--warning' : ''}`}
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                console.log('[ContextViewer] Button clicked, current state:', contextViewerOpen);
+                setContextViewerOpen(!contextViewerOpen);
+                if (!contextViewerOpen) {
+                  setContextViewMode('summary');
+                }
+              }}
+              type="button"
+              title="View context"
+            >
+              <span className="ai-chat-context-pill__label">context: {contextSections.length} {contextSections.length === 1 ? 'section' : 'sections'}</span>
+            </button>
+
+            {/* Context popover - positioned relative to pill wrapper */}
+            {contextViewerOpen && (
+              <div 
+                className={`ai-chat-context-popover ${contextViewMode === 'detail' ? 'ai-chat-context-popover--detail' : ''}`}
+                ref={contextPopoverRef}
+                onClick={(e) => e.stopPropagation()}
+              >
+                {/* Summary view */}
+                {contextViewMode === 'summary' && (
+                  <div className="ai-chat-context-popover__summary">
+                    <div className="ai-chat-context-popover__header">
+                      <span className="ai-chat-context-popover__title">Context</span>
+                      <button 
+                        className="ai-chat-context-popover__close"
+                        onClick={() => setContextViewerOpen(false)}
+                        type="button"
+                      >
+                        ×
+                      </button>
+                    </div>
+                    <div className="ai-chat-context-popover__token-bar">
+                      <div className="ai-chat-context-popover__token-info">
+                        <span className={isOverLimit ? 'ai-chat-context-popover__tokens--warning' : ''}>
+                          {formatTokens(totalContextTokens)} tokens
+                        </span>
+                        <span className="ai-chat-context-popover__token-limit">
+                          / {formatTokens(maxContextTokens)} limit
+                        </span>
+                      </div>
+                      <div className="ai-chat-context-popover__progress">
+                        <div 
+                          className={`ai-chat-context-popover__progress-bar ${isOverLimit ? 'ai-chat-context-popover__progress-bar--warning' : ''}`}
+                          style={{ width: `${Math.min(tokenPercentage, 100)}%` }}
+                        />
+                      </div>
+                    </div>
+                    <div className="ai-chat-context-popover__sections">
+                      {contextSections.map((section) => (
+                        <div 
+                          key={section.id} 
+                          className={`ai-chat-context-popover__section-item ${enableContextDetailView ? 'ai-chat-context-popover__section-item--clickable' : ''}`}
+                          onClick={() => {
+                            if (enableContextDetailView) {
+                              setContextViewMode('detail');
+                            }
+                          }}
+                        >
+                          <span className="ai-chat-context-popover__section-icon">📄</span>
+                          <span className="ai-chat-context-popover__section-title">{section.title}</span>
+                          <span className="ai-chat-context-popover__section-tokens">
+                            {section.tokens || Math.ceil(JSON.stringify(section.data).length / 4)}
+                          </span>
+                        </div>
+                      ))}
+                    </div>
+                    {enableContextDetailView && (
+                      <button 
+                        className="ai-chat-context-popover__expand-btn"
+                        onClick={() => setContextViewMode('detail')}
+                        type="button"
+                      >
+                        View details →
+                      </button>
+                    )}
+                  </div>
+                )}
+
+                {/* Detail view */}
+                {contextViewMode === 'detail' && enableContextDetailView && (
+                  <div className="ai-chat-context-popover__detail">
+                    <div className="ai-chat-context-popover__header">
+                      <button 
+                        className="ai-chat-context-popover__back"
+                        onClick={() => setContextViewMode('summary')}
+                        type="button"
+                      >
+                        ← Back
+                      </button>
+                      <span className="ai-chat-context-popover__title">Context Details</span>
+                      <button 
+                        className="ai-chat-context-popover__close"
+                        onClick={() => setContextViewerOpen(false)}
+                        type="button"
+                      >
+                        ×
+                      </button>
+                    </div>
+                    <div className="ai-chat-context-popover__token-bar">
+                      <div className="ai-chat-context-popover__token-info">
+                        <span className={isOverLimit ? 'ai-chat-context-popover__tokens--warning' : ''}>
+                          {formatTokens(totalContextTokens)} tokens
+                        </span>
+                        <span className="ai-chat-context-popover__token-limit">
+                          / {formatTokens(maxContextTokens)} limit
+                        </span>
+                      </div>
+                      <div className="ai-chat-context-popover__progress">
+                        <div 
+                          className={`ai-chat-context-popover__progress-bar ${isOverLimit ? 'ai-chat-context-popover__progress-bar--warning' : ''}`}
+                          style={{ width: `${Math.min(tokenPercentage, 100)}%` }}
+                        />
+                      </div>
+                    </div>
+                    <div className="ai-chat-context-popover__detail-sections">
+                      {contextSections.map((section) => {
+                        const format = detectFormat(section.data);
+                        return (
+                          <details key={section.id} className="ai-chat-context-popover__detail-section" open>
+                            <summary className="ai-chat-context-popover__detail-section-header">
+                              <span className="ai-chat-context-popover__detail-section-title">{section.title}</span>
+                              <span className="ai-chat-context-popover__detail-section-meta">
+                                <code>{`{{${section.id}}}`}</code>
+                                <span>~{section.tokens || Math.ceil(JSON.stringify(section.data).length / 4)}</span>
+                              </span>
+                            </summary>
+                            <pre className="ai-chat-context-popover__detail-content">
+                              <code>{formatContent(section.data, format)}</code>
+                            </pre>
+                          </details>
+                        );
+                      })}
+                    </div>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        )}
+        
+        <button
+          className={`ai-chat-send-button ${idle && !inputValue.trim() ? 'ai-chat-send-button--disabled' : ''} ${!idle ? 'ai-chat-send-button--stop' : ''}`}
+          onClick={() => idle ? handleSubmit() : onStop()}
+          disabled={idle && !inputValue.trim()}
+        >
+          {idle ? <ArrowUpIcon /> : <StopIcon />}
+        </button>
+      </div>
+      
+      {/* Dropdown appears inside the container at the bottom */}
+      {agentOptions.length > 0 && dropdownOpen && (
+        <div className="ai-chat-agent-selector__dropdown-inside">
+          {agentOptions.map((option) => (
+            <button
+              key={option.value}
+              className={`ai-chat-agent-selector__option ${
+                option.value === currentAgentId ? 'ai-chat-agent-selector__option--selected' : ''
+              }`}
+              onClick={() => {
+                if (onAgentChange && option.value !== currentAgentId) {
+                  onAgentChange(option.value);
+                }
+                setDropdownOpen(false);
+              }}
+            >
+              {option.avatarUrl ? (
+                <img
+                  src={option.avatarUrl}
+                  alt={option.label}
+                  className="ai-chat-agent-selector__option-avatar"
+                />
+              ) : option.icon ? (
+                <span className="ai-chat-agent-selector__option-icon">{option.icon}</span>
+              ) : null}
+              <span className="ai-chat-agent-selector__option-content">
+                <span className="ai-chat-agent-selector__option-label">{option.label}</span>
+                {option.description && (
+                  <span className="ai-chat-agent-selector__option-description">{option.description}</span>
+                )}
+              </span>
+              {option.value === currentAgentId && (
+                <span className="ai-chat-agent-selector__option-check">
+                  <CheckIcon />
+                </span>
+              )}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+});
+
+ChatInput.displayName = 'ChatInput';
+
+// ============================================================================
+// Main Component
+// ============================================================================
+
+const AIChatPanel: React.FC<AIChatPanelProps> = ({
+  project_id,
+  initialPrompt = '',
+  title = '',
+  placeholder = 'Type a message',
+  hideInitialPrompt = true,
+  customer = {},
+  data = [],
+  thumbsUpClick,
+  thumbsDownClick,
+  theme = 'light',
+  url = null,
+  initialMessage = '',
+  service = null,
+  historyChangedCallback,
+  responseCompleteCallback,
+  onLoadingChange,
+  promptTemplate = '',
+  actions = [],
+  showNewConversationButton = true,
+  followOnQuestions = [],
+  clearFollowOnQuestionsNextPrompt = false,
+  followOnPrompt = '',
+  showPoweredBy = true,
+  agent = null,
+  conversation = null,
+  initialHistory = {},
+  hideRagContextInPrompt = true,
+  createConversationOnFirstChat = true,
+  mcpServers = [],
+  progressiveActions = true,
+  agentOptions = [],
+  currentAgentId,
+  onAgentChange,
+  agentsLoading = false,
+  contextSections = [],
+  totalContextTokens = 0,
+  maxContextTokens = 8000,
+  enableContextDetailView = false,
+}) => {
+  // ============================================================================
+  // State
+  // ============================================================================
+  const [lastController, setLastController] = useState(new AbortController());
+  const [lastMessages, setLastMessages] = useState<any[]>([]);
+  const [history, setHistory] = useState<Record<string, HistoryEntry>>(initialHistory);
+  const [isLoading, setIsLoading] = useState(false);
+  const [lastPrompt, setLastPrompt] = useState<string | null>(null);
+  const [lastKey, setLastKey] = useState<string | null>(null);
+  const [currentConversation, setCurrentConversation] = useState<string | null>(conversation);
+  const [followOnQuestionsState, setFollowOnQuestionsState] = useState(followOnQuestions);
+  const [thinkingBlocks, setThinkingBlocks] = useState<ThinkingBlock[]>([]);
+  const [currentThinkingIndex, setCurrentThinkingIndex] = useState(0);
+  const [newConversationConfirm, setNewConversationConfirm] = useState(false);
+  const [justReset, setJustReset] = useState(false);
+  const [copiedCallId, setCopiedCallId] = useState<string | null>(null);
+
+  // Refs
+  const bottomRef = useRef<HTMLDivElement | null>(null);
+  const responseAreaRef = useRef<HTMLDivElement | null>(null);
+  
+  // Auto-scroll state - tracks if user has manually scrolled during streaming
+  const [userHasScrolled, setUserHasScrolled] = useState(false);
+  const lastScrollTopRef = useRef<number>(0);
+  const scrollRAFRef = useRef<number | null>(null);
+  const lastScrollTimeRef = useRef<number>(0);
+  
+  // === NEW: Clean history management refs ===
+  // Track previous idle state to detect transitions (false→true = completion)
+  const prevIdleRef = useRef<boolean>(true);
+  // Track if we've already notified for the current response (prevent double-notify)
+  const hasNotifiedCompletionRef = useRef<boolean>(true);
+  // Store the latest processed history for callbacks (doesn't trigger re-renders)
+  const latestHistoryRef = useRef<Record<string, HistoryEntry>>(initialHistory);
+
+  // ============================================================================
+  // useLLM Hook
+  // ============================================================================
+  const llmResult = useLLM({
+    project_id,
+    customer: customer as LLMAsAServiceCustomer | undefined,
+    ...(url && { url }),
+    ...(service && { group_id: service }),
+    ...(agent && { agent }),
+    ...(mcpServers && mcpServers.length > 0 && { mcp_servers: mcpServers }),
+  });
+  
+  const {
+    send,
+    response,
+    idle,
+    lastCallId,
+    stop,
+    setResponse,
+  } = llmResult;
+  
+  // Tool-related properties (may not exist on all versions of useLLM)
+  const toolList = (llmResult as any).toolList || [];
+  const toolsLoading = (llmResult as any).toolsLoading || false;
+  const toolsFetchError = (llmResult as any).toolsFetchError || null;
+  
+  // Refs to track latest values for cleanup and callbacks (must be after useLLM)
+  const historyCallbackRef = useRef(historyChangedCallback);
+  const responseCompleteCallbackRef = useRef(responseCompleteCallback);
+  const responseRef = useRef(response);
+  const lastKeyRef = useRef(lastKey);
+  const lastCallIdRef = useRef(lastCallId);
+  const lastPromptRef = useRef(lastPrompt);
+  
+  // Keep refs in sync (these don't cause re-renders)
+  historyCallbackRef.current = historyChangedCallback;
+  responseCompleteCallbackRef.current = responseCompleteCallback;
+  responseRef.current = response;
+  lastKeyRef.current = lastKey;
+  lastCallIdRef.current = lastCallId;
+  lastPromptRef.current = lastPrompt;
+
+  // ============================================================================
+  // Memoized Values
+  // ============================================================================
+  const prismStyle = useMemo(
+    () => (theme === 'light' ? materialLight : materialDark),
+    [theme]
+  );
+
+  // Browser info for context (matches ChatPanel)
+  const browserInfo = useMemo(() => {
+    if (typeof window === 'undefined') return null;
+    return {
+      currentTimeUTC: new Date().toISOString(),
+      userTimezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+      userLanguage: navigator.language,
+    };
+  }, []);
+
+  // Data with extras (matches ChatPanel's dataWithExtras)
+  const dataWithExtras = useCallback(() => {
+    return [
+      ...data,
+      { key: '--customer_id', data: customer?.customer_id ?? '' },
+      { key: '--customer_name', data: customer?.customer_name ?? '' },
+      { key: '--customer_user_id', data: customer?.customer_user_id ?? '' },
+      { key: '--customer_user_name', data: customer?.customer_user_name ?? '' },
+      { key: '--customer_user_email', data: customer?.customer_user_email ?? '' },
+      { key: '--currentTimeUTC', data: browserInfo?.currentTimeUTC ?? '' },
+      { key: '--userTimezone', data: browserInfo?.userTimezone ?? '' },
+      { key: '--userLanguage', data: browserInfo?.userLanguage ?? '' },
+    ];
+  }, [data, customer, browserInfo]);
+
+  // Current agent info for display
+  const currentAgentInfo = useMemo(() => {
+    if (!currentAgentId || agentOptions.length === 0) return { label: null, avatarUrl: null };
+    const currentAgent = agentOptions.find(a => a.value === currentAgentId);
+    return {
+      label: currentAgent?.label || currentAgentId,
+      avatarUrl: currentAgent?.avatarUrl || null,
+    };
+  }, [currentAgentId, agentOptions]);
+
+  const currentAgentLabel = currentAgentInfo.label;
+  const currentAgentAvatarUrl = currentAgentInfo.avatarUrl;
+
+  // ============================================================================
+  // Callbacks
+  // ============================================================================
+  
+  // Clean content for thinking block display
+  const cleanContentForDisplay = useCallback((content: string): string => {
+    let cleaned = content
+      .replace(/\*\*(.*?)\*\*/g, '$1')
+      .replace(/\*(.*?)\*/g, '$1')
+      .replace(/\n+/g, ' ')
+      .replace(/\s+/g, ' ')
+      .trim();
+    if (cleaned.length > 100) {
+      cleaned = cleaned.substring(0, 100) + '...';
+    }
+    return cleaned || 'Thinking';
+  }, []);
+
+  // Process thinking tags from response
+  const processThinkingTags = useCallback((text: string): { cleanedText: string; blocks: ThinkingBlock[] } => {
+    const blocks: ThinkingBlock[] = [];
+    let index = 0;
+    
+    // Extract reasoning blocks
+    const reasoningRegex = /<reasoning>([\s\S]*?)<\/reasoning>/gi;
+    let match;
+    while ((match = reasoningRegex.exec(text)) !== null) {
+      blocks.push({ type: 'reasoning', content: match[1] ?? '', index: index++ });
+    }
+    
+    // Extract searching blocks
+    const searchingRegex = /<searching>([\s\S]*?)<\/searching>/gi;
+    while ((match = searchingRegex.exec(text)) !== null) {
+      blocks.push({ type: 'searching', content: match[1] ?? '', index: index++ });
+    }
+    
+    // Sort by position in original text
+    blocks.sort((a, b) => a.index - b.index);
+    
+    // Clean the text
+    let cleanedText = text
+      .replace(/<reasoning>[\s\S]*?<\/reasoning>/gi, '')
+      .replace(/<searching>[\s\S]*?<\/searching>/gi, '')
+      .trim();
+    
+    return { cleanedText, blocks };
+  }, []);
+
+  // Built-in action for agent suggestion cards
+  // Pattern: [SUGGEST_AGENT:agent-id|Agent Name|Brief reason]
+  const AGENT_SUGGESTION_ACTION = {
+    pattern: '\\[SUGGEST_AGENT:([^|\\]]+)\\|([^|\\]]+)\\|([^\\]]+)\\]',
+    markdown: '<agent-suggestion data-agent-id="$1" data-agent-name="$2" data-reason="$3"></agent-suggestion>',
+  };
+
+  // Process actions in content
+  const processActions = useCallback((content: string): string => {
+    // Combine built-in actions with user-provided actions
+    const allActions = [AGENT_SUGGESTION_ACTION, ...(actions || [])];
+    
+    let processed = content;
+    allActions.forEach((action) => {
+      try {
+        const regex = new RegExp(action.pattern, 'g');
+        if (action.markdown) {
+          processed = processed.replace(regex, action.markdown);
+        }
+      } catch (e) {
+        console.error('Invalid action pattern:', action.pattern);
+      }
+    });
+    
+    return processed;
+  }, [actions]);
+
+  // Format prompt for display - strips timestamp prefix and RAG context
+  const formatPromptForDisplay = useCallback((prompt: string): string => {
+    let displayPrompt = prompt;
+    
+    // Strip timestamp prefix (matches ChatPanel)
+    const isoTimestampRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z:/;
+    if (isoTimestampRegex.test(displayPrompt)) {
+      const colonIndex = displayPrompt.indexOf(':', 19);
+      displayPrompt = displayPrompt.substring(colonIndex + 1);
+    } else if (/^\d+:/.test(displayPrompt)) {
+      const colonIndex = displayPrompt.indexOf(':');
+      displayPrompt = displayPrompt.substring(colonIndex + 1);
+    }
+    
+    // Strip RAG context if enabled
+    if (hideRagContextInPrompt) {
+      const contextIndex = displayPrompt.indexOf('---context---');
+      if (contextIndex !== -1) {
+        displayPrompt = displayPrompt.substring(0, contextIndex).trim();
+      }
+    }
+    
+    return displayPrompt;
+  }, [hideRagContextInPrompt]);
+
+  // Copy to clipboard
+  const copyToClipboard = useCallback(async (text: string, callId: string) => {
+    try {
+      // Strip markdown/HTML for clipboard
+      const cleanText = text
+        .replace(/<[^>]*>/g, '')
+        .replace(/\*\*(.*?)\*\*/g, '$1')
+        .replace(/\*(.*?)\*/g, '$1')
+        .replace(/#{1,6}\s/g, '')
+        .replace(/\[([^\]]+)\]\([^)]+\)/g, '$1');
+      
+      await navigator.clipboard.writeText(cleanText);
+      setCopiedCallId(callId);
+      setTimeout(() => setCopiedCallId(null), 2000);
+    } catch (err) {
+      console.error('Failed to copy:', err);
+    }
+  }, []);
+
+  // Scroll to bottom - throttled using RAF to prevent layout thrashing
+  const scrollToBottom = useCallback(() => {
+    // Cancel any pending scroll
+    if (scrollRAFRef.current) {
+      cancelAnimationFrame(scrollRAFRef.current);
+    }
+    
+    // Throttle to max once per 100ms to prevent performance issues during streaming
+    const now = Date.now();
+    if (now - lastScrollTimeRef.current < 100) {
+      // Schedule for next frame instead
+      scrollRAFRef.current = requestAnimationFrame(() => {
+        bottomRef.current?.scrollIntoView({ behavior: 'auto' });
+        lastScrollTimeRef.current = Date.now();
+      });
+      return;
+    }
+    
+    // Use 'auto' instead of 'smooth' during streaming for better performance
+    bottomRef.current?.scrollIntoView({ behavior: 'auto' });
+    lastScrollTimeRef.current = now;
+  }, []);
+
+  // Continue chat (send message) - matches ChatPanel behavior exactly
+  // promptText is now required - comes from the isolated ChatInput component
+  const continueChat = useCallback((promptText: string) => {
+    // Clear thinking blocks for new response
+    setThinkingBlocks([]);
+    setCurrentThinkingIndex(0);
+    
+    // Reset scroll tracking for new message - enable auto-scroll
+    setUserHasScrolled(false);
+    
+    // Handle stop if not idle (matches ChatPanel)
+    if (!idle) {
+      stop(lastController);
+      setHistory((prevHistory) => ({
+        ...prevHistory,
+        [lastKey ?? '']: {
+          content: processThinkingTags(response).cleanedText + '\n\n(response cancelled)',
+          callId: lastCallId || '',
+        },
+      }));
+      return;
+    }
+    
+    if (clearFollowOnQuestionsNextPrompt) {
+      setFollowOnQuestionsState([]);
+    }
+    
+    const promptToSend = promptText;
+    
+    if (!promptToSend || !promptToSend.trim()) return;
+    
+    setIsLoading(true);
+    
+    // Build messagesAndHistory from history (matches ChatPanel)
+    const messagesAndHistory: { role: string; content: string }[] = [];
+    Object.entries(history).forEach(([historyPrompt, historyEntry]) => {
+      // Strip timestamp prefix from prompt before using it (matches ChatPanel)
+      let promptForHistory = historyPrompt;
+      const isoTimestampRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z:/;
+      if (isoTimestampRegex.test(historyPrompt)) {
+        const colonIndex = historyPrompt.indexOf(':', 19);
+        promptForHistory = historyPrompt.substring(colonIndex + 1);
+      } else if (/^\d+:/.test(historyPrompt)) {
+        const colonIndex = historyPrompt.indexOf(':');
+        promptForHistory = historyPrompt.substring(colonIndex + 1);
+      }
+      
+      messagesAndHistory.push({ role: 'user', content: promptForHistory });
+      messagesAndHistory.push({ role: 'assistant', content: historyEntry.content });
+    });
+    
+    // Generate unique key using ISO timestamp prefix + prompt (matches ChatPanel)
+    const timestamp = new Date().toISOString();
+    const promptKey = `${timestamp}:${promptToSend.trim()}`;
+    
+    // Set history entry before sending (matches ChatPanel)
+    setHistory((prevHistory) => ({
+      ...prevHistory,
+      [promptKey]: { content: '', callId: '' },
+    }));
+    
+    // Build the full prompt - only apply template for first message (matches ChatPanel)
+    let fullPromptToSend = promptToSend.trim();
+    if (Object.keys(history).length === 0 && promptTemplate) {
+      fullPromptToSend = promptTemplate.replace('{{prompt}}', fullPromptToSend);
+    }
+    
+    // Add follow-on prompt
+    if (followOnPrompt) {
+      fullPromptToSend += `\n\n${followOnPrompt}`;
+    }
+    
+    const newController = new AbortController();
+    setLastController(newController);
+    
+    // Pass data array to send() for template replacement (e.g., {{Context}})
+    // Pass service (group_id) and customer data just like ChatPanel does
+    send(
+      fullPromptToSend,
+      messagesAndHistory,
+      [
+        ...dataWithExtras(),
+        { key: '--messages', data: messagesAndHistory.length.toString() },
+      ],
+      true, // stream
+      true, // includeHistory
+      service, // group_id from agent config
+      currentConversation,
+      newController
+    );
+    
+    setLastPrompt(promptToSend.trim());
+    setLastMessages(messagesAndHistory);
+    setLastKey(promptKey);
+    
+    // Scroll to bottom after adding the new prompt to show it immediately
+    // Use setTimeout to ensure the DOM has updated with the new history entry
+    setTimeout(() => {
+      scrollToBottom();
+    }, 0);
+  }, [
+    idle,
+    stop,
+    lastController,
+    lastKey,
+    response,
+    lastCallId,
+    processThinkingTags,
+    clearFollowOnQuestionsNextPrompt,
+    history,
+    promptTemplate,
+    followOnPrompt,
+    send,
+    service,
+    currentConversation,
+    dataWithExtras,
+    scrollToBottom,
+  ]);
+
+  // Handle suggestion click - directly sends like ChatPanel does
+  const handleSuggestionClick = useCallback((question: string) => {
+    continueChat(question);
+  }, [continueChat]);
+
+  // Handle stop - stable callback for ChatInput
+  const handleStop = useCallback(() => {
+    stop(lastController);
+  }, [stop, lastController]);
+
+  // Reset conversation
+  const handleNewConversation = useCallback(() => {
+    if (!newConversationConfirm) {
+      setNewConversationConfirm(true);
+      setTimeout(() => setNewConversationConfirm(false), 3000);
+      return;
+    }
+    
+    setNewConversationConfirm(false);
+    
+    if (!idle) {
+      stop(lastController);
+    }
+    
+    setResponse('');
+    setHistory({});
+    latestHistoryRef.current = {}; // Keep ref in sync
+    hasNotifiedCompletionRef.current = true; // Prevent stale notifications
+    setLastMessages([]);
+    setLastPrompt(null);
+    setLastKey(null);
+    setIsLoading(false);
+    setCurrentConversation(null);
+    setFollowOnQuestionsState(followOnQuestions);
+    setThinkingBlocks([]);
+    setCurrentThinkingIndex(0);
+    setJustReset(true);
+    setLastController(new AbortController());
+    setUserHasScrolled(false);
+    
+    setTimeout(() => {
+      setJustReset(false);
+      responseAreaRef.current?.scrollTo({ top: 0, behavior: 'smooth' });
+    }, 100);
+  }, [newConversationConfirm, idle, stop, lastController, setResponse, followOnQuestions]);
+
+  // ============================================================================
+  // Effects - CLEAN DESIGN: No overlapping effects, explicit triggers only
+  // ============================================================================
+
+  // Effect 1: Process response for DISPLAY ONLY (no callbacks here)
+  // Updates state for rendering, stores in ref for later callback use
+  useEffect(() => {
+    if (!response || !lastKey || justReset) return;
+    
+    const { cleanedText, blocks } = processThinkingTags(response);
+    const processedContent = processActions(cleanedText);
+    
+    // Update display state
+    setThinkingBlocks(blocks);
+    
+    // Update history state for display AND store in ref for callbacks
+    setHistory((prev) => {
+      const newHistory = { ...prev };
+      newHistory[lastKey] = {
+        content: processedContent,
+        callId: lastCallId || '',
+      };
+      // Keep ref in sync for callbacks (this doesn't trigger re-renders)
+      latestHistoryRef.current = newHistory;
+      return newHistory;
+    });
+  }, [response, lastKey, lastCallId, processThinkingTags, processActions, justReset]);
+
+  // Effect 2: Handle response completion - SINGLE POINT for all completion logic
+  // Triggers ONLY when idle transitions from false → true
+  useEffect(() => {
+    const wasStreaming = !prevIdleRef.current;
+    const isNowIdle = idle;
+    
+    // Update ref for next comparison
+    prevIdleRef.current = idle;
+    
+    // Only act on completion transition (was streaming, now idle)
+    if (wasStreaming && isNowIdle && !hasNotifiedCompletionRef.current) {
+      hasNotifiedCompletionRef.current = true;
+      
+      // Get the latest values from refs (stable, not from closure)
+      const currentHistory = latestHistoryRef.current;
+      const currentLastKey = lastKeyRef.current;
+      const currentLastCallId = lastCallIdRef.current;
+      const currentLastPrompt = lastPromptRef.current;
+      
+      // Notify history changed (once, on completion)
+      if (historyCallbackRef.current && Object.keys(currentHistory).length > 0) {
+        historyCallbackRef.current(currentHistory);
+      }
+      
+      // Notify response complete
+      if (responseCompleteCallbackRef.current && currentLastKey && currentLastCallId) {
+        const entry = currentHistory[currentLastKey];
+        if (entry && entry.content) {
+          responseCompleteCallbackRef.current(currentLastCallId, currentLastPrompt || '', entry.content);
+        }
+      }
+    }
+    
+    // Reset notification flag when starting a new stream
+    if (!isNowIdle && hasNotifiedCompletionRef.current) {
+      hasNotifiedCompletionRef.current = false;
+    }
+  }, [idle]); // ONLY depends on idle - no history, no callbacks in deps
+
+  // Auto-scroll to bottom - only while streaming and user hasn't manually scrolled
+  useEffect(() => {
+    // Only auto-scroll if:
+    // 1. We're actively streaming (!idle)
+    // 2. User hasn't manually scrolled up during this response
+    // 3. We have content to show (response exists)
+    if (!idle && !userHasScrolled && response) {
+      scrollToBottom();
+    }
+  }, [response, scrollToBottom, idle, userHasScrolled]); // Removed history dependency
+
+  // Ref to track idle state for scroll handler (avoids stale closure)
+  const idleRef = useRef(idle);
+  idleRef.current = idle;
+  
+  // Ref to track userHasScrolled to avoid redundant state updates  
+  const userHasScrolledRef = useRef(userHasScrolled);
+  userHasScrolledRef.current = userHasScrolled;
+
+  // Detect user scroll to disable auto-scroll
+  useEffect(() => {
+    const scrollArea = responseAreaRef.current;
+    if (!scrollArea) return;
+
+    // Get the actual scrollable element (ScrollArea wraps a viewport)
+    const scrollViewport = scrollArea.querySelector('[data-radix-scroll-area-viewport]') as HTMLElement;
+    const scrollElement = scrollViewport || scrollArea;
+
+    const handleScroll = () => {
+      // Skip if not streaming or already marked as user-scrolled
+      if (idleRef.current || userHasScrolledRef.current) return;
+
+      const currentScrollTop = scrollElement.scrollTop;
+      const scrollHeight = scrollElement.scrollHeight;
+      const clientHeight = scrollElement.clientHeight;
+
+      // If user scrolled UP (away from bottom), disable auto-scroll
+      // We consider "near bottom" as within 100px to account for smooth scrolling
+      const isNearBottom = scrollHeight - currentScrollTop - clientHeight < 100;
+      
+      // User scrolled up if:
+      // 1. They scrolled upward (currentScrollTop < lastScrollTopRef.current)
+      // 2. AND they're not near the bottom
+      if (currentScrollTop < lastScrollTopRef.current && !isNearBottom) {
+        setUserHasScrolled(true);
+      }
+
+      lastScrollTopRef.current = currentScrollTop;
+    };
+
+    scrollElement.addEventListener('scroll', handleScroll, { passive: true });
+    return () => scrollElement.removeEventListener('scroll', handleScroll);
+  }, []); // Empty deps - handler uses refs to get current values
+
+  // Update follow-on questions from props
+  useEffect(() => {
+    setFollowOnQuestionsState(followOnQuestions);
+  }, [followOnQuestions]);
+
+  // Notify loading state changes
+  useEffect(() => {
+    const currentlyLoading = isLoading || !idle;
+    if (onLoadingChange) {
+      onLoadingChange(currentlyLoading);
+    }
+  }, [isLoading, idle, onLoadingChange]);
+
+  // Save history on unmount (for when switching conversations mid-stream)
+  useEffect(() => {
+    return () => {
+      // Cancel any pending scroll animation frame
+      if (scrollRAFRef.current) {
+        cancelAnimationFrame(scrollRAFRef.current);
+      }
+      
+      // On unmount, save the current history including any partial response
+      const currentHistory = { ...latestHistoryRef.current };
+      const currentResponse = responseRef.current;
+      const currentLastKey = lastKeyRef.current;
+      const currentLastCallId = lastCallIdRef.current;
+      
+      // If there's a response in progress, make sure it's saved
+      if (currentLastKey && currentResponse) {
+        currentHistory[currentLastKey] = {
+          content: currentResponse + '\n\n(response interrupted)',
+          callId: currentLastCallId || '',
+        };
+      }
+      
+      // Notify parent of final history state (only if not already notified)
+      if (historyCallbackRef.current && Object.keys(currentHistory).length > 0 && !hasNotifiedCompletionRef.current) {
+        historyCallbackRef.current(currentHistory);
+      }
+    };
+  }, []); // Empty deps - only run cleanup on unmount
+
+  // Auto-send initialPrompt when it changes (matches ChatPanel behavior)
+  // IMPORTANT: Skip if we have initialHistory - that means we're loading an existing conversation
+  useEffect(() => {
+    // Don't auto-send initialPrompt if we loaded existing history
+    // This prevents unwanted LLM calls when switching to loaded conversations
+    const hasLoadedHistory = initialHistory && Object.keys(initialHistory).length > 0;
+    
+    if (initialPrompt && initialPrompt !== '' && initialPrompt !== lastPrompt && !hasLoadedHistory) {
+      setIsLoading(true);
+      setThinkingBlocks([]);
+      setCurrentThinkingIndex(0);
+      setUserHasScrolled(false); // Enable auto-scroll for new prompt
+      
+      const controller = new AbortController();
+      setLastController(controller);
+      
+      // Generate timestamp-prefixed key (matches ChatPanel)
+      const timestamp = new Date().toISOString();
+      const promptKey = `${timestamp}:${initialPrompt}`;
+      
+      // Set history entry before sending (matches ChatPanel)
+      setHistory({ [promptKey]: { content: '', callId: '' } });
+      
+      // Build prompt with template
+      let fullPrompt = initialPrompt;
+      if (promptTemplate) {
+        fullPrompt = promptTemplate.replace('{{prompt}}', initialPrompt);
+      }
+      
+      send(
+        fullPrompt,
+        [],
+        [
+          ...dataWithExtras(),
+          { key: '--messages', data: '0' },
+        ],
+        true,
+        true,
+        service,
+        currentConversation,
+        controller
+      );
+      
+      setLastPrompt(initialPrompt);
+      setLastMessages([]);
+      setLastKey(promptKey);
+    }
+  }, [initialPrompt, initialHistory]);
+
+  // ============================================================================
+  // Render Helpers
+  // ============================================================================
+
+  // Code block component for markdown
+  const CodeBlock = useCallback(({ node, inline, className, children, ...props }: any) => {
+    const match = /language-(\w+)/.exec(className || '');
+    return !inline && match ? (
+      <SyntaxHighlighter
+        style={prismStyle}
+        language={match[1]}
+        PreTag="div"
+        {...props}
+      >
+        {String(children).replace(/\n$/, '')}
+      </SyntaxHighlighter>
+    ) : (
+      <code className={className} {...props}>
+        {children}
+      </code>
+    );
+  }, [prismStyle]);
+
+  // Agent suggestion card component for inline agent handoff
+  const AgentSuggestionCard = useCallback(({ agentId, agentName, reason }: { 
+    agentId: string; 
+    agentName: string; 
+    reason: string;
+  }) => {
+    if (!agentId || !onAgentChange) return null;
+    
+    // Validate agent ID - must be a valid UUID or exist in agentOptions
+    const isValidUUID = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(agentId);
+    const agentOption = agentOptions.find(opt => opt.value === agentId);
+    const isKnownAgent = !!agentOption;
+    const isValidAgent = isValidUUID || isKnownAgent;
+    
+    // Look up avatar URL from agentOptions
+    const avatarUrl = agentOption?.avatarUrl;
+    
+    // Check if this is the currently active agent (already switched)
+    const isCurrentAgent = currentAgentId === agentId;
+    
+    // Don't render if agent ID looks like a placeholder (e.g., {agent-id}, $1, etc.)
+    if (!isValidAgent || agentId.includes('{') || agentId.includes('$')) {
+      // Render a disabled version
+      // Use span instead of div to avoid nesting issues in markdown <p> tags
+      return (
+        <span className="ai-chat-agent-suggestion ai-chat-agent-suggestion--invalid">
+          <span className="ai-chat-agent-suggestion__content">
+            {avatarUrl ? (
+              <img 
+                src={avatarUrl} 
+                alt={agentName} 
+                className="ai-chat-agent-suggestion__avatar"
+              />
+            ) : (
+              <span className="ai-chat-agent-suggestion__icon">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <path d="M12 8V4H8" />
+                  <rect width="16" height="12" x="4" y="8" rx="2" />
+                  <path d="M2 14h2" />
+                  <path d="M20 14h2" />
+                  <path d="M15 13v2" />
+                  <path d="M9 13v2" />
+                </svg>
+              </span>
+            )}
+            <span className="ai-chat-agent-suggestion__text">
+              <span className="ai-chat-agent-suggestion__label">Suggested: {agentName}</span>
+              {reason && <span className="ai-chat-agent-suggestion__reason">{reason}</span>}
+            </span>
+          </span>
+          <span className="ai-chat-agent-suggestion__unavailable">Agent unavailable</span>
+        </span>
+      );
+    }
+    
+    // Already switched to this agent
+    if (isCurrentAgent) {
+      return (
+        <span className="ai-chat-agent-suggestion ai-chat-agent-suggestion--switched">
+          <span className="ai-chat-agent-suggestion__content">
+            {avatarUrl ? (
+              <img 
+                src={avatarUrl} 
+                alt={agentName} 
+                className="ai-chat-agent-suggestion__avatar"
+              />
+            ) : (
+              <span className="ai-chat-agent-suggestion__icon ai-chat-agent-suggestion__icon--switched">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <polyline points="20 6 9 17 4 12" />
+                </svg>
+              </span>
+            )}
+            <span className="ai-chat-agent-suggestion__text">
+              <span className="ai-chat-agent-suggestion__label">Switched to {agentName}</span>
+              {reason && <span className="ai-chat-agent-suggestion__reason">{reason}</span>}
+            </span>
+          </span>
+          <span className="ai-chat-agent-suggestion__switched-badge">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+              <polyline points="20 6 9 17 4 12" />
+            </svg>
+            Active
+          </span>
+        </span>
+      );
+    }
+    
+    return (
+      <span className="ai-chat-agent-suggestion">
+        <span className="ai-chat-agent-suggestion__content">
+          {avatarUrl ? (
+            <img 
+              src={avatarUrl} 
+              alt={agentName} 
+              className="ai-chat-agent-suggestion__avatar"
+            />
+          ) : (
+            <span className="ai-chat-agent-suggestion__icon">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <path d="M12 8V4H8" />
+                <rect width="16" height="12" x="4" y="8" rx="2" />
+                <path d="M2 14h2" />
+                <path d="M20 14h2" />
+                <path d="M15 13v2" />
+                <path d="M9 13v2" />
+              </svg>
+            </span>
+          )}
+          <span className="ai-chat-agent-suggestion__text">
+            <span className="ai-chat-agent-suggestion__label">Suggested: {agentName}</span>
+            {reason && <span className="ai-chat-agent-suggestion__reason">{reason}</span>}
+          </span>
+        </span>
+        <Button 
+          variant="default"
+          size="sm"
+          className="ai-chat-agent-suggestion__button"
+          onClick={() => onAgentChange(agentId)}
+        >
+          Switch
+        </Button>
+      </span>
+    );
+  }, [onAgentChange, agentOptions, currentAgentId]);
+
+  // Markdown components including custom agent-suggestion element
+  const markdownComponents = useMemo(() => ({
+    code: CodeBlock,
+    'agent-suggestion': ({ node, ...props }: any) => {
+      const agentId = props['data-agent-id'];
+      const agentName = props['data-agent-name'];
+      const reason = props['data-reason'];
+      if (!agentId) return null;
+      return (
+        <AgentSuggestionCard
+          agentId={agentId}
+          agentName={agentName || agentId}
+          reason={reason || ''}
+        />
+      );
+    },
+  }), [CodeBlock, AgentSuggestionCard]);
+
+  // Render thinking blocks
+  const renderThinkingBlocks = useCallback(() => {
+    if (thinkingBlocks.length === 0) return null;
+    
+    const currentBlock = thinkingBlocks[currentThinkingIndex];
+    if (!currentBlock) return null;
+    
+    const isReasoning = currentBlock.type === 'reasoning';
+    const icon = isReasoning ? <BrainIcon /> : <SearchIcon />;
+    const title = isReasoning ? 'Reasoning' : 'Searching';
+    
+    return (
+      <div className="ai-chat-thinking">
+        <div className="ai-chat-thinking__header">
+          <span className="ai-chat-thinking__icon">{icon}</span>
+          <span className="ai-chat-thinking__title">{title}</span>
+          {thinkingBlocks.length > 1 && (
+            <span className="ai-chat-thinking__nav">
+              <button
+                onClick={() => setCurrentThinkingIndex(Math.max(0, currentThinkingIndex - 1))}
+                disabled={currentThinkingIndex === 0}
+              >
+                ‹
+              </button>
+              <span>{currentThinkingIndex + 1} / {thinkingBlocks.length}</span>
+              <button
+                onClick={() => setCurrentThinkingIndex(Math.min(thinkingBlocks.length - 1, currentThinkingIndex + 1))}
+                disabled={currentThinkingIndex === thinkingBlocks.length - 1}
+              >
+                ›
+              </button>
+            </span>
+          )}
+        </div>
+        <div className="ai-chat-thinking__content">
+          {cleanContentForDisplay(currentBlock.content)}
+        </div>
+      </div>
+    );
+  }, [thinkingBlocks, currentThinkingIndex, cleanContentForDisplay]);
+
+  // ============================================================================
+  // Render
+  // ============================================================================
+
+  const panelClasses = ['ai-chat-panel', theme === 'dark' ? 'dark-theme' : ''].filter(Boolean).join(' ');
+
+  return (
+    <div className={panelClasses}>
+      {/* Title */}
+      {title && <div className="ai-chat-panel__title">{title}</div>}
+      
+      {/* Messages Area */}
+      <ScrollArea className="ai-chat-panel__messages" ref={responseAreaRef}>
+        {/* Initial Message */}
+        {initialMessage && (
+          <div className="ai-chat-message ai-chat-message--assistant">
+            <div className="ai-chat-message__content">
+              <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]}>
+                {initialMessage}
+              </ReactMarkdown>
+            </div>
+          </div>
+        )}
+        
+        {/* History */}
+        {Object.entries(history).map(([prompt, entry], index) => {
+          const isLastEntry = index === Object.keys(history).length - 1;
+          const { cleanedText } = processThinkingTags(entry.content);
+          
+          return (
+            <div key={index} className="ai-chat-entry">
+              {/* User Message */}
+              {!(hideInitialPrompt && index === 0) && (
+                <div className="ai-chat-message ai-chat-message--user">
+                  <div className="ai-chat-message__content">
+                    {formatPromptForDisplay(prompt)}
+                  </div>
+                </div>
+              )}
+              
+              {/* Assistant Response */}
+              <div className="ai-chat-message ai-chat-message--assistant">
+                <div className="ai-chat-message__content">
+                  {/* Streaming state */}
+                  {isLastEntry && (isLoading || !idle) && !justReset ? (
+                    <div className="ai-chat-streaming">
+                      {thinkingBlocks.length > 0 && renderThinkingBlocks()}
+                      
+                      {cleanedText ? (
+                        <ReactMarkdown
+                          remarkPlugins={[remarkGfm]}
+                          rehypePlugins={[rehypeRaw]}
+                          components={markdownComponents}
+                        >
+                          {cleanedText}
+                        </ReactMarkdown>
+                      ) : (
+                        <div className="ai-chat-loading">
+                          <span>Thinking</span>
+                          <span className="ai-chat-loading__dots">
+                            <span className="ai-chat-loading__dot" />
+                            <span className="ai-chat-loading__dot" />
+                            <span className="ai-chat-loading__dot" />
+                          </span>
+                        </div>
+                      )}
+                    </div>
+                  ) : (
+                    <>
+                      {isLastEntry && thinkingBlocks.length > 0 && renderThinkingBlocks()}
+                      <ReactMarkdown
+                        remarkPlugins={[remarkGfm]}
+                        rehypePlugins={[rehypeRaw]}
+                        components={markdownComponents}
+                      >
+                        {cleanedText}
+                      </ReactMarkdown>
+                    </>
+                  )}
+                </div>
+                
+                {/* Action Buttons */}
+                {idle && !isLoading && (
+                  <div className="ai-chat-message__actions">
+                    <Tooltip content={copiedCallId === entry.callId ? 'Copied!' : 'Copy'}>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        onClick={() => copyToClipboard(entry.content, entry.callId)}
+                      >
+                        <CopyIcon />
+                      </Button>
+                    </Tooltip>
+                    
+                    {thumbsUpClick && (
+                      <Tooltip content="Good response">
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          onClick={() => thumbsUpClick(entry.callId)}
+                        >
+                          <ThumbsUpIcon />
+                        </Button>
+                      </Tooltip>
+                    )}
+                    
+                    {thumbsDownClick && (
+                      <Tooltip content="Poor response">
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          onClick={() => thumbsDownClick(entry.callId)}
+                        >
+                          <ThumbsDownIcon />
+                        </Button>
+                      </Tooltip>
+                    )}
+                  </div>
+                )}
+              </div>
+            </div>
+          );
+        })}
+        
+        {/* Follow-on Questions */}
+        {followOnQuestionsState.length > 0 && idle && !isLoading && (
+          <div className="ai-chat-suggestions">
+            {followOnQuestionsState.map((question, index) => (
+              <Button
+                key={index}
+                variant="outline"
+                size="sm"
+                onClick={() => handleSuggestionClick(question)}
+                className="ai-chat-suggestions__button"
+              >
+                {question}
+              </Button>
+            ))}
+          </div>
+        )}
+        
+        <div ref={bottomRef} />
+      </ScrollArea>
+      
+      {/* New Conversation Button */}
+      {showNewConversationButton && (
+        <div className="ai-chat-panel__new-conversation">
+          <Button
+            variant={newConversationConfirm ? 'destructive' : 'outline'}
+            size="sm"
+            onClick={handleNewConversation}
+            className="ai-chat-new-conversation"
+          >
+            {newConversationConfirm ? 'Click to Confirm' : 'New Conversation'}
+          </Button>
+        </div>
+      )}
+      
+      {/* Input Area - Isolated component for performance */}
+      <ChatInput
+        placeholder={placeholder}
+        idle={idle}
+        onSubmit={continueChat}
+        onStop={handleStop}
+        agentOptions={agentOptions}
+        currentAgentId={currentAgentId}
+        onAgentChange={onAgentChange}
+        agentsLoading={agentsLoading}
+        currentAgentLabel={currentAgentLabel || undefined}
+        currentAgentAvatarUrl={currentAgentAvatarUrl || undefined}
+        contextSections={contextSections}
+        totalContextTokens={totalContextTokens}
+        maxContextTokens={maxContextTokens}
+        enableContextDetailView={enableContextDetailView}
+      />
+      
+      {/* Footer */}
+      {showPoweredBy && (
+        <div className="ai-chat-panel__footer">
+          {mcpServers && mcpServers.length > 0 && (
+            <div className="ai-chat-tools-status">
+              <span
+                className={`ai-chat-tools-status__dot ${
+                  toolsLoading ? 'loading' : toolsFetchError ? 'error' : 'ready'
+                }`}
+              />
+              <span className="ai-chat-tools-status__text">
+                {toolsLoading
+                  ? 'tools loading...'
+                  : toolsFetchError
+                  ? 'tool fetch failed'
+                  : toolList.length > 0
+                  ? `${toolList.length} tools ready`
+                  : 'no tools found'}
+              </span>
+            </div>
+          )}
+          
+          <div className="ai-chat-powered-by">
+            <span>brought to you by</span>
+            <a href="https://llmasaservice.io" target="_blank" rel="noopener noreferrer">
+              <LLMAsAServiceLogo />
+              <span>llmasaservice.io</span>
+            </a>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+// Memoize to prevent re-renders when parent state changes but our props don't
+export default React.memo(AIChatPanel);
+