@widgetic/chat 0.1.4

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

@@ -0,0 +1,28 @@
+import type { ChatMessage, ChatContext } from '../types/index.js';
+interface Props {
+    className?: className;
+    messages: ChatMessage[];
+    isLoading?: boolean;
+    context: ChatContext;
+    isCompleted?: boolean;
+    /**
+     * When true, heuristic code pattern detection (`detectCodePatterns`) runs
+     * for messages without explicit ``` fences. Default false — keeps chat UI
+     * clean when assistants return summaries that mention file paths or
+     * extensions (e.g. "Updated 4 files: ...svelte") which would otherwise be
+     * misclassified as JavaScript code blocks. Enable only for debugging.
+     */
+    enableAutoCodeDetection?: boolean;
+    /**
+     * When false, backend-generated "Updated N files: ..." summaries are
+     * hidden from the UI (they still exist in the DB as LLM context). Default
+     * false — noisy for end users. Typically bound to `debugMode` by hosts.
+     */
+    showGenerationSummaries?: boolean;
+    onSuggestionSelected?: (suggestion: string) => void;
+    onRestoreCheckpoint?: (messageId: string, messageIndex: number) => void;
+    onRetryMessage?: (content: string) => void;
+}
+declare const ChatMessages: import("svelte").Component<Props, {}, "">;
+type ChatMessages = ReturnType<typeof ChatMessages>;
+export default ChatMessages;

package/dist/components/CodeBlock.svelte

