@widgetic/chat 0.1.4

package/dist/components/Chat.svelte.d.ts

@@ -0,0 +1,112 @@
+import type { ChatConfig, ChatContext } from '../types/index.js';
+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>;
+}
+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;
+}
+declare const Chat: import("svelte").Component<Props, {}, "">;
+type Chat = ReturnType<typeof Chat>;
+export default Chat;

package/dist/components/ChatHeader.svelte

@@ -0,0 +1,182 @@
+<script lang="ts">
+  import type { ChatContext, ChatConversation } from '../types/index.js';
+
+  // Props
+  interface Props {
+    context: ChatContext;
+    conversations: ChatConversation[];
+    currentConversationId: string | null;
+    onClose: () => void;
+    onNewConversation: () => void;
+    onSwitchConversation: (conversationId: string) => void;
+  }
+
+  let { 
+    context, 
+    conversations, 
+    currentConversationId, 
+    onClose, 
+    onNewConversation, 
+    onSwitchConversation 
+  }: Props = $props();
+
+  // Local state
+  let showConversationMenu = $state(false);
+
+  function handleConversationSelect(conversationId: string) {
+    showConversationMenu = false;
+    onSwitchConversation(conversationId);
+  }
+
+  function formatContextType(type: string): string {
+    switch (type) {
+      case 'frame': return '🖼️ Frame';
+      case 'text': return '📄 Document';
+      case 'canvas': return '🎨 Canvas';
+      default: return '💬 Chat';
+    }
+  }
+
+  function truncateTitle(title: string, maxLength: number = 30): string {
+    return title.length > maxLength ? title.substring(0, maxLength) + '...' : title;
+  }
+</script>
+
+<header class="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-600 px-4 py-3 flex-shrink-0">
+  <div class="flex items-center justify-between">
+    <!-- Context Info -->
+    <div class="flex items-center gap-3 flex-1 min-w-0">
+      <div class="w-8 h-8 rounded-lg bg-gray-100 dark:bg-gray-700 flex items-center justify-center text-lg">
+        {#if context.type === 'frame'}
+          📱
+        {:else if context.type === 'text'}
+          📄
+        {:else if context.type === 'image'}
+          🖼️
+        {:else if context.type === 'document'}
+          📋
+        {:else}
+          💬
+        {/if}
+      </div>
+      
+      <div class="min-w-0 flex-1">
+        <h3 class="font-semibold text-gray-900 dark:text-gray-100 text-sm truncate">
+          {context.title || context.id}
+        </h3>
+        <p class="text-xs text-gray-500 dark:text-gray-400">
+          {context.type} chat
+        </p>
+      </div>
+    </div>
+
+    <!-- Header Actions -->
+    <div class="flex items-center gap-2">
+      <!-- Conversation selector/New conversation -->
+      {#if conversations && conversations.length > 1}
+        <div class="relative">
+          <button 
+            class="w-8 h-8 rounded-md flex items-center justify-center text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
+            onclick={() => showConversationMenu = !showConversationMenu}
+            title="Switch conversation"
+            aria-label="Switch conversation"
+          >
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4">
+              <circle cx="12" cy="12" r="1"/>
+              <circle cx="19" cy="12" r="1"/>
+              <circle cx="5" cy="12" r="1"/>
+            </svg>
+          </button>
+
+          <!-- Conversation Menu -->
+          {#if showConversationMenu}
+            <!-- svelte-ignore a11y_click_events_have_key_events -->
+            <!-- svelte-ignore a11y_no_static_element_interactions -->
+            <div 
+              class="fixed inset-0 z-40"
+              onclick={() => showConversationMenu = false}
+            ></div>
+            
+            <div class="absolute top-full right-0 mt-1 w-64 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg z-50 max-h-80 overflow-hidden">
+              <!-- Menu Header -->
+              <div class="flex items-center justify-between p-3 border-b border-gray-200 dark:border-gray-600">
+                <span class="font-medium text-gray-900 dark:text-gray-100 text-sm">Conversations</span>
+                <button 
+                  class="flex items-center gap-1 px-2 py-1 text-xs font-medium text-blue-600 hover:text-blue-800 hover:bg-blue-50 rounded transition-colors"
+                  onclick={onNewConversation}
+                >
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-3 h-3">
+                    <path d="M12 5v14"/>
+                    <path d="M5 12h14"/>
+                  </svg>
+                  New
+                </button>
+              </div>
+
+              <!-- Conversation List -->
+              <div class="max-h-60 overflow-y-auto">
+                {#each conversations as conversation (conversation.id)}
+                  <button 
+                    class="w-full flex items-center justify-between p-3 text-left hover:bg-gray-50 dark:hover:bg-gray-700 border-b border-gray-100 dark:border-gray-600 last:border-b-0 transition-colors"
+                    class:active={conversation.id === currentConversationId}
+                    onclick={() => {
+                      onSwitchConversation(conversation.id);
+                      showConversationMenu = false;
+                    }}
+                  >
+                    <span class="font-medium text-sm truncate text-gray-900 dark:text-gray-100">{conversation.title || 'Untitled'}</span>
+                    <div class="flex items-center gap-2">
+                      {#if conversation._unreadCount && conversation._unreadCount > 0}
+                        <span class="bg-blue-600 text-white text-xs px-1.5 py-0.5 rounded-full min-w-[1.25rem] h-5 flex items-center justify-center">
+                          {conversation._unreadCount}
+                        </span>
+                      {/if}
+                    </div>
+                  </button>
+                {/each}
+              </div>
+            </div>
+          {/if}
+        </div>
+      {:else}
+        <!-- New conversation button when only one conversation -->
+        <button 
+          class="w-8 h-8 rounded-md flex items-center justify-center text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
+          onclick={onNewConversation}
+          title="New conversation"
+          aria-label="Start new conversation"
+        >
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4">
+            <path d="M12 5v14"/>
+            <path d="M5 12h14"/>
+          </svg>
+        </button>
+      {/if}
+
+      <!-- Close button -->
+      <button 
+        class="w-8 h-8 rounded-md flex items-center justify-center text-gray-500 dark:text-gray-400 hover:text-red-600 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-900 transition-colors"
+        onclick={onClose}
+        title="Close chat"
+        aria-label="Close chat"
+      >
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4">
+          <path d="M18 6L6 18"/>
+          <path d="M6 6l12 12"/>
+        </svg>
+      </button>
+    </div>
+  </div>
+</header>
+
+<style>
+  .active {
+    background-color: rgb(239 246 255);
+    color: rgb(30 58 138);
+  }
+
+  :global(.dark) .active {
+    background-color: rgb(30 58 138);
+    color: rgb(191 219 254);
+  }
+</style> 

package/dist/components/ChatHeader.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { ChatContext, ChatConversation } from '../types/index.js';
+interface Props {
+    context: ChatContext;
+    conversations: ChatConversation[];
+    currentConversationId: string | null;
+    onClose: () => void;
+    onNewConversation: () => void;
+    onSwitchConversation: (conversationId: string) => void;
+}
+declare const ChatHeader: import("svelte").Component<Props, {}, "">;
+type ChatHeader = ReturnType<typeof ChatHeader>;
+export default ChatHeader;

package/dist/components/ChatInput.svelte

@@ -0,0 +1,290 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import { chatLog } from '../utils/logger.js';
+  import type { AttachmentInput } from '../types/attachment.js';
+
+  interface Props {
+    value: string;
+    attachments: AttachmentInput[];
+    isRecording: boolean;
+    isSending: boolean;
+    isUploading: boolean;
+    onSend: (content: string, attachments?: AttachmentInput[]) => void;
+    onInputChange: (text: string) => void;
+    onAttachmentsChange: (attachments: AttachmentInput[]) => void;
+    placeholder?: string;
+  }
+
+  let { 
+    value, 
+    attachments, 
+    isRecording, 
+    isSending, 
+    isUploading,
+    onSend, 
+    onInputChange, 
+    onAttachmentsChange,
+    placeholder = "Type your message..."
+  }: Props = $props();
+
+  let textArea: HTMLTextAreaElement;
+
+  onMount(() => {
+    chatLog('ChatInput mounted for value:', value);
+  });
+
+  onDestroy(() => {
+    chatLog('ChatInput destroyed for value:', value);
+  });
+
+  function handleSubmit() {
+    if (!value.trim() && attachments.length === 0) return;
+    if (isSending) return;
+
+    onSend(value.trim(), attachments.length > 0 ? attachments : undefined);
+    
+    // Keep focus on textarea after sending
+    setTimeout(() => {
+      if (textArea) {
+        textArea.focus();
+      }
+    }, 100);
+  }
+
+  function handleKeyDown(event: KeyboardEvent) {
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault();
+      handleSubmit();
+    }
+  }
+
+  function removeAttachment(index: number) {
+    const newAttachments = attachments.filter((_, i) => i !== index);
+    onAttachmentsChange(newAttachments);
+  }
+
+  let draggingAttachmentIndex: number | null = $state(null);
+
+  function handleAttachmentDragStart(index: number, e: DragEvent) {
+    draggingAttachmentIndex = index;
+    if (e.dataTransfer) {
+      e.dataTransfer.effectAllowed = 'move';
+      e.dataTransfer.setData('text/plain', String(index));
+    }
+  }
+
+  function handleAttachmentDragOver(e: DragEvent) {
+    e.preventDefault();
+    if (e.dataTransfer) e.dataTransfer.dropEffect = 'move';
+  }
+
+  function handleAttachmentDrop(targetIndex: number, e: DragEvent) {
+    e.preventDefault();
+    if (draggingAttachmentIndex === null || draggingAttachmentIndex === targetIndex) {
+      draggingAttachmentIndex = null;
+      return;
+    }
+    const reordered = [...attachments];
+    const [moved] = reordered.splice(draggingAttachmentIndex, 1);
+    reordered.splice(targetIndex, 0, moved);
+    onAttachmentsChange(reordered);
+    draggingAttachmentIndex = null;
+  }
+
+  function handleAttachmentDragEnd() {
+    draggingAttachmentIndex = null;
+  }
+
+  let lightboxSrc: string | null = $state(null);
+
+  function openLightbox(attachment: AttachmentInput) {
+    const src = attachment.preview || URL.createObjectURL(attachment.file);
+    lightboxSrc = src;
+  }
+
+  // Auto-resize textarea up to max-height, then scroll
+  $effect(() => {
+    if (textArea) {
+      textArea.style.height = 'auto';
+      const maxH = 120;
+      textArea.style.height = Math.min(textArea.scrollHeight, maxH) + 'px';
+    }
+  });
+
+  // Update textarea value when prop changes (for clearing)
+  $effect(() => {
+    if (textArea && textArea.value !== value) {
+      chatLog('ChatInput: Updating textarea value from', textArea.value, 'to', value);
+      textArea.value = value;
+      // Re-trigger auto-resize after value change
+      textArea.style.height = 'auto';
+      const maxH = 120;
+      textArea.style.height = Math.min(textArea.scrollHeight, maxH) + 'px';
+      
+      // If value was cleared (after sending), refocus
+      if (value === '' && document.activeElement !== textArea) {
+        setTimeout(() => {
+          if (textArea) {
+            textArea.focus();
+          }
+        }, 50);
+      }
+    }
+  });
+
+  // Debug value changes
+  $effect(() => {
+    chatLog('ChatInput: Value prop changed to:', value);
+  });
+</script>
+
+<div class="chat-input-ct border-t border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-800">
+  <!-- Attachments Preview -->
+  {#if attachments.length > 0}
+    <div class="attachments-preview-ct flex flex-wrap gap-2 p-3 border-b border-gray-100 dark:border-gray-700">
+      {#each attachments as attachment, index}
+        <div
+          class="attachment-preview-item-ct relative bg-gray-50 dark:bg-gray-700 rounded-lg overflow-hidden"
+          draggable="true"
+          ondragstart={(e) => handleAttachmentDragStart(index, e)}
+          ondragover={handleAttachmentDragOver}
+          ondrop={(e) => handleAttachmentDrop(index, e)}
+          ondragend={handleAttachmentDragEnd}
+        >
+          <span class="attachment-index-badge absolute top-0.5 left-0.5 z-10 w-4 h-4 flex items-center justify-center rounded-full bg-blue-600 text-white text-[9px] font-bold shadow">{index + 1}</span>
+          {#if attachment.file.type.startsWith('image/')}
+            <!-- svelte-ignore a11y_click_events_have_key_events -->
+            <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+            <img 
+              src={attachment.preview || URL.createObjectURL(attachment.file)} 
+              alt={attachment.file.name}
+              class="image-preview-ct w-16 h-16 object-cover cursor-pointer"
+              onclick={() => openLightbox(attachment)}
+            />
+          {:else}
+            <!-- File Preview -->
+            <div class="file-preview-ct flex items-center gap-2 p-3 w-32">
+              <span class="text-lg">📄</span>
+              <span class="text-xs text-gray-600 dark:text-gray-300 truncate flex-1">{attachment.file.name}</span>
+            </div>
+          {/if}
+          
+          <!-- Remove Button -->
+          <button 
+            class="absolute top-1 right-1 w-5 h-5 bg-red-500 text-white rounded-full flex items-center justify-center text-xs hover:bg-red-600"
+            onclick={() => removeAttachment(index)}
+            aria-label="Remove attachment"
+          >
+            ✕
+          </button>
+          
+          {#if attachment.uploadProgress && attachment.uploadProgress > 0}
+            <div class="absolute bottom-0 left-0 right-0 h-1 bg-gray-200">
+              <div class="h-full bg-blue-500 transition-all duration-300" style="width: {attachment.uploadProgress}%"></div>
+            </div>
+          {/if}
+        </div>
+      {/each}
+    </div>
+  {/if}
+
+  <!-- Input Area -->
+  <div class="input-area-ct p-4">
+    <div class="input-area-inner-ct flex items-end gap-3 bg-gray-50 dark:bg-gray-700 rounded-lg p-3">
+      <textarea
+        bind:this={textArea}
+        value={value}
+        oninput={(e) => onInputChange((e.target as HTMLTextAreaElement).value)}
+        onkeydown={handleKeyDown}
+        {placeholder}
+        class="flex-1 bg-transparent border-none outline-none resize-y text-sm placeholder-gray-500 dark:text-gray-100 dark:placeholder-gray-400"
+        style="min-height: 30px; max-height: 120px; overflow-y: auto;"
+        rows="1"
+        disabled={isSending}
+      ></textarea>
+      
+      <div class="send-button-ct flex items-center gap-2">
+        <!-- Send Button -->
+        <button 
+          class="send-button-btn w-8 h-8 rounded-lg bg-blue-600 hover:bg-blue-700 flex items-center justify-center transition-colors"
+          class:bg-gray-300={(!value.trim() && attachments.length === 0) || isSending}
+          class:cursor-not-allowed={(!value.trim() && attachments.length === 0) || isSending}
+          onclick={handleSubmit}
+          disabled={(!value.trim() && attachments.length === 0) || isSending}
+          aria-label={isSending ? 'Sending message...' : 'Send message'}
+          title={isSending ? 'Sending message...' : 'Send message'}
+        >
+          {#if isSending}
+            <svg class="w-4 h-4 animate-spin" viewBox="0 0 24 24">
+              <circle cx="12" cy="12" r="10" fill="none" stroke="white" stroke-width="2" opacity="0.3"/>
+              <path d="M22 12a10 10 0 0 1-10 10" fill="none" stroke="white" stroke-width="2" stroke-linecap="round"/>
+            </svg>
+          {:else}
+            <svg viewBox="0 0 24 24" fill="none" stroke="white" class="w-4 h-4">
+              <path d="M22 2L11 13M22 2l-7 20-4-9-9-4z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+          {/if}
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Lightbox overlay for input attachment images -->
+{#if lightboxSrc}
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div class="input-lightbox-overlay" onclick={() => lightboxSrc = null}>
+    <button class="input-lightbox-close" onclick={() => lightboxSrc = null} title="Close">✕</button>
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div class="input-lightbox-content" onclick={(e) => e.stopPropagation()}>
+      <img src={lightboxSrc} alt="Attachment preview" class="input-lightbox-image" />
+    </div>
+  </div>
+{/if}
+
+<style>
+  .input-lightbox-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 9999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.85);
+    backdrop-filter: blur(4px);
+  }
+  .input-lightbox-close {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    border: none;
+    background: rgba(255, 255, 255, 0.15);
+    color: white;
+    font-size: 18px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.2s;
+    z-index: 10;
+  }
+  .input-lightbox-close:hover {
+    background: rgba(255, 255, 255, 0.3);
+  }
+  .input-lightbox-content {
+    max-width: 90vw;
+    max-height: 90vh;
+  }
+  .input-lightbox-image {
+    max-width: 90vw;
+    max-height: 85vh;
+    object-fit: contain;
+    border-radius: 8px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+  }
+</style>

package/dist/components/ChatInput.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { AttachmentInput } from '../types/attachment.js';
+interface Props {
+    value: string;
+    attachments: AttachmentInput[];
+    isRecording: boolean;
+    isSending: boolean;
+    isUploading: boolean;
+    onSend: (content: string, attachments?: AttachmentInput[]) => void;
+    onInputChange: (text: string) => void;
+    onAttachmentsChange: (attachments: AttachmentInput[]) => void;
+    placeholder?: string;
+}
+declare const ChatInput: import("svelte").Component<Props, {}, "">;
+type ChatInput = ReturnType<typeof ChatInput>;
+export default ChatInput;