promptarchitect 0.6.0

package/src/chatPanel.ts

@@ -0,0 +1,979 @@
+/**
+ * PromptArchitect Chat Panel
+ * 
+ * A full-featured AI chat interface within VS Code.
+ * Users can refine prompts and chat with AI models directly.
+ */
+
+import * as vscode from 'vscode';
+import { PromptArchitectAPI } from './api';
+
+interface ChatMessage {
+  id: string;
+  role: 'user' | 'assistant' | 'system';
+  content: string;
+  timestamp: number;
+  refined?: boolean;
+}
+
+export class ChatPanel {
+  public static currentPanel: ChatPanel | undefined;
+  private readonly panel: vscode.WebviewPanel;
+  private readonly api: PromptArchitectAPI;
+  private disposables: vscode.Disposable[] = [];
+  private chatHistory: ChatMessage[] = [];
+
+  private constructor(panel: vscode.WebviewPanel, api: PromptArchitectAPI) {
+    this.panel = panel;
+    this.api = api;
+
+    // Set initial HTML content
+    this.updateWebview();
+
+    // Handle messages from webview
+    this.panel.webview.onDidReceiveMessage(
+      async (message) => {
+        switch (message.command) {
+          case 'sendMessage':
+            await this.handleSendMessage(message.text, message.refined);
+            break;
+          case 'refineBeforeSend':
+            await this.handleRefine(message.text, message.mode);
+            break;
+          case 'copyToClipboard':
+            await vscode.env.clipboard.writeText(message.text);
+            vscode.window.showInformationMessage('📋 Copied to clipboard!');
+            break;
+          case 'insertInEditor':
+            await this.insertInActiveEditor(message.text);
+            break;
+          case 'clearChat':
+            this.chatHistory = [];
+            this.syncChatHistory();
+            break;
+          case 'addContext':
+            await this.addEditorContext();
+            break;
+          case 'exportChat':
+            await this.exportChatHistory();
+            break;
+        }
+      },
+      null,
+      this.disposables
+    );
+
+    // Clean up on panel close
+    this.panel.onDidDispose(() => this.dispose(), null, this.disposables);
+  }
+
+  public static createOrShow(api: PromptArchitectAPI) {
+    const column = vscode.ViewColumn.Beside;
+
+    // If panel exists, show it
+    if (ChatPanel.currentPanel) {
+      ChatPanel.currentPanel.panel.reveal(column);
+      return;
+    }
+
+    // Create new panel
+    const panel = vscode.window.createWebviewPanel(
+      'promptArchitectChat',
+      '💬 PromptArchitect Chat',
+      column,
+      {
+        enableScripts: true,
+        retainContextWhenHidden: true,
+      }
+    );
+
+    ChatPanel.currentPanel = new ChatPanel(panel, api);
+  }
+
+  public static prefillPrompt(text: string) {
+    if (ChatPanel.currentPanel) {
+      ChatPanel.currentPanel.panel.webview.postMessage({
+        command: 'prefill',
+        text,
+      });
+    }
+  }
+
+  private async handleSendMessage(text: string, wasRefined: boolean = false) {
+    if (!text.trim()) return;
+
+    // Add user message to history
+    const userMessage: ChatMessage = {
+      id: this.generateId(),
+      role: 'user',
+      content: text,
+      timestamp: Date.now(),
+      refined: wasRefined,
+    };
+    this.chatHistory.push(userMessage);
+    this.syncChatHistory();
+
+    // Show loading state
+    this.panel.webview.postMessage({ command: 'loading', loading: true });
+
+    try {
+      // Call the chat API
+      const response = await this.api.chat({
+        message: text,
+        history: this.chatHistory.slice(0, -1).map(m => ({
+          role: m.role,
+          content: m.content,
+        })),
+      });
+
+      // Add assistant response to history
+      const assistantMessage: ChatMessage = {
+        id: this.generateId(),
+        role: 'assistant',
+        content: response.reply,
+        timestamp: Date.now(),
+      };
+      this.chatHistory.push(assistantMessage);
+      this.syncChatHistory();
+
+    } catch (error) {
+      // Add error message
+      const errorMessage: ChatMessage = {
+        id: this.generateId(),
+        role: 'assistant',
+        content: `⚠️ Error: ${error}. Please try again.`,
+        timestamp: Date.now(),
+      };
+      this.chatHistory.push(errorMessage);
+      this.syncChatHistory();
+    } finally {
+      this.panel.webview.postMessage({ command: 'loading', loading: false });
+    }
+  }
+
+  private async handleRefine(text: string, mode: string) {
+    if (!text.trim()) {
+      this.panel.webview.postMessage({
+        command: 'refineError',
+        message: 'Please enter some text to refine.',
+      });
+      return;
+    }
+
+    this.panel.webview.postMessage({ command: 'refining', refining: true });
+
+    try {
+      const config = vscode.workspace.getConfiguration('promptarchitect');
+      const targetModel = config.get<string>('targetModel') || 'general';
+
+      const feedbackMap: Record<string, string> = {
+        clarity: 'Make this prompt clearer and more specific. Improve structure and reduce ambiguity.',
+        detailed: 'Expand this prompt with more context, requirements, and specific details.',
+        concise: 'Make this prompt more concise while keeping the core intent. Remove redundancy.',
+        technical: 'Make this prompt more technically precise with proper terminology.',
+        structured: 'Add clear structure with sections, bullet points, or numbered steps.',
+      };
+
+      const result = await this.api.refinePrompt({
+        prompt: text,
+        feedback: feedbackMap[mode] || feedbackMap.clarity,
+        targetModel,
+      });
+
+      this.panel.webview.postMessage({
+        command: 'refined',
+        text: result.refinedPrompt,
+      });
+    } catch (error) {
+      this.panel.webview.postMessage({
+        command: 'refineError',
+        message: `Refinement failed: ${error}`,
+      });
+    } finally {
+      this.panel.webview.postMessage({ command: 'refining', refining: false });
+    }
+  }
+
+  private async insertInActiveEditor(text: string) {
+    const editor = vscode.window.activeTextEditor;
+    if (editor) {
+      await editor.edit((editBuilder) => {
+        if (editor.selection.isEmpty) {
+          editBuilder.insert(editor.selection.active, text);
+        } else {
+          editBuilder.replace(editor.selection, text);
+        }
+      });
+      vscode.window.showInformationMessage('✅ Inserted into editor!');
+    } else {
+      const doc = await vscode.workspace.openTextDocument({ content: text });
+      await vscode.window.showTextDocument(doc);
+    }
+  }
+
+  private async addEditorContext() {
+    const editor = vscode.window.activeTextEditor;
+    if (!editor) {
+      vscode.window.showWarningMessage('No active editor to get context from.');
+      return;
+    }
+
+    let contextText = '';
+    const selection = editor.selection;
+    
+    if (!selection.isEmpty) {
+      contextText = editor.document.getText(selection);
+    } else {
+      // Get visible text or first 100 lines
+      const visibleRanges = editor.visibleRanges;
+      if (visibleRanges.length > 0) {
+        contextText = editor.document.getText(visibleRanges[0]);
+      }
+    }
+
+    if (contextText) {
+      const fileName = editor.document.fileName.split(/[\\/]/).pop();
+      const language = editor.document.languageId;
+      
+      this.panel.webview.postMessage({
+        command: 'addContext',
+        context: {
+          fileName,
+          language,
+          code: contextText,
+        },
+      });
+    }
+  }
+
+  private async exportChatHistory() {
+    const content = this.chatHistory.map(msg => {
+      const time = new Date(msg.timestamp).toLocaleTimeString();
+      const role = msg.role === 'user' ? '👤 You' : '🤖 Assistant';
+      return `### ${role} (${time})${msg.refined ? ' [Refined]' : ''}\n\n${msg.content}\n`;
+    }).join('\n---\n\n');
+
+    const doc = await vscode.workspace.openTextDocument({
+      content: `# PromptArchitect Chat Export\n\n${content}`,
+      language: 'markdown',
+    });
+    await vscode.window.showTextDocument(doc);
+  }
+
+  private syncChatHistory() {
+    this.panel.webview.postMessage({
+      command: 'syncHistory',
+      history: this.chatHistory,
+    });
+  }
+
+  private generateId(): string {
+    return `msg_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+  }
+
+  private updateWebview() {
+    this.panel.webview.html = this.getHtmlContent();
+  }
+
+  private getHtmlContent(): string {
+    return /*html*/ `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>PromptArchitect Chat</title>
+  <style>
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+    
+    body {
+      font-family: var(--vscode-font-family);
+      background: var(--vscode-editor-background);
+      color: var(--vscode-editor-foreground);
+      height: 100vh;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+    
+    /* Header */
+    .header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12px 16px;
+      border-bottom: 1px solid var(--vscode-widget-border);
+      background: var(--vscode-sideBar-background);
+    }
+    
+    .header-left {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    
+    .header h1 {
+      font-size: 14px;
+      font-weight: 600;
+    }
+    
+    .header-actions {
+      display: flex;
+      gap: 4px;
+    }
+    
+    .icon-btn {
+      background: transparent;
+      border: none;
+      color: var(--vscode-foreground);
+      cursor: pointer;
+      padding: 6px;
+      border-radius: 4px;
+      font-size: 14px;
+      opacity: 0.7;
+      transition: all 0.15s;
+    }
+    
+    .icon-btn:hover {
+      opacity: 1;
+      background: var(--vscode-toolbar-hoverBackground);
+    }
+    
+    .icon-btn[title]:hover::after {
+      content: attr(title);
+    }
+    
+    /* Chat Area */
+    .chat-container {
+      flex: 1;
+      overflow-y: auto;
+      padding: 16px;
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+    
+    .empty-state {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      opacity: 0.7;
+      padding: 40px;
+    }
+    
+    .empty-state .icon {
+      font-size: 48px;
+      margin-bottom: 16px;
+    }
+    
+    .empty-state h2 {
+      font-size: 16px;
+      margin-bottom: 8px;
+    }
+    
+    .empty-state p {
+      font-size: 12px;
+      color: var(--vscode-descriptionForeground);
+    }
+    
+    .message {
+      display: flex;
+      gap: 12px;
+      animation: fadeIn 0.2s ease;
+    }
+    
+    @keyframes fadeIn {
+      from { opacity: 0; transform: translateY(8px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    
+    .message.user {
+      flex-direction: row-reverse;
+    }
+    
+    .avatar {
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 16px;
+      flex-shrink: 0;
+    }
+    
+    .message.user .avatar {
+      background: var(--vscode-button-background);
+    }
+    
+    .message.assistant .avatar {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    }
+    
+    .message-content {
+      max-width: 80%;
+      padding: 12px 16px;
+      border-radius: 12px;
+      font-size: 13px;
+      line-height: 1.5;
+    }
+    
+    .message.user .message-content {
+      background: var(--vscode-button-background);
+      color: var(--vscode-button-foreground);
+      border-bottom-right-radius: 4px;
+    }
+    
+    .message.assistant .message-content {
+      background: var(--vscode-input-background);
+      border: 1px solid var(--vscode-widget-border);
+      border-bottom-left-radius: 4px;
+    }
+    
+    .message-content pre {
+      background: var(--vscode-textCodeBlock-background);
+      padding: 12px;
+      border-radius: 6px;
+      overflow-x: auto;
+      margin: 8px 0;
+      font-family: var(--vscode-editor-font-family);
+      font-size: 12px;
+    }
+    
+    .message-content code {
+      background: var(--vscode-textCodeBlock-background);
+      padding: 2px 6px;
+      border-radius: 4px;
+      font-family: var(--vscode-editor-font-family);
+      font-size: 12px;
+    }
+    
+    .message-meta {
+      font-size: 10px;
+      color: var(--vscode-descriptionForeground);
+      margin-top: 4px;
+      display: flex;
+      gap: 8px;
+      align-items: center;
+    }
+    
+    .refined-badge {
+      background: var(--vscode-badge-background);
+      color: var(--vscode-badge-foreground);
+      padding: 2px 6px;
+      border-radius: 10px;
+      font-size: 9px;
+    }
+    
+    .message-actions {
+      display: flex;
+      gap: 4px;
+      margin-top: 8px;
+      opacity: 0;
+      transition: opacity 0.15s;
+    }
+    
+    .message:hover .message-actions {
+      opacity: 1;
+    }
+    
+    .msg-action-btn {
+      background: var(--vscode-button-secondaryBackground);
+      color: var(--vscode-button-secondaryForeground);
+      border: none;
+      padding: 4px 8px;
+      border-radius: 4px;
+      font-size: 11px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+    
+    .msg-action-btn:hover {
+      background: var(--vscode-button-secondaryHoverBackground);
+    }
+    
+    /* Input Area */
+    .input-area {
+      border-top: 1px solid var(--vscode-widget-border);
+      padding: 16px;
+      background: var(--vscode-sideBar-background);
+    }
+    
+    .refine-bar {
+      display: flex;
+      gap: 6px;
+      margin-bottom: 12px;
+      flex-wrap: wrap;
+      align-items: center;
+    }
+    
+    .refine-label {
+      font-size: 11px;
+      color: var(--vscode-descriptionForeground);
+      margin-right: 4px;
+    }
+    
+    .refine-btn {
+      padding: 4px 10px;
+      border: 1px solid var(--vscode-button-secondaryBackground);
+      background: var(--vscode-button-secondaryBackground);
+      color: var(--vscode-button-secondaryForeground);
+      border-radius: 12px;
+      font-size: 10px;
+      cursor: pointer;
+      transition: all 0.15s;
+    }
+    
+    .refine-btn:hover {
+      background: var(--vscode-button-secondaryHoverBackground);
+    }
+    
+    .refine-btn.active {
+      background: var(--vscode-button-background);
+      color: var(--vscode-button-foreground);
+      border-color: var(--vscode-button-background);
+    }
+    
+    .input-wrapper {
+      display: flex;
+      gap: 8px;
+      align-items: flex-end;
+    }
+    
+    .input-container {
+      flex: 1;
+      position: relative;
+    }
+    
+    .prompt-input {
+      width: 100%;
+      min-height: 60px;
+      max-height: 200px;
+      padding: 12px;
+      padding-right: 40px;
+      border: 1px solid var(--vscode-input-border);
+      background: var(--vscode-input-background);
+      color: var(--vscode-input-foreground);
+      border-radius: 8px;
+      font-family: var(--vscode-font-family);
+      font-size: 13px;
+      line-height: 1.5;
+      resize: none;
+    }
+    
+    .prompt-input:focus {
+      outline: none;
+      border-color: var(--vscode-focusBorder);
+    }
+    
+    .context-indicator {
+      position: absolute;
+      top: 8px;
+      right: 8px;
+      font-size: 16px;
+      opacity: 0.5;
+    }
+    
+    .send-btn {
+      padding: 12px 20px;
+      background: var(--vscode-button-background);
+      color: var(--vscode-button-foreground);
+      border: none;
+      border-radius: 8px;
+      font-size: 13px;
+      font-weight: 500;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      transition: all 0.15s;
+    }
+    
+    .send-btn:hover {
+      background: var(--vscode-button-hoverBackground);
+    }
+    
+    .send-btn:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+    
+    .spinner {
+      display: inline-block;
+      width: 14px;
+      height: 14px;
+      border: 2px solid currentColor;
+      border-top-color: transparent;
+      border-radius: 50%;
+      animation: spin 0.8s linear infinite;
+    }
+    
+    @keyframes spin {
+      to { transform: rotate(360deg); }
+    }
+    
+    .shortcuts {
+      display: flex;
+      gap: 16px;
+      margin-top: 8px;
+      font-size: 10px;
+      color: var(--vscode-descriptionForeground);
+    }
+    
+    .shortcut {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+    
+    kbd {
+      background: var(--vscode-keybindingLabel-background);
+      border: 1px solid var(--vscode-keybindingLabel-border);
+      padding: 2px 6px;
+      border-radius: 4px;
+      font-family: var(--vscode-font-family);
+      font-size: 10px;
+    }
+    
+    /* Loading indicator */
+    .typing-indicator {
+      display: none;
+      padding: 16px;
+      gap: 12px;
+    }
+    
+    .typing-indicator.visible {
+      display: flex;
+    }
+    
+    .typing-dots {
+      display: flex;
+      gap: 4px;
+      padding: 12px 16px;
+      background: var(--vscode-input-background);
+      border: 1px solid var(--vscode-widget-border);
+      border-radius: 12px;
+    }
+    
+    .typing-dot {
+      width: 8px;
+      height: 8px;
+      background: var(--vscode-foreground);
+      border-radius: 50%;
+      opacity: 0.4;
+      animation: typingBounce 1.4s ease-in-out infinite;
+    }
+    
+    .typing-dot:nth-child(2) { animation-delay: 0.2s; }
+    .typing-dot:nth-child(3) { animation-delay: 0.4s; }
+    
+    @keyframes typingBounce {
+      0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
+      30% { transform: translateY(-8px); opacity: 1; }
+    }
+  </style>
+</head>
+<body>
+  <!-- Header -->
+  <div class="header">
+    <div class="header-left">
+      <span style="font-size: 18px;">✨</span>
+      <h1>PromptArchitect Chat</h1>
+    </div>
+    <div class="header-actions">
+      <button class="icon-btn" id="addContextBtn" title="Add editor context">📎</button>
+      <button class="icon-btn" id="exportBtn" title="Export chat">📤</button>
+      <button class="icon-btn" id="clearBtn" title="Clear chat">🗑️</button>
+    </div>
+  </div>
+  
+  <!-- Chat Messages -->
+  <div class="chat-container" id="chatContainer">
+    <div class="empty-state" id="emptyState">
+      <div class="icon">💬</div>
+      <h2>Start a conversation</h2>
+      <p>Type a message below. Use the refine buttons to improve your prompt before sending.</p>
+    </div>
+  </div>
+  
+  <!-- Typing Indicator -->
+  <div class="typing-indicator" id="typingIndicator">
+    <div class="avatar" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">🤖</div>
+    <div class="typing-dots">
+      <div class="typing-dot"></div>
+      <div class="typing-dot"></div>
+      <div class="typing-dot"></div>
+    </div>
+  </div>
+  
+  <!-- Input Area -->
+  <div class="input-area">
+    <div class="refine-bar">
+      <span class="refine-label">✨ Refine first:</span>
+      <button class="refine-btn" data-mode="clarity">🎯 Clarity</button>
+      <button class="refine-btn" data-mode="detailed">📝 Detailed</button>
+      <button class="refine-btn" data-mode="concise">✂️ Concise</button>
+      <button class="refine-btn" data-mode="technical">⚙️ Technical</button>
+      <button class="refine-btn" data-mode="structured">📋 Structured</button>
+    </div>
+    
+    <div class="input-wrapper">
+      <div class="input-container">
+        <textarea 
+          class="prompt-input" 
+          id="promptInput" 
+          placeholder="Type your message... (Ctrl+Enter to send)"
+          rows="2"
+        ></textarea>
+        <span class="context-indicator" id="contextIndicator" style="display: none;">📎</span>
+      </div>
+      <button class="send-btn" id="sendBtn">
+        <span id="sendBtnIcon">➤</span>
+        <span id="sendBtnText">Send</span>
+      </button>
+    </div>
+    
+    <div class="shortcuts">
+      <span class="shortcut"><kbd>Ctrl</kbd>+<kbd>Enter</kbd> Send</span>
+      <span class="shortcut"><kbd>Shift</kbd>+<kbd>Enter</kbd> New line</span>
+    </div>
+  </div>
+
+  <script>
+    const vscode = acquireVsCodeApi();
+    const chatContainer = document.getElementById('chatContainer');
+    const emptyState = document.getElementById('emptyState');
+    const typingIndicator = document.getElementById('typingIndicator');
+    const input = document.getElementById('promptInput');
+    const sendBtn = document.getElementById('sendBtn');
+    const sendBtnIcon = document.getElementById('sendBtnIcon');
+    const sendBtnText = document.getElementById('sendBtnText');
+    const refineBtns = document.querySelectorAll('.refine-btn');
+    const addContextBtn = document.getElementById('addContextBtn');
+    const exportBtn = document.getElementById('exportBtn');
+    const clearBtn = document.getElementById('clearBtn');
+    const contextIndicator = document.getElementById('contextIndicator');
+    
+    let isLoading = false;
+    let isRefining = false;
+    let wasRefined = false;
+    let attachedContext = null;
+    
+    // Auto-resize textarea
+    input.addEventListener('input', () => {
+      input.style.height = 'auto';
+      input.style.height = Math.min(input.scrollHeight, 200) + 'px';
+    });
+    
+    // Refine buttons
+    refineBtns.forEach(btn => {
+      btn.addEventListener('click', () => {
+        if (isRefining || !input.value.trim()) return;
+        vscode.postMessage({
+          command: 'refineBeforeSend',
+          text: input.value,
+          mode: btn.dataset.mode
+        });
+      });
+    });
+    
+    // Send button
+    sendBtn.addEventListener('click', sendMessage);
+    
+    function sendMessage() {
+      if (isLoading || isRefining || !input.value.trim()) return;
+      
+      let messageText = input.value;
+      
+      // If context is attached, prepend it
+      if (attachedContext) {
+        messageText = \`**Context from \${attachedContext.fileName} (\${attachedContext.language}):**
+\\\`\\\`\\\`\${attachedContext.language}
+\${attachedContext.code}
+\\\`\\\`\\\`
+
+\${messageText}\`;
+        attachedContext = null;
+        contextIndicator.style.display = 'none';
+      }
+      
+      vscode.postMessage({
+        command: 'sendMessage',
+        text: messageText,
+        refined: wasRefined
+      });
+      
+      input.value = '';
+      input.style.height = 'auto';
+      wasRefined = false;
+    }
+    
+    // Keyboard shortcuts
+    input.addEventListener('keydown', (e) => {
+      if (e.ctrlKey && e.key === 'Enter') {
+        e.preventDefault();
+        sendMessage();
+      }
+    });
+    
+    // Header actions
+    addContextBtn.addEventListener('click', () => {
+      vscode.postMessage({ command: 'addContext' });
+    });
+    
+    exportBtn.addEventListener('click', () => {
+      vscode.postMessage({ command: 'exportChat' });
+    });
+    
+    clearBtn.addEventListener('click', () => {
+      vscode.postMessage({ command: 'clearChat' });
+    });
+    
+    // Render chat message
+    function renderMessage(msg) {
+      const div = document.createElement('div');
+      div.className = \`message \${msg.role}\`;
+      div.dataset.id = msg.id;
+      
+      const avatar = msg.role === 'user' ? '👤' : '🤖';
+      const time = new Date(msg.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+      
+      // Simple markdown rendering
+      let content = msg.content
+        .replace(/\`\`\`(\w*)\n([\s\S]*?)\`\`\`/g, '<pre><code>$2</code></pre>')
+        .replace(/\`([^\`]+)\`/g, '<code>$1</code>')
+        .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
+        .replace(/\n/g, '<br>');
+      
+      div.innerHTML = \`
+        <div class="avatar">\${avatar}</div>
+        <div class="message-body">
+          <div class="message-content">\${content}</div>
+          <div class="message-meta">
+            <span>\${time}</span>
+            \${msg.refined ? '<span class="refined-badge">✨ Refined</span>' : ''}
+          </div>
+          <div class="message-actions">
+            <button class="msg-action-btn" onclick="copyMessage('\${msg.id}')">📋 Copy</button>
+            \${msg.role === 'assistant' ? '<button class="msg-action-btn" onclick="insertMessage(\\''+msg.id+'\\')">📥 Insert</button>' : ''}
+          </div>
+        </div>
+      \`;
+      
+      return div;
+    }
+    
+    // Copy message
+    window.copyMessage = (id) => {
+      const msg = window.chatHistory?.find(m => m.id === id);
+      if (msg) {
+        vscode.postMessage({ command: 'copyToClipboard', text: msg.content });
+      }
+    };
+    
+    // Insert message into editor
+    window.insertMessage = (id) => {
+      const msg = window.chatHistory?.find(m => m.id === id);
+      if (msg) {
+        vscode.postMessage({ command: 'insertInEditor', text: msg.content });
+      }
+    };
+    
+    // Handle messages from extension
+    window.addEventListener('message', event => {
+      const message = event.data;
+      
+      switch (message.command) {
+        case 'prefill':
+          input.value = message.text;
+          input.focus();
+          input.style.height = 'auto';
+          input.style.height = Math.min(input.scrollHeight, 200) + 'px';
+          break;
+          
+        case 'loading':
+          isLoading = message.loading;
+          sendBtn.disabled = message.loading;
+          typingIndicator.classList.toggle('visible', message.loading);
+          if (message.loading) {
+            sendBtnIcon.innerHTML = '<span class="spinner"></span>';
+            sendBtnText.textContent = '';
+          } else {
+            sendBtnIcon.textContent = '➤';
+            sendBtnText.textContent = 'Send';
+          }
+          // Scroll to bottom
+          chatContainer.scrollTop = chatContainer.scrollHeight;
+          break;
+          
+        case 'refining':
+          isRefining = message.refining;
+          refineBtns.forEach(btn => btn.disabled = message.refining);
+          break;
+          
+        case 'refined':
+          input.value = message.text;
+          wasRefined = true;
+          input.style.height = 'auto';
+          input.style.height = Math.min(input.scrollHeight, 200) + 'px';
+          break;
+          
+        case 'refineError':
+          // Could show inline error
+          break;
+          
+        case 'syncHistory':
+          window.chatHistory = message.history;
+          
+          // Clear and re-render
+          chatContainer.innerHTML = '';
+          
+          if (message.history.length === 0) {
+            chatContainer.appendChild(emptyState);
+          } else {
+            emptyState.remove();
+            message.history.forEach(msg => {
+              chatContainer.appendChild(renderMessage(msg));
+            });
+          }
+          
+          // Scroll to bottom
+          chatContainer.scrollTop = chatContainer.scrollHeight;
+          break;
+          
+        case 'addContext':
+          attachedContext = message.context;
+          contextIndicator.style.display = 'block';
+          contextIndicator.title = \`Attached: \${message.context.fileName}\`;
+          break;
+      }
+    });
+    
+    // Focus input on load
+    input.focus();
+  </script>
+</body>
+</html>
+`;
+  }
+
+  private dispose() {
+    ChatPanel.currentPanel = undefined;
+    this.panel.dispose();
+    while (this.disposables.length) {
+      const disposable = this.disposables.pop();
+      if (disposable) {
+        disposable.dispose();
+      }
+    }
+  }
+}