@@ -0,0 +1,286 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import hljs from 'highlight.js';
+  
+  interface Props {
+    code: string;
+    language?: string;
+    showLineNumbers?: boolean;
+    title?: string;
+    copyable?: boolean;
+  }
+  
+  let { code, language = 'plaintext', showLineNumbers = true, title, copyable = true }: Props = $props();
+  
+  let codeElement: HTMLElement;
+  let highlightedCode = $state('');
+  let copied = $state(false);
+  
+  onMount(() => {
+    // Auto-detect language if not provided
+    if (language === 'plaintext') {
+      const detected = hljs.highlightAuto(code);
+      highlightedCode = detected.value;
+      language = detected.language || 'plaintext';
+    } else {
+      try {
+        const highlighted = hljs.highlight(code, { language });
+        highlightedCode = highlighted.value;
+      } catch (error) {
+        // Fallback to auto-detect if specific language fails
+        const detected = hljs.highlightAuto(code);
+        highlightedCode = detected.value;
+        language = detected.language || 'plaintext';
+      }
+    }
+  });
+  
+  async function copyToClipboard() {
+    try {
+      await navigator.clipboard.writeText(code);
+      copied = true;
+      setTimeout(() => copied = false, 2000);
+    } catch (error) {
+      console.error('Failed to copy code:', error);
+    }
+  }
+  
+  function getLanguageIcon(lang: string): string {
+    const icons: Record<string, string> = {
+      javascript: '🟨',
+      typescript: '🔷',
+      python: '🐍',
+      java: '☕',
+      cpp: '⚙️',
+      css: '🎨',
+      html: '🌐',
+      json: '📋',
+      sql: '🗃️',
+      bash: '💻',
+      shell: '💻',
+      yaml: '📄',
+      xml: '📄',
+      markdown: '📝'
+    };
+    return icons[lang] || '📄';
+  }
+</script>
+
+<div class="code-block">
+  {#if title || language || copyable}
+    <div class="code-header">
+      <div class="code-info">
+        {#if title}
+          <span class="code-title">{title}</span>
+        {:else if language}
+          <div class="language-badge">
+            <span class="language-icon">{getLanguageIcon(language)}</span>
+            <span class="language-name">{language}</span>
+          </div>
+        {/if}
+      </div>
+      
+      {#if copyable}
+        <button 
+          class="copy-button"
+          class:copied
+          onclick={copyToClipboard}
+          title={copied ? 'Copied!' : 'Copy code'}
+        >
+          {#if copied}
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M20 6L9 17l-5-5"/>
+            </svg>
+            Copied!
+          {:else}
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
+              <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/>
+            </svg>
+            Copy
+          {/if}
+        </button>
+      {/if}
+    </div>
+  {/if}
+  
+  <div class="code-content">
+    <pre class="code-pre" class:with-line-numbers={showLineNumbers}><code 
+      bind:this={codeElement}
+      class="hljs language-{language}"
+    >{@html highlightedCode || code}</code></pre>
+  </div>
+</div>
+
+<!-- Import highlight.js CSS theme -->
+<svelte:head>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">
+</svelte:head>
+
+<style>
+  .code-block {
+    border: 1px solid #e5e7eb;
+    border-radius: 8px;
+    overflow: hidden;
+    background: #f9fafb;
+    margin: 8px 0;
+    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+  }
+  
+  .code-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 12px;
+    background: #f3f4f6;
+    border-bottom: 1px solid #e5e7eb;
+    font-size: 12px;
+  }
+  
+  .code-info {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  
+  .code-title {
+    font-weight: 600;
+    color: #374151;
+  }
+  
+  .language-badge {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    color: #6b7280;
+  }
+  
+  .language-icon {
+    font-size: 14px;
+  }
+  
+  .language-name {
+    font-weight: 500;
+    text-transform: uppercase;
+    font-size: 11px;
+    letter-spacing: 0.5px;
+  }
+  
+  .copy-button {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 4px 8px;
+    border: 1px solid #d1d5db;
+    border-radius: 4px;
+    background: white;
+    color: #374151;
+    font-size: 11px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+  
+  .copy-button:hover {
+    background: #f3f4f6;
+    border-color: #9ca3af;
+  }
+  
+  .copy-button.copied {
+    background: #dcfce7;
+    border-color: #86efac;
+    color: #166534;
+  }
+  
+  .code-content {
+    overflow-x: auto;
+  }
+  
+  .code-pre {
+    margin: 0;
+    padding: 16px;
+    background: white;
+    overflow-x: auto;
+    font-size: 13px;
+    line-height: 1.5;
+  }
+  
+  .code-pre.with-line-numbers {
+    counter-reset: line;
+  }
+  
+  .code-pre.with-line-numbers code {
+    counter-increment: line;
+  }
+  
+  /* Line numbers styling */
+  .with-line-numbers :global(.hljs) {
+    padding-left: 3em;
+    position: relative;
+  }
+  
+  .with-line-numbers :global(.hljs::before) {
+    content: counter(line);
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 2.5em;
+    background: #f8f9fa;
+    border-right: 1px solid #e9ecef;
+    color: #6c757d;
+    text-align: right;
+    padding-right: 8px;
+    font-size: 12px;
+    line-height: inherit;
+    user-select: none;
+  }
+  
+  /* Override some highlight.js styles for better integration */
+  .code-pre :global(.hljs) {
+    background: transparent !important;
+    padding: 0;
+  }
+  
+  /* Dark mode support */
+  @media (prefers-color-scheme: dark) {
+    .code-block {
+      background: #1f2937;
+      border-color: #374151;
+    }
+    
+    .code-header {
+      background: #374151;
+      border-color: #4b5563;
+    }
+    
+    .code-title {
+      color: #f3f4f6;
+    }
+    
+    .language-badge {
+      color: #d1d5db;
+    }
+    
+    .copy-button {
+      background: #4b5563;
+      border-color: #6b7280;
+      color: #f3f4f6;
+    }
+    
+    .copy-button:hover {
+      background: #6b7280;
+    }
+    
+    .code-pre {
+      background: #1f2937;
+      color: #f3f4f6;
+    }
+    
+    .with-line-numbers :global(.hljs::before) {
+      background: #374151;
+      border-color: #4b5563;
+      color: #9ca3af;
+    }
+  }
+</style> 

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

@@ -0,0 +1,10 @@
+interface Props {
+    code: string;
+    language?: string;
+    showLineNumbers?: boolean;
+    title?: string;
+    copyable?: boolean;
+}
+declare const CodeBlock: import("svelte").Component<Props, {}, "">;
+type CodeBlock = ReturnType<typeof CodeBlock>;
+export default CodeBlock;

package/dist/components/ContextPreview.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+  import type { ChatContext } from '../types/index.js';
+
+  interface Props {
+    context: ChatContext;
+    onclick?: () => void;
+  }
+
+  let { context, onclick }: Props = $props();
+
+  function handleClick() {
+    onclick?.();
+  }
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<button
+  class="flex items-center justify-between p-3 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors shadow-sm hover:shadow-md w-full text-left"
+  onclick={handleClick}
+  aria-label="Expand {context.title || context.id} chat context"
+>
+  <div class="flex items-center gap-3">
+    {#if context.thumbnail}
+      <img 
+        src={context.thumbnail} 
+        alt={context.title || context.id}
+        class="w-10 h-10 rounded-md object-cover"
+      />
+    {:else}
+      <div class="w-10 h-10 rounded-md 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>
+    {/if}
+    
+    <div class="flex flex-col">
+      <h4 class="font-medium text-gray-900 dark:text-gray-100 text-sm truncate max-w-[180px]">
+        {context.title || context.id}
+      </h4>
+      <p class="text-xs text-gray-500 dark:text-gray-400 capitalize">
+        {context.type} chat
+      </p>
+    </div>
+  </div>
+  
+  <div class="flex-shrink-0">
+    <svg 
+      class="w-5 h-5 text-gray-400" 
+      viewBox="0 0 24 24" 
+      fill="none" 
+      stroke="currentColor"
+    >
+      <path d="m18 15-6-6-6 6"/>
+    </svg>
+  </div>
+</button> 

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

@@ -0,0 +1,8 @@
+import type { ChatContext } from '../types/index.js';
+interface Props {
+    context: ChatContext;
+    onclick?: () => void;
+}
+declare const ContextPreview: import("svelte").Component<Props, {}, "">;
+type ContextPreview = ReturnType<typeof ContextPreview>;
+export default ContextPreview;

package/dist/components/LoadingIndicator.svelte

@@ -0,0 +1,151 @@
+<script lang="ts">
+  interface Props {
+    type?: 'dots' | 'spinner' | 'pulse' | 'typing' | 'thinking';
+    size?: 'sm' | 'md' | 'lg';
+    text?: string;
+    color?: 'primary' | 'secondary' | 'muted';
+  }
+  
+  let { 
+    type = 'thinking', 
+    size = 'md', 
+    text = '', 
+    color = 'muted' 
+  }: Props = $props();
+  
+  let colorClasses = $derived({
+    primary: 'text-blue-600',
+    secondary: 'text-gray-600', 
+    muted: 'text-gray-400'
+  }[color]);
+  
+  let sizeClasses = $derived({
+    sm: 'text-xs',
+    md: 'text-sm',
+    lg: 'text-base'
+  }[size]);
+  
+  let dotSize = $derived({
+    sm: 'w-1 h-1',
+    md: 'w-1.5 h-1.5',
+    lg: 'w-2 h-2'
+  }[size]);
+  
+  let spinnerSize = $derived({
+    sm: 'w-4 h-4',
+    md: 'w-5 h-5',
+    lg: 'w-6 h-6'
+  }[size]);
+</script>
+
+<div class="loading-indicator flex items-center gap-2 {colorClasses} {sizeClasses}">
+  {#if type === 'dots'}
+    <div class="flex gap-1">
+      <span class="{dotSize} bg-current rounded-full animate-pulse" style="animation-delay: 0ms;"></span>
+      <span class="{dotSize} bg-current rounded-full animate-pulse" style="animation-delay: 150ms;"></span>
+      <span class="{dotSize} bg-current rounded-full animate-pulse" style="animation-delay: 300ms;"></span>
+    </div>
+  {:else if type === 'spinner'}
+    <div class="{spinnerSize} animate-spin">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M21 12a9 9 0 11-6.219-8.56"/>
+      </svg>
+    </div>
+  {:else if type === 'pulse'}
+    <div class="{spinnerSize} animate-pulse">
+      <svg viewBox="0 0 24 24" fill="currentColor">
+        <circle cx="12" cy="12" r="10"/>
+      </svg>
+    </div>
+  {:else if type === 'typing'}
+    <!-- Typing indicator with three bouncing dots -->
+    <div class="flex gap-1">
+      <span class="{dotSize} bg-current rounded-full animate-bounce" style="animation-delay: 0ms;"></span>
+      <span class="{dotSize} bg-current rounded-full animate-bounce" style="animation-delay: 150ms;"></span>
+      <span class="{dotSize} bg-current rounded-full animate-bounce" style="animation-delay: 300ms;"></span>
+    </div>
+  {:else if type === 'thinking'}
+    <!-- AI thinking indicator -->
+    <div class="thinking-indicator flex items-center gap-2">
+      <div class="thinking-brain">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M12 8V4l3 3-3 3m0 0l-3-3 3-3m0 8v8"/>
+          <path d="M8 12h8"/>
+        </svg>
+      </div>
+      <div class="flex gap-1">
+        <span class="{dotSize} bg-current rounded-full animate-pulse" style="animation-delay: 0ms;"></span>
+        <span class="{dotSize} bg-current rounded-full animate-pulse" style="animation-delay: 200ms;"></span>
+        <span class="{dotSize} bg-current rounded-full animate-pulse" style="animation-delay: 400ms;"></span>
+      </div>
+    </div>
+  {/if}
+  
+  {#if text}
+    <span class="loading-text font-medium">
+      {text}
+    </span>
+  {/if}
+</div>
+
+<style>
+  .loading-indicator {
+    user-select: none;
+  }
+  
+  .thinking-brain {
+    opacity: 0.7;
+    animation: think 2s ease-in-out infinite;
+  }
+  
+  @keyframes think {
+    0%, 100% { 
+      opacity: 0.7;
+      transform: scale(1);
+    }
+    50% { 
+      opacity: 1;
+      transform: scale(1.1);
+    }
+  }
+  
+  @keyframes bounce {
+    0%, 80%, 100% {
+      transform: translateY(0);
+    }
+    40% {
+      transform: translateY(-6px);
+    }
+  }
+  
+  @keyframes pulse {
+    0%, 100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.3;
+    }
+  }
+  
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  
+  .animate-bounce {
+    animation: bounce 1s ease-in-out infinite;
+  }
+  
+  .animate-pulse {
+    animation: pulse 1.5s ease-in-out infinite;
+  }
+  
+  .animate-spin {
+    animation: spin 1s linear infinite;
+  }
+  
+</style> 

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

@@ -0,0 +1,9 @@
+interface Props {
+    type?: 'dots' | 'spinner' | 'pulse' | 'typing' | 'thinking';
+    size?: 'sm' | 'md' | 'lg';
+    text?: string;
+    color?: 'primary' | 'secondary' | 'muted';
+}
+declare const LoadingIndicator: import("svelte").Component<Props, {}, "">;
+type LoadingIndicator = ReturnType<typeof LoadingIndicator>;
+export default LoadingIndicator;

package/dist/components/StatusIndicator.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+  interface Props {
+    status: 'active' | 'completed' | 'loading' | 'error';
+    messageCount?: number;
+    showText?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+  }
+  
+  let { status, messageCount = 0, showText = true, size = 'md' }: Props = $props();
+  
+  function getStatusConfig(status: string) {
+    switch (status) {
+      case 'completed':
+        return {
+          icon: '✅',
+          text: 'Completed',
+          color: 'text-green-600',
+          bgColor: 'bg-green-100',
+          borderColor: 'border-green-200'
+        };
+      case 'loading':
+        return {
+          icon: '⏳',
+          text: 'Processing...',
+          color: 'text-blue-600',
+          bgColor: 'bg-blue-100',
+          borderColor: 'border-blue-200'
+        };
+      case 'error':
+        return {
+          icon: '❌',
+          text: 'Error',
+          color: 'text-red-600',
+          bgColor: 'bg-red-100',
+          borderColor: 'border-red-200'
+        };
+      default: // active
+        return {
+          icon: '💬',
+          text: 'Active',
+          color: 'text-gray-600',
+          bgColor: 'bg-gray-100',
+          borderColor: 'border-gray-200'
+        };
+    }
+  }
+  
+  let config = $derived(getStatusConfig(status));
+  let sizeClasses = $derived({
+    sm: 'px-2 py-1 text-xs',
+    md: 'px-3 py-1.5 text-sm',
+    lg: 'px-4 py-2 text-base'
+  }[size]);
+</script>
+
+<div 
+  class="status-indicator inline-flex items-center gap-2 rounded-full border {config.bgColor} {config.borderColor} {config.color} {sizeClasses}"
+  class:animate-pulse={status === 'loading'}
+>
+  <span class="status-icon" class:animate-spin={status === 'loading'}>
+    {#if status === 'loading'}
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M21 12a9 9 0 11-6.219-8.56"/>
+      </svg>
+    {:else}
+      {config.icon}
+    {/if}
+  </span>
+  
+  {#if showText}
+    <span class="status-text font-medium">
+      {config.text}
+      {#if messageCount > 0 && status !== 'loading'}
+        <span class="message-count opacity-75">
+          ({messageCount} message{messageCount !== 1 ? 's' : ''})
+        </span>
+      {/if}
+    </span>
+  {/if}
+</div>
+
+<style>
+  .status-indicator {
+    transition: all 0.2s ease;
+    font-weight: 500;
+    user-select: none;
+  }
+  
+  .status-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  
+  .message-count {
+    font-weight: normal;
+    font-size: 0.9em;
+  }
+  
+  @keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }
+  
+  .animate-spin {
+    animation: spin 1s linear infinite;
+  }
+  
+  /* Dark mode support */
+  @media (prefers-color-scheme: dark) {
+    .status-indicator {
+      border-color: #374151;
+    }
+  }
+</style> 

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

@@ -0,0 +1,9 @@
+interface Props {
+    status: 'active' | 'completed' | 'loading' | 'error';
+    messageCount?: number;
+    showText?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+}
+declare const StatusIndicator: import("svelte").Component<Props, {}, "">;
+type StatusIndicator = ReturnType<typeof StatusIndicator>;
+export default StatusIndicator;