@widgetic/chat 0.1.4

package/dist/components/Chat.svelte

@@ -0,0 +1,1253 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import { chatStore, getCurrentMessages } from '../stores/chatStore.js';
+  import { createChatService } from '../services/chatService.js';
+  import { setLogsEnabled, chatLog, chatWarn } from '../utils/logger.js';
+  import type { ChatConfig, ChatContext } from '../types/index.js';
+  import type { AttachmentInput } from '../types/attachment.js';
+  import ChatMessages from './ChatMessages.svelte';
+  import ChatInput from './ChatInput.svelte';
+  import ActionBar from './ActionBar.svelte';
+  import StatusIndicator from './StatusIndicator.svelte';
+
+  // Props
+  interface Props {
+    context: ChatContext;
+    config?: Partial<ChatConfig>;
+    class?: string;
+    /** Inline style passed to the root chat container (e.g. `height: 600px`). */
+    style?: string;
+    isCompleted?: boolean;
+    onStatsUpdate?: (messageCount: number, firstMessage: string | null) => void;
+    onChatReady?: (chatMethods: ChatMethods) => void;
+    onCompletionToggle?: () => void;
+    /** When provided, called instead of the built-in mock service for sending messages.
+     *  The parent handles the actual API call and can push assistant messages via addAssistantMessage. */
+    onSendMessage?: (
+      content: string,
+      attachments?: Array<{
+        file?: File;
+        url?: string;
+        uploadId?: string;
+        fileType: string;
+        fileName: string;
+        fileSize?: number;
+      }>,
+    ) => Promise<void>;
+    /** Backend integration callbacks — when provided, replace mock chatService methods */
+    onLoadConversations?: (contextId: string) => Promise<any[] | null>;
+    onLoadMessages?: (conversationId: string) => Promise<any[]>;
+    onCreateConversation?: (contextId: string, title: string) => Promise<any>;
+    onSaveMessage?: (
+      conversationId: string,
+      content: string,
+      messageType: string,
+      attachments?: Array<{ url?: string; file_type?: string; file_name?: string | null; file_size?: number | null; display_order?: number }>,
+    ) => Promise<any>;
+    onRestoreCheckpointBackend?: (conversationId: string, checkpointMessageId: string) => Promise<any>;
+    onTakeScreenshot?: () => Promise<string | null>;
+    /** Fires whenever the active conversation ID changes (including initial null → uuid). */
+    onConversationChange?: (conversationId: string | null) => void;
+    /** Fires when unsent draft text or pending attachments change (for parent localStorage sync). */
+    onDraftChange?: () => void;
+    /**
+     * When provided, Retry on a failed codegen turn calls this instead of sendMessage,
+     * so the host can re-run codegen without duplicating the user bubble.
+     */
+    onRetryMessage?: (content: string) => Promise<void>;
+    /**
+     * When provided, attachments are uploaded immediately and stored as CDN URLs
+     * instead of large data URLs in chat history. Host should use TUS for files >10MB.
+     */
+    onUploadChatFile?: (
+      file: File,
+      options?: { onProgress?: (percentage: number) => void; source?: string },
+    ) => Promise<{ id: string; url: string; fileType: string; fileName: string; fileSize: number }>;
+    showHeader?: boolean;
+    /** Custom title displayed in the header. If empty/undefined, defaults to context.title or context.id. */
+    headerTitle?: string;
+    /** When false, hides the icon + type description row below the title, making the header compact. */
+    showDescriptionHeader?: boolean;
+    /** When false, suppresses all console.log/warn output from @widgetic/chat. Errors still show. */
+    showLogs?: boolean;
+    /**
+     * When true, dragging the resize handle between messages and the action bar
+     * emits an `onMessagesResize` delta so the parent can grow the chat container
+     * itself (not just the internal messages area). When false (default), only the
+     * internal messages area grows/shrinks within the current chat height.
+     */
+    resizeExpandsContainer?: boolean;
+    /** Delta in pixels for the current drag frame (positive = grew downward). */
+    onMessagesResize?: (deltaPx: number) => void;
+  }
+
+  // Expose methods to parent component
+  interface ChatMethods {
+    sendMessage: (content: string, attachments?: File[]) => Promise<void>;
+    addAssistantMessage: (content: string, skipPersist?: boolean) => void;
+    addUserMessage: (content: string, attachments?: Array<{ id: string; url: string; file_type: string; file_name: string; file_size?: number }>) => void;
+    /** Returns the current conversation ID (null if no conversation is active). */
+    getConversationId: () => string | null;
+    /** Add an image attachment (data URL) to the input area for preview before sending. */
+    addImageAttachment: (dataUrl: string, fileName?: string) => void;
+    /** Get unsent draft text from the chat input. */
+    getDraftText: () => string;
+    /** Restore unsent draft text into the chat input. */
+    setDraftText: (text: string) => void;
+    /** Get attachment preview data URLs in current order. */
+    getAttachmentDataUrls: () => string[];
+    /** Get CDN upload row IDs for image attachments (codegen attachmentIds). */
+    getAttachmentUploadIds: () => string[];
+    /** Replace chat attachments from stored data URLs (restores draft attachments). */
+    restoreAttachmentsFromDataUrls: (dataUrls: string[]) => void;
+    /** Clear draft text and pending attachments. */
+    clearDraft: () => void;
+    /** Remove stale "Preview build failed" suffix from the latest assistant summary after a successful rebuild. */
+    clearStalePreviewBuildFailures: () => void;
+    /** Mark the latest assistant message that contains a commit as widget HEAD. */
+    markWidgetHeadAtLatestCommit: () => void;
+    /** Update text on the most recent codegen assistant status message. */
+    updateLatestCodegenStatusMessage: (content: string) => void;
+    /** Reload messages from backend and refresh widget HEAD marker. */
+    reloadConversationMessages: () => Promise<void>;
+  }
+
+  let { context, config = {}, class: className = '', style = '', isCompleted = false, onStatsUpdate, onChatReady, onCompletionToggle, onSendMessage, onLoadConversations, onLoadMessages, onCreateConversation, onSaveMessage, onRestoreCheckpointBackend, onTakeScreenshot, onConversationChange, onDraftChange, onRetryMessage, onUploadChatFile, showHeader = true, headerTitle = '', showDescriptionHeader = true, showLogs = true, resizeExpandsContainer = false, onMessagesResize }: Props = $props();
+
+  function notifyDraftChange() {
+    onDraftChange?.();
+  }
+
+  // Apply log suppression immediately
+  $effect(() => {
+    setLogsEnabled(showLogs);
+  });
+
+  // Local state
+  let chatContainer: HTMLElement;
+  let isInitialized = $state(false);
+  let chatService = $state(createChatService());
+  let currentConversationId = $state<string | null>(null);
+
+  // Local input state per chat instance (instead of shared store state)
+  let localInputText = $state('');
+  let localAttachments = $state<AttachmentInput[]>([]);
+  let localIsRecording = $state(false);
+  let localIsSending = $state(false);
+  let localIsUploading = $state(false);
+
+  // Reactive state from store - using proper store subscription
+  let chatState = $state<any>(null);
+  let storeUnsubscribe: (() => void) | null = null;
+
+  // Initialize store subscription
+  onMount(() => {
+    storeUnsubscribe = chatStore.subscribe(state => {
+      chatState = state;
+    });
+  });
+
+  onDestroy(() => {
+    storeUnsubscribe?.();
+  });
+
+  // Derived values from chat state
+  let activeContext = $derived(chatState?.activeContext);
+  let ui = $derived(chatState?.ui);
+  let messages = $derived(chatState?.messages);
+  let conversations = $derived(chatState?.conversations);
+
+  // Computed values
+  let isLoading = $derived(ui?.isLoading || false);
+  let isSendingOrLoading = $derived(isLoading || localIsSending);
+  let currentMessages = $derived(
+    currentConversationId && messages ? messages.byConversationId[currentConversationId] || [] : []
+  );
+  let availableConversations = $derived(
+    context && conversations ? conversations.byContextId[context.id] || [] : []
+  );
+
+  /** Prefer a conversation that already has messages (avoids empty auto-created convos). */
+  async function activateBestConversation(conversations: any[]): Promise<void> {
+    for (const conversation of conversations) {
+      const loadedMessages = onLoadMessages
+        ? await onLoadMessages(conversation.id)
+        : await chatService.getMessages(conversation.id);
+      const messageList = loadedMessages || [];
+      chatStore.actions.setMessages(conversation.id, messageList);
+
+      if (messageList.length > 0) {
+        currentConversationId = conversation.id;
+        markWidgetHeadAtLatestCommit();
+        chatLog('[Chat] Restored conversation with history:', conversation.id, messageList.length, 'messages');
+        return;
+      }
+    }
+
+    const fallbackConversation = conversations[0];
+    chatLog('[Chat] All conversations empty — using latest:', fallbackConversation.id);
+    currentConversationId = fallbackConversation.id;
+  }
+
+  // Lifecycle
+  onMount(async () => {
+    try {
+      chatLog('[Chat] Initializing with context:', context.id);
+      
+      chatStore.actions.setActiveContext(context.id, true);
+      
+      let loaded: any[] | null = null;
+      for (let attempt = 0; attempt < 4; attempt++) {
+        loaded = await loadConversations();
+        if (loaded !== null) break;
+        if (attempt < 3) {
+          await new Promise((resolve) => setTimeout(resolve, 400 * (attempt + 1)));
+        }
+      }
+
+      if (loaded === null) {
+        chatStore.actions.updateUI({
+          errorMessage: 'Could not load chat history. Try refreshing the page.',
+        });
+        isInitialized = true;
+        return;
+      }
+      
+      if (loaded.length === 0) {
+        chatLog('[Chat] No existing conversations, creating new one');
+        await createNewConversation();
+      } else {
+        chatLog('[Chat] Selecting from', loaded.length, 'conversation(s)');
+        await activateBestConversation(loaded);
+      }
+      
+      isInitialized = true;
+      chatLog('[Chat] Initialized successfully');
+    } catch (error) {
+      console.error('[Chat] Failed to initialize:', error);
+      chatStore.actions.updateUI({ 
+        errorMessage: 'Failed to initialize chat. Please try again.' 
+      });
+    }
+  });
+
+  // Methods
+  async function loadConversations(): Promise<any[] | null> {
+    try {
+      chatStore.actions.updateUI({ isLoading: true });
+      const loaded = onLoadConversations
+        ? await onLoadConversations(context.id)
+        : await chatService.getConversations(context.id);
+      if (loaded === null) {
+        chatWarn('[Chat] Conversation load unavailable (client not ready or API error)');
+        return null;
+      }
+      chatStore.actions.setConversations(context.id, loaded);
+      return loaded;
+    } catch (error) {
+      console.error('Failed to load conversations:', error);
+      chatStore.actions.updateUI({ 
+        errorMessage: 'Failed to load conversations.' 
+      });
+      return null;
+    } finally {
+      chatStore.actions.updateUI({ isLoading: false });
+    }
+  }
+
+  async function createNewConversation(title?: string) {
+    try {
+      const defaultTitle = title || `Chat about ${context.title || context.id}`;
+      const conversation = onCreateConversation
+        ? await onCreateConversation(context.id, defaultTitle)
+        : await chatService.createConversation(context.id, { title: defaultTitle });
+      
+      chatStore.dispatch({
+        type: 'ADD_CONVERSATION',
+        payload: { contextId: context.id, conversation }
+      });
+      
+      currentConversationId = conversation.id;
+      return conversation;
+    } catch (error) {
+      console.error('Failed to create conversation:', error);
+      throw error;
+    }
+  }
+
+  async function loadConversation(conversationId: string) {
+    try {
+      currentConversationId = conversationId;
+      chatStore.actions.updateUI({ isLoading: true });
+      
+      const messages = onLoadMessages
+        ? await onLoadMessages(conversationId)
+        : await chatService.getMessages(conversationId);
+      chatStore.actions.setMessages(conversationId, messages);
+      markWidgetHeadAtLatestCommit();
+    } catch (error) {
+      console.error('Failed to load conversation:', error);
+      chatStore.actions.updateUI({ 
+        errorMessage: 'Failed to load conversation.' 
+      });
+    } finally {
+      chatStore.actions.updateUI({ isLoading: false });
+    }
+  }
+
+  async function sendMessage(content: string, attachments?: AttachmentInput[]) {
+    if (!currentConversationId) {
+      console.error('No active conversation');
+      return;
+    }
+
+    chatLog('[Chat] Sending message:', content.substring(0, 60));
+    const submittedContent = content;
+    const submittedAttachments = attachments;
+
+    try {
+      localIsSending = true;
+
+      // Clear the controlled input immediately. Waiting for persistence/codegen lets
+      // image thumbnails linger during long generations and can re-save them as drafts.
+      localInputText = '';
+      localAttachments = [];
+      notifyDraftChange();
+
+      // Clear head/checkpoint marks — new prompt starts a new turn
+      const existingMsgs = getCurrentMessages(currentConversationId);
+      if (existingMsgs?.some((m: any) => m.rolledBackAt || m.isWidgetHead)) {
+        const cleared = existingMsgs.map((m: any) => ({
+          ...m,
+          rolledBackAt: null,
+          isWidgetHead: false,
+        }));
+        chatStore.actions.setMessages(currentConversationId, cleared);
+      }
+      
+      // Add user message to the UI immediately (local mock for instant feedback)
+      const userMessage = await chatService.sendMessage(currentConversationId, {
+        messageContent: submittedContent,
+        attachments: submittedAttachments
+      });
+      chatStore.actions.addMessage(currentConversationId, userMessage);
+      
+      // Persist user message to backend and update local ID with DB UUID
+      if (onSaveMessage) {
+        try {
+          const saved = await onSaveMessage(
+            currentConversationId,
+            submittedContent,
+            'user',
+            userMessage.attachments,
+          );
+          if (saved?.id && saved.id !== userMessage.id) {
+            chatStore.actions.updateMessageId(currentConversationId, userMessage.id, saved.id);
+          }
+        } catch (err) {
+          chatWarn('[Chat] Failed to persist user message:', err);
+        }
+      }
+      
+      if (onSendMessage) {
+        const outgoing = (submittedAttachments || []).map((att) => ({
+          file: att.file,
+          url: att.uploadedUrl,
+          uploadId: att.uploadId,
+          fileType: att.file.type,
+          fileName: att.file.name,
+          fileSize: att.file.size,
+        }));
+        await onSendMessage(submittedContent, outgoing.length > 0 ? outgoing : undefined);
+      } else {
+        const aiResponse = await chatService.processAIResponse(currentConversationId, userMessage);
+        chatStore.actions.addMessage(currentConversationId, aiResponse);
+      }
+      
+    } catch (error) {
+      console.error('Failed to send message:', error);
+      chatStore.actions.updateUI({ 
+        errorMessage: 'Failed to send message. Please try again.' 
+      });
+    } finally {
+      localIsSending = false;
+    }
+  }
+
+  /** Add an assistant message to the current conversation (called by parent via chatMethods).
+   *  When skipPersist is true, the message is shown locally but not saved to DB
+   *  (use when the backend already persists its own version). */
+  function addAssistantMessage(content: string, skipPersist = false) {
+    if (!currentConversationId) return;
+    const assistantMsg = {
+      id: `assistant_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
+      conversationId: currentConversationId,
+      messageContent: content,
+      messageType: 'assistant' as const,
+      attachments: [],
+      isCommit: false,
+      userId: 'ai_assistant',
+      createdAt: new Date(),
+      updatedAt: new Date(),
+      _optimistic: false,
+      _failed: false,
+      _retryCount: 0
+    };
+    chatStore.actions.addMessage(currentConversationId, assistantMsg);
+
+    // Mark HEAD as soon as an assistant message carries a widget commit — this makes the
+    // Restore Checkpoint button available on previous commits even before "Preview ready".
+    if (
+      /Commit:?\s+[a-f0-9]{7,40}/i.test(content) &&
+      !/^Code generation failed/i.test(content.trim())
+    ) {
+      markWidgetHeadAtLatestCommit(assistantMsg.id);
+    }
+    
+    if (onSaveMessage && !skipPersist) {
+      const convId = currentConversationId;
+      onSaveMessage(convId, content, 'assistant').then(saved => {
+        if (saved?.id && saved.id !== assistantMsg.id) {
+          chatStore.actions.updateMessageId(convId, assistantMsg.id, saved.id);
+        }
+      }).catch(err =>
+        chatWarn('[Chat] Failed to persist assistant message:', err)
+      );
+    }
+  }
+
+  /** Add a user message to the UI without triggering generation (called by parent via chatMethods).
+   *  Also persists to DB via onSaveMessage so multi-turn history is complete. */
+  function addUserMessage(content: string, attachments?: Array<{ id: string; url: string; file_type: string; file_name: string; file_size?: number }>) {
+    if (!currentConversationId) return;
+    const userMsg = {
+      id: `user_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
+      conversationId: currentConversationId,
+      messageContent: content,
+      messageType: 'user' as const,
+      attachments: attachments || [],
+      isCommit: false,
+      userId: 'current_user',
+      createdAt: new Date(),
+      updatedAt: new Date(),
+      _optimistic: false,
+      _failed: false,
+      _retryCount: 0
+    };
+    chatStore.actions.addMessage(currentConversationId, userMsg);
+
+    if (onSaveMessage) {
+      const convId = currentConversationId;
+      onSaveMessage(convId, content, 'user', attachments).then(saved => {
+        if (saved?.id && saved.id !== userMsg.id) {
+          chatStore.actions.updateMessageId(convId, userMsg.id, saved.id);
+        }
+      }).catch(err =>
+        chatWarn('[Chat] Failed to persist user message:', err)
+      );
+    }
+  }
+
+  // ActionBar event handlers
+  async function handleScreenshot({ detail }: { detail: { contextId: string } }) {
+    chatLog('[Chat] Screenshot requested for context:', detail.contextId);
+    
+    try {
+      let screenshotDataUrl: string | null = null;
+
+      if (onTakeScreenshot) {
+        screenshotDataUrl = await onTakeScreenshot();
+      }
+
+      if (!screenshotDataUrl) {
+        chatWarn('[Chat] Screenshot capture returned null');
+        chatStore.actions.updateUI({ errorMessage: 'Screenshot capture failed — no preview available.' });
+        return;
+      }
+
+      // Convert data URL to File for attachment
+      const response = await fetch(screenshotDataUrl);
+      const blob = await response.blob();
+      const screenshotFile = new File([blob], 'screenshot.png', { type: 'image/png' });
+      
+      const attachmentInput: AttachmentInput = {
+        file: screenshotFile,
+        type: 'image',
+        preview: screenshotDataUrl,
+        uploadProgress: 0
+      };
+      
+      localAttachments = [...localAttachments, attachmentInput];
+      const attachmentIndex = localAttachments.length - 1;
+      notifyDraftChange();
+
+      if (onUploadChatFile) {
+        await uploadAttachmentToCdn(screenshotFile, attachmentInput, attachmentIndex, {
+          source: 'preview-screenshot',
+        });
+      }
+      
+      chatLog('Screenshot captured and added to attachments');
+    } catch (error) {
+      console.error('Screenshot capture failed:', error);
+      chatStore.actions.updateUI({ 
+        errorMessage: 'Failed to capture screenshot' 
+      });
+    }
+  }
+
+  async function handleRecordStart({ detail }: { detail: { contextId: string } }) {
+    chatLog('Recording start requested for context:', detail.contextId);
+    
+    try {
+      localIsRecording = true;
+      
+      // This would integrate with the existing recording module
+      chatLog('Recording started...');
+      
+    } catch (error) {
+      console.error('Failed to start recording:', error);
+      localIsRecording = false;
+      chatStore.actions.updateUI({ 
+        errorMessage: 'Failed to start recording' 
+      });
+    }
+  }
+
+  async function handleRecordStop({ detail }: { detail: { contextId: string } }) {
+    chatLog('Recording stop requested for context:', detail.contextId);
+    
+    try {
+      localIsRecording = false;
+      
+      // Mock recording implementation - replace with actual capture
+      const mockRecording = new File(['mock-recording-data'], 'recording.webm', {
+        type: 'video/webm'
+      });
+      
+      // Create AttachmentInput object
+      const attachmentInput: AttachmentInput = {
+        file: mockRecording,
+        type: 'video',
+        uploadProgress: 0
+      };
+      
+      // Add to attachments
+      localAttachments = [...localAttachments, attachmentInput];
+      
+      chatLog('Recording stopped and added to attachments');
+      
+    } catch (error) {
+      console.error('Failed to stop recording:', error);
+      chatStore.actions.updateUI({ 
+        errorMessage: 'Failed to stop recording' 
+      });
+    }
+  }
+
+  function isCdnUploadableFile(file: File): boolean {
+    return (
+      file.type.startsWith('image/') ||
+      file.type.startsWith('video/') ||
+      file.type === 'application/pdf'
+    );
+  }
+
+  function bumpAttachmentProgress(attachmentIndex: number, percentage: number) {
+    localAttachments = localAttachments.map((att, idx) =>
+      idx === attachmentIndex ? { ...att, uploadProgress: percentage } : att,
+    );
+  }
+
+  async function uploadAttachmentToCdn(
+    file: File,
+    entry: AttachmentInput,
+    attachmentIndex: number,
+    options: { source?: string } = {},
+  ): Promise<void> {
+    if (!onUploadChatFile || !isCdnUploadableFile(file)) {
+      if (file.type.startsWith('image/')) {
+        entry.preview = URL.createObjectURL(file);
+      }
+      return;
+    }
+
+    try {
+      bumpAttachmentProgress(attachmentIndex, 0);
+      const uploaded = await onUploadChatFile(file, {
+        onProgress: (percentage) => bumpAttachmentProgress(attachmentIndex, percentage),
+        source: options.source,
+      });
+      entry.uploadedUrl = uploaded.url;
+      entry.uploadId = uploaded.id;
+      if (file.type.startsWith('image/')) {
+        entry.preview = uploaded.url;
+      }
+      entry.uploadProgress = 100;
+      bumpAttachmentProgress(attachmentIndex, 100);
+      localAttachments = [...localAttachments];
+      notifyDraftChange();
+      chatLog('[Chat] Attachment uploaded to CDN:', uploaded.url.slice(0, 80), 'id:', uploaded.id);
+    } catch (uploadError) {
+      console.error('[Chat] Upload failed, using local preview where possible:', uploadError);
+      if (file.type.startsWith('image/')) {
+        entry.preview = URL.createObjectURL(file);
+      }
+      entry.uploadProgress = 0;
+      bumpAttachmentProgress(attachmentIndex, 0);
+      // Soft warning only — local File still works for codegen vision; don't block the chat UI.
+      const detail =
+        uploadError instanceof Error ? uploadError.message : 'Attachment upload failed.';
+      console.warn('[Chat] CDN upload unavailable; continuing with local attachment:', detail);
+    }
+  }
+
+  async function handleUpload() {
+    chatLog('File upload requested');
+
+    const fileInput = document.createElement('input');
+    fileInput.type = 'file';
+    fileInput.multiple = true;
+    fileInput.accept = 'image/*,video/*,.pdf,.txt,.md,.mermaid';
+
+    fileInput.onchange = async (event) => {
+      const files = Array.from((event.target as HTMLInputElement).files || []);
+      if (files.length === 0) return;
+
+      const newAttachments: AttachmentInput[] = files.map((file) => ({
+        file,
+        type: file.type.startsWith('image/')
+          ? 'image'
+          : file.type.startsWith('video/')
+            ? 'video'
+            : 'document',
+        uploadProgress: 0,
+      }));
+
+      const startIndex = localAttachments.length;
+      localAttachments = [...localAttachments, ...newAttachments];
+      notifyDraftChange();
+
+      try {
+        localIsUploading = true;
+        for (let i = 0; i < files.length; i++) {
+          const file = files[i];
+          const entry = newAttachments[i];
+          await uploadAttachmentToCdn(file, entry, startIndex + i);
+        }
+      } finally {
+        localIsUploading = false;
+      }
+
+      chatLog('Files selected via upload:', files.length);
+    };
+
+    fileInput.click();
+  }
+
+  async function handleComplete({ detail }: { detail: { completed: boolean } }) {
+    chatLog('Conversation completion toggle requested');
+    
+    if (!currentConversationId) {
+      console.error('No active conversation to mark as complete');
+      return;
+    }
+    
+    try {
+      // Call parent's completion toggle function
+      if (onCompletionToggle) {
+        onCompletionToggle();
+        chatLog('Completion toggled via parent callback');
+      } else {
+        chatWarn('No onCompletionToggle callback provided');
+      }
+      
+    } catch (error) {
+      console.error('Failed to update conversation status:', error);
+      chatStore.actions.updateUI({ 
+        errorMessage: 'Failed to update conversation status' 
+      });
+    }
+  }
+
+  function handleActionError({ detail }: { detail: { type: string; error: any } }) {
+    console.error(`ActionBar ${detail.type} error:`, detail.error);
+    chatStore.actions.updateUI({ 
+      errorMessage: `${detail.type} action failed. Please try again.` 
+    });
+  }
+
+  async function handleSuggestionSelected(suggestion: string) {
+    chatLog('Suggestion selected in Chat — autocompleting into input:', suggestion);
+    // Autocomplete into input instead of sending immediately — lets user review,
+    // edit, and attach an image before sending (e.g. "Generate code from this design"
+    // is useless without an attached screenshot).
+    setDraftText(suggestion);
+  }
+
+  async function handleRetryMessage(content: string) {
+    const retryContent = content.trim();
+    if (!retryContent) return;
+    chatLog('[Chat] Retrying failed message:', retryContent.slice(0, 80));
+    if (onRetryMessage) {
+      await onRetryMessage(retryContent);
+      return;
+    }
+    await sendMessage(retryContent);
+  }
+
+  async function handleRestoreCheckpoint(messageId: string, messageIndex: number) {
+    chatLog('Restore checkpoint requested:', { messageId, messageIndex, conversationId: currentConversationId });
+    
+    if (!currentConversationId || !currentMessages) {
+      console.error('No active conversation or messages to restore');
+      return;
+    }
+
+    try {
+      const clicked = currentMessages[messageIndex];
+      let checkpointUserId = messageId;
+      let headAssistantId = clicked?.id;
+
+      // API rolls back to the commit produced by the user prompt before this assistant reply.
+      if (clicked?.messageType === 'assistant') {
+        headAssistantId = clicked.id;
+        for (let i = messageIndex - 1; i >= 0; i--) {
+          if (currentMessages[i].messageType === 'user') {
+            checkpointUserId = currentMessages[i].id;
+            break;
+          }
+        }
+      } else {
+        for (let i = messageIndex + 1; i < currentMessages.length; i++) {
+          if (currentMessages[i].messageType === 'assistant' && messageHasWidgetCommit(currentMessages[i].messageContent)) {
+            headAssistantId = currentMessages[i].id;
+            break;
+          }
+        }
+      }
+
+      const updatedMessages = currentMessages.map((msg: any) => ({
+        ...msg,
+        isWidgetHead: headAssistantId ? msg.id === headAssistantId : false,
+        rolledBackAt: null,
+      }));
+
+      chatLog(`Restoring to checkpoint user message ${checkpointUserId}, head assistant ${headAssistantId}`);
+      chatStore.actions.setMessages(currentConversationId, updatedMessages);
+
+      if (onRestoreCheckpointBackend) {
+        try {
+          const result = await onRestoreCheckpointBackend(currentConversationId, checkpointUserId);
+          chatLog('[Chat] Checkpoint restored on backend:', result);
+          if (headAssistantId) {
+            markWidgetHeadAtLatestCommit(headAssistantId);
+          }
+        } catch (backendError) {
+          console.error('[Chat] Backend checkpoint restore failed, local state updated:', backendError);
+        }
+      }
+
+      chatStore.actions.updateUI({ errorMessage: null });
+      chatLog('Checkpoint restored successfully');
+      
+    } catch (error) {
+      console.error('Failed to restore checkpoint:', error);
+      chatStore.actions.updateUI({ 
+        errorMessage: 'Failed to restore checkpoint. Please try again.' 
+      });
+    }
+  }
+
+  function isValidImageDataUrl(dataUrl: string): boolean {
+    if (!dataUrl?.startsWith('data:image/')) return false;
+    const base64 = dataUrl.split(',')[1];
+    if (!base64 || base64.length < 80) return false;
+    try {
+      atob(base64.slice(0, 32));
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  async function addImageAttachment(dataUrl: string, fileName = 'pasted-image.png') {
+    if (!isValidImageDataUrl(dataUrl)) {
+      chatWarn('[Chat] Skipping invalid image data URL for attachment restore');
+      return;
+    }
+    try {
+      const byteString = atob(dataUrl.split(',')[1]);
+      const mimeMatch = dataUrl.match(/data:(image\/[^;]+);/);
+      const mimeType = mimeMatch?.[1] || 'image/png';
+      const ab = new ArrayBuffer(byteString.length);
+      const ia = new Uint8Array(ab);
+      for (let i = 0; i < byteString.length; i++) ia[i] = byteString.charCodeAt(i);
+      const file = new File([ab], fileName, { type: mimeType });
+      const attachmentInput: AttachmentInput = {
+        file,
+        type: 'image',
+        preview: dataUrl,
+        uploadProgress: 0,
+      };
+      const attachmentIndex = localAttachments.length;
+      localAttachments = [...localAttachments, attachmentInput];
+      notifyDraftChange();
+      if (onUploadChatFile) {
+        await uploadAttachmentToCdn(file, attachmentInput, attachmentIndex);
+      }
+      chatLog('Image attachment added from external paste');
+    } catch (err) {
+      console.error('[Chat] Failed to add image attachment:', err);
+    }
+  }
+
+  function getDraftText(): string {
+    return localInputText;
+  }
+
+  function setDraftText(text: string) {
+    localInputText = text;
+  }
+
+  function getAttachmentDataUrls(): string[] {
+    return localAttachments
+      .filter((att) => att.type === 'image' && (att.preview || att.file.type.startsWith('image/')))
+      .map((att) => att.preview || '');
+  }
+
+  function getAttachmentUploadIds(): string[] {
+    return localAttachments
+      .filter((att) => att.type === 'image' && att.uploadId)
+      .map((att) => att.uploadId as string);
+  }
+
+  function restoreAttachmentsFromDataUrls(dataUrls: string[]) {
+    localAttachments = [];
+    const validUrls = dataUrls.filter(isValidImageDataUrl);
+    for (let i = 0; i < validUrls.length; i++) {
+      addImageAttachment(validUrls[i], `restored-image-${i + 1}.png`);
+    }
+    if (validUrls.length < dataUrls.length) {
+      chatWarn('[Chat] Dropped invalid restored attachment(s):', dataUrls.length - validUrls.length);
+    }
+  }
+
+  function clearDraft() {
+    localInputText = '';
+    localAttachments = [];
+    notifyDraftChange();
+  }
+
+  const CODEGEN_COMMIT_REGEX = /Commit:?\s+([a-f0-9]{7,40})/i;
+
+  function isPreviewRecompiledMessage(content?: string | null): boolean {
+    return /^Preview recompiled/i.test((content || '').trim());
+  }
+
+  /** Backend summary: "Updated N files...\\n\\nCommit {hash}" */
+  function isBackendCodegenSummary(content?: string | null): boolean {
+    const trimmed = (content || '').trim();
+    return /^Updated \d+ files?/i.test(trimmed) && /\n\nCommit\s+[a-f0-9]{7,40}/i.test(trimmed);
+  }
+
+  /** Widget HEAD applies only to codegen completion lines, not preview-rebuild status. */
+  function messageHasWidgetCommit(content?: string | null): boolean {
+    const trimmed = (content || '').trim();
+    if (!trimmed || isPreviewRecompiledMessage(trimmed)) return false;
+    if (isCodegenFailureMessage(trimmed)) return false;
+    if (/^Code generation completed/i.test(trimmed) && CODEGEN_COMMIT_REGEX.test(trimmed)) return true;
+    return isBackendCodegenSummary(trimmed);
+  }
+
+  function getLastUserMessageIndex(msgs: { messageType?: string }[]): number {
+    for (let i = msgs.length - 1; i >= 0; i--) {
+      if (msgs[i].messageType === 'user') return i;
+    }
+    return -1;
+  }
+
+  /** In-flight codegen / agent harness status (updated in place until completion). */
+  function isCodegenProgressMessage(content?: string | null): boolean {
+    const trimmed = (content || '').trim();
+    if (!trimmed) return false;
+    return (
+      /^Code generation in progress/i.test(trimmed) ||
+      /^Generating code/i.test(trimmed) ||
+      /^Agent fixing/i.test(trimmed) ||
+      /^Building preview/i.test(trimmed) ||
+      /^Parsing generated/i.test(trimmed) ||
+      /^Planning/i.test(trimmed) ||
+      /^Preparing prompt/i.test(trimmed) ||
+      /^Reading existing code/i.test(trimmed) ||
+      /^Saving to repository/i.test(trimmed) ||
+      /^Retrying code format/i.test(trimmed)
+    );
+  }
+
+  function isTurnCodegenAssistantMessage(content?: string | null): boolean {
+    return (
+      isCodegenStatusMessage(content) ||
+      isBackendCodegenSummary(content) ||
+      messageHasWidgetCommit(content) ||
+      isCodegenProgressMessage(content)
+    );
+  }
+
+  function isCodegenFailureMessage(content?: string | null): boolean {
+    const t = (content || '').trim();
+    return /^Code generation failed/i.test(t);
+  }
+
+  function markWidgetHeadAtLatestCommit(preferredMessageId?: string) {
+    if (!currentConversationId) return;
+    const msgs = getCurrentMessages(currentConversationId);
+    let headId = preferredMessageId;
+    if (!headId) {
+      for (let i = msgs.length - 1; i >= 0; i--) {
+        const m = msgs[i];
+        if (m.messageType !== 'assistant') continue;
+        if (isCodegenFailureMessage(m.messageContent)) continue;
+        if (messageHasWidgetCommit(m.messageContent)) {
+          headId = m.id;
+          break;
+        }
+      }
+    }
+    if (!headId) return;
+    const updated = msgs.map((m) => ({
+      ...m,
+      isWidgetHead: m.id === headId,
+      rolledBackAt: null,
+    }));
+    chatStore.actions.setMessages(currentConversationId, updated);
+    chatLog('[Chat] Widget HEAD marked on message:', headId);
+  }
+
+  const CODEGEN_STATUS_MESSAGE_REGEX = /^Code generation completed/i;
+
+  function isCodegenStatusMessage(content?: string | null): boolean {
+    return CODEGEN_STATUS_MESSAGE_REGEX.test((content || '').trim());
+  }
+
+  /** One assistant bubble per user turn: loading → ready (in-place update within current turn only). */
+  function updateLatestCodegenStatusMessage(content: string) {
+    if (!currentConversationId) return;
+    const msgs = getCurrentMessages(currentConversationId);
+    const turnStart = getLastUserMessageIndex(msgs) + 1;
+
+    let targetId: string | null = null;
+    for (let i = msgs.length - 1; i >= turnStart; i--) {
+      const m = msgs[i];
+      if (m.messageType !== 'assistant') continue;
+      if (isTurnCodegenAssistantMessage(m.messageContent)) {
+        targetId = m.id;
+        break;
+      }
+    }
+
+    if (targetId) {
+      chatStore.actions.updateMessageContent(currentConversationId, targetId, content);
+      const deduped = msgs.filter((m, idx) => {
+        if (idx < turnStart || m.messageType !== 'assistant') return true;
+        if (!isTurnCodegenAssistantMessage(m.messageContent)) return true;
+        return m.id === targetId;
+      });
+      if (deduped.length !== msgs.length) {
+        chatStore.actions.setMessages(currentConversationId, deduped);
+      }
+      // Mark HEAD as soon as the assistant message carries a commit — do not wait for "Preview ready".
+      // Restore Checkpoint buttons require some message to be HEAD, so we mark eagerly on any commit.
+      if (messageHasWidgetCommit(content)) {
+        markWidgetHeadAtLatestCommit(targetId);
+      }
+      return;
+    }
+
+    for (let i = msgs.length - 1; i >= turnStart; i--) {
+      const m = msgs[i];
+      if (m.messageType !== 'assistant') continue;
+      if (isCodegenFailureMessage(m.messageContent)) {
+        chatStore.actions.updateMessageContent(currentConversationId, m.id, content);
+        if (messageHasWidgetCommit(content)) {
+          markWidgetHeadAtLatestCommit(m.id);
+        }
+        return;
+      }
+    }
+    addAssistantMessage(content, true);
+    if (messageHasWidgetCommit(content)) {
+      markWidgetHeadAtLatestCommit();
+    }
+  }
+
+  /** Reload messages from backend and re-mark widget HEAD (picks up server-persisted summaries). */
+  async function reloadConversationMessages() {
+    if (!currentConversationId || !onLoadMessages) return;
+    try {
+      const loaded = await onLoadMessages(currentConversationId);
+      if (loaded?.length) {
+        chatStore.actions.setMessages(currentConversationId, loaded);
+      }
+      markWidgetHeadAtLatestCommit();
+      chatLog('[Chat] Reloaded conversation messages:', loaded?.length ?? 0);
+    } catch (err) {
+      chatWarn('[Chat] Failed to reload conversation messages:', err);
+    }
+  }
+
+  function clearStalePreviewBuildFailures() {
+    if (!currentConversationId) return;
+    const msgs = getCurrentMessages(currentConversationId);
+    const previewFailedSuffix = /\n\nPreview build failed:[\s\S]*$/i;
+    for (let i = msgs.length - 1; i >= 0; i--) {
+      const msg = msgs[i];
+      if (msg.messageType !== 'assistant') continue;
+      const content = msg.messageContent || '';
+      if (!/preview build failed/i.test(content)) continue;
+      const cleaned = content.replace(previewFailedSuffix, '').trim();
+      chatStore.actions.updateMessageContent(currentConversationId, msg.id, cleaned);
+      chatLog('[Chat] Cleared stale preview build failure from assistant message:', msg.id);
+      break;
+    }
+  }
+
+  // Expose methods to parent component — fire once per context, not on every reactive tick
+  let lastChatReadyContextId: string | null = null;
+  $effect(() => {
+    if (!isInitialized || !onChatReady || !context?.id) return;
+    if (lastChatReadyContextId === context.id) return;
+    lastChatReadyContextId = context.id;
+
+    const chatMethods: ChatMethods = {
+      sendMessage,
+      addAssistantMessage,
+      addUserMessage,
+      getConversationId: () => currentConversationId,
+      addImageAttachment,
+      getDraftText,
+      setDraftText,
+      getAttachmentDataUrls,
+      getAttachmentUploadIds,
+      restoreAttachmentsFromDataUrls,
+      clearDraft,
+      clearStalePreviewBuildFailures,
+      markWidgetHeadAtLatestCommit,
+      updateLatestCodegenStatusMessage,
+      reloadConversationMessages,
+    };
+    onChatReady(chatMethods);
+  });
+
+  // Notify parent when conversation ID changes — compare by value only.
+  // Parent often passes an inline callback; tracking that reference would re-run every render
+  // and can trigger effect_update_depth_exceeded.
+  let lastReportedConversationId: string | null | undefined = undefined;
+  $effect(() => {
+    const convId = currentConversationId;
+    if (!onConversationChange) return;
+    if (lastReportedConversationId === convId) return;
+    lastReportedConversationId = convId;
+    onConversationChange(convId);
+  });
+
+  // Handle context changes
+  $effect(() => {
+    if (context) {
+      chatStore.actions.setActiveContext(context.id, true);
+    }
+  });
+
+  // Update parent with stats when messages change
+  $effect(() => {
+    if (onStatsUpdate && currentMessages) {
+      const messageCount = currentMessages.length;
+      const firstMessage = currentMessages.length > 0 ? currentMessages[0].messageContent || null : null;
+      onStatsUpdate(messageCount, firstMessage);
+    }
+  });
+
+  // Debug reactive values
+  $effect(() => {
+    chatLog('Chat render state for', context.id, ':', {
+      isInitialized,
+      chatState: !!chatState,
+      currentConversationId,
+      messagesLength: currentMessages?.length || 0
+    });
+  });
+
+  // ── Messages area vertical resize ────────────────────────────────────
+  // When null, the messages list uses flex-1 (fills remaining space).
+  // When set (px), the user has dragged the handle so we use that fixed height.
+  let messagesAreaHeight: number | null = $state(null);
+  let isResizingMessages = $state(false);
+  const MIN_MESSAGES_HEIGHT = 120;
+
+  function handleMessagesResizeStart(e: PointerEvent) {
+    e.preventDefault();
+    isResizingMessages = true;
+    const handle = e.currentTarget as HTMLElement;
+    const messagesEl = handle.previousElementSibling as HTMLElement | null;
+    if (!messagesEl) return;
+    const startY = e.clientY;
+    const startHeight = messagesEl.getBoundingClientRect().height;
+    let lastDy = 0;
+
+    const onMove = (ev: PointerEvent) => {
+      const dy = ev.clientY - startY;
+      if (resizeExpandsContainer) {
+        // Report the incremental delta to the parent so it can enlarge the outer chat
+        // container. The messages area stays flex:1 within the new container height.
+        const frameDelta = dy - lastDy;
+        lastDy = dy;
+        if (frameDelta !== 0) onMessagesResize?.(frameDelta);
+      } else {
+        const next = Math.max(MIN_MESSAGES_HEIGHT, startHeight + dy);
+        messagesAreaHeight = next;
+      }
+    };
+    const onUp = () => {
+      isResizingMessages = false;
+      window.removeEventListener('pointermove', onMove);
+      window.removeEventListener('pointerup', onUp);
+    };
+    window.addEventListener('pointermove', onMove);
+    window.addEventListener('pointerup', onUp);
+  }
+</script>
+
+<div 
+  bind:this={chatContainer}
+  class="{className ? className : 'prompt-chat-ct'} relative flex flex-col overflow-hidden bg-white border border-gray-300 rounded-medium h-full"
+  style={style}
+>
+  {#if showHeader}
+    <!-- Simple Chat Header -->
+    <div class="prompt-chat-header {showDescriptionHeader ? 'p-4' : 'px-4 py-2'} border-b border-gray-200 bg-gray-50">
+      <div class="flex items-center gap-3">
+        <div class="min-w-0 flex-1">
+          <h3 class="font-semibold text-gray-900 text-sm truncate">
+            {headerTitle || context.title || context.id}
+          </h3>
+
+          {#if showDescriptionHeader}
+          <div class="context-type-ct flex items-center gap-2 mt-1">
+            <span class="context-type-icon text-sm">
+              {#if context.type === 'frame'}📱{:else if context.type === 'text'}📄{:else if context.type === 'image'}🖼️{:else if context.type === 'document'}📋{:else}💬{/if}
+            </span>
+            <span class="text-xs text-gray-500">
+              {context.type} chat
+            </span>
+            <StatusIndicator 
+              status={isCompleted ? 'completed' : (isLoading ? 'loading' : 'active')}
+              messageCount={currentMessages?.length || 0}
+              showText={false}
+              size="sm"
+            />
+          </div>
+          {/if}
+        </div>
+      </div>
+    </div>
+  {/if}
+
+  <!-- Chat Interface -->
+  {#if isInitialized}
+    <div
+      class="prompt-chat-messages-area overflow-hidden"
+      style="{messagesAreaHeight !== null
+        ? `flex: 0 0 ${messagesAreaHeight}px; height: ${messagesAreaHeight}px;`
+        : 'flex: 1 1 auto; min-height: 0;'}"
+    >
+      <ChatMessages
+        class="prompt-chat-messages h-full"
+        messages={currentMessages || []}
+        isLoading={isLoading}
+        {context}
+        isCompleted={isCompleted}
+        enableAutoCodeDetection={config?.features?.autoCodeDetection === true}
+        showGenerationSummaries={config?.features?.showGenerationSummaries === true}
+        onSuggestionSelected={handleSuggestionSelected}
+        onRestoreCheckpoint={handleRestoreCheckpoint}
+        onRetryMessage={handleRetryMessage}
+      />
+    </div>
+
+    <div
+      class="prompt-chat-messages-resize-handle flex items-center justify-center cursor-ns-resize select-none group border-t border-b border-transparent hover:border-gray-300 hover:bg-gray-100/80 transition-colors"
+      class:bg-blue-100={isResizingMessages}
+      class:border-blue-300={isResizingMessages}
+      style="height: 16px; touch-action: none; padding: 4px 0;"
+      onpointerdown={handleMessagesResizeStart}
+      role="separator"
+      aria-orientation="horizontal"
+      aria-label="Resize messages area"
+      title="Drag to resize messages area"
+    >
+      <div class="drag-grip w-10 h-1 rounded-full bg-gray-300 group-hover:bg-gray-500 group-hover:w-14 transition-all {isResizingMessages ? 'bg-blue-400 w-14' : ''}"></div>
+    </div>
+
+    <ActionBar 
+      {context}
+      conversationId={currentConversationId}
+      isRecording={localIsRecording}
+      isCompleted={isCompleted}
+      disabled={!isInitialized || isLoading}
+      showScreenshot={config?.features?.screenshot !== false}
+      showRecord={config?.features?.screenRecording !== false}
+      showUpload={config?.features?.fileUpload !== false}
+      showComplete={config?.features?.restoreCheckpoint !== false}
+      on:screenshot={handleScreenshot}
+      on:recordStart={handleRecordStart}
+      on:recordStop={handleRecordStop}
+      on:upload={handleUpload}
+      on:complete={handleComplete}
+      on:error={handleActionError}
+    />
+    
+    <ChatInput 
+      value={localInputText}
+      attachments={localAttachments}
+      isRecording={localIsRecording}
+      isSending={localIsSending}
+      isUploading={localIsUploading}
+      onSend={(content, attachmentInputs) => {
+        sendMessage(content, attachmentInputs);
+      }}
+      onInputChange={(text) => {
+        chatLog('Input change for chat', context.id, ':', text);
+        localInputText = text;
+        notifyDraftChange();
+      }}
+      onAttachmentsChange={(attachments) => {
+        chatLog('Attachments change for chat', context.id, ':', attachments.length);
+        localAttachments = attachments;
+        notifyDraftChange();
+      }}
+    />
+  {:else}
+    <!-- Loading State -->
+    <div class="loading-indicator-ct flex-1 flex items-center justify-center">
+      <div class="text-center">
+        <div class="w-8 h-8 border-2 border-gray-300 border-t-blue-600 rounded-full animate-spin mx-auto mb-4"></div>
+        <p class="text-gray-600 text-sm">Initializing chat...</p>
+      </div>
+    </div>
+  {/if}
+
+  <!-- Error Display -->
+  {#if ui?.errorMessage}
+    <div class="error-message-ct absolute top-0 left-0 right-0 bg-red-50 border-l-4 border-red-400 p-3 flex items-center justify-between text-sm text-red-700 rounded-none z-50">
+      <span>{ui.errorMessage}</span>
+      <button 
+        class="ml-2 text-red-400 hover:text-red-600 font-semibold w-5 h-5 flex items-center justify-center"
+        onclick={() => chatStore.actions.updateUI({ errorMessage: null })}
+      >
+        ✕
+      </button>
+    </div>
+  {/if}
+</div>
+
+<!-- No styles needed now -->