@svadmin/ui 0.7.0 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [

package/src/components/AutoTable.svelte

@@ -436,6 +436,8 @@
       </div>
     {:else}
       <div in:fade={{ duration: 150 }}>
+        <!-- Desktop Table (hidden on mobile) -->
+        <div class="hidden md:block">
         <Table.Root>
           <Table.Header>
             {#each tbl.getHeaderGroups() as headerGroup}
@@ -582,6 +584,87 @@
             {/each}
           </Table.Body>
         </Table.Root>
+        </div>
+
+        <!-- Mobile Card View (visible only on small screens) -->
+        <div class="md:hidden space-y-3 p-2">
+          {#each tbl.getRowModel().rows as row}
+            {@const record = row.original}
+            {@const id = record[primaryKey] as string | number}
+            <div
+              class="rounded-xl border bg-card p-4 shadow-sm transition-colors {row.getIsSelected() ? 'ring-2 ring-primary bg-accent/30' : ''}"
+            >
+              <!-- Card header: ID + select + actions -->
+              <div class="flex items-center justify-between mb-3">
+                <div class="flex items-center gap-2">
+                  {#if selectable && canDelete}
+                    <Checkbox
+                      checked={row.getIsSelected()}
+                      onCheckedChange={() => row.toggleSelected()}
+                    />
+                  {/if}
+                  <span class="text-xs font-mono text-muted-foreground">#{id}</span>
+                </div>
+                <div class="flex items-center gap-1">
+                  {#if rowActions}
+                    {@render rowActions({ record, id })}
+                  {:else}
+                    {#if canEdit}
+                      <TooltipButton tooltip={t('common.edit')} variant="ghost" size="icon-sm" onclick={() => navigate(`/${resourceName}/edit/${id}`)}>
+                        <Pencil class="h-4 w-4" />
+                      </TooltipButton>
+                    {/if}
+                    <TooltipButton tooltip={t('common.detail')} variant="ghost" size="icon-sm" onclick={() => navigate(`/${resourceName}/show/${id}`)}>
+                      <Eye class="h-4 w-4" />
+                    </TooltipButton>
+                    {#if canDelete}
+                      <TooltipButton tooltip={t('common.delete')} variant="ghost" size="icon-sm" onclick={() => confirmDelete(id)} class="hover:text-destructive">
+                        <Trash2 class="h-4 w-4" />
+                      </TooltipButton>
+                    {/if}
+                  {/if}
+                </div>
+              </div>
+              <!-- Card fields -->
+              <div class="space-y-2">
+                {#each visibleFields.slice(0, 6) as field}
+                  {@const value = record[field.key]}
+                  <div class="flex items-start justify-between gap-4">
+                    <span class="text-xs font-medium text-muted-foreground shrink-0">{field.label}</span>
+                    <span class="text-sm text-right truncate max-w-[60%]">
+                      {#if cellRenderer}
+                        {@render cellRenderer({ field, value, record })}
+                      {:else if field.type === 'boolean'}
+                        <span class="inline-block h-2 w-2 rounded-full {value ? 'bg-green-500' : 'bg-muted-foreground/30'}"></span>
+                      {:else if field.type === 'date' && value}
+                        {new Date(value as string).toLocaleDateString()}
+                      {:else if field.type === 'tags' && Array.isArray(value)}
+                        <div class="flex flex-wrap gap-1 justify-end">
+                          {#each (value as string[]).slice(0, 2) as tag}
+                            <Badge variant="secondary" class="text-[10px]">{tag}</Badge>
+                          {/each}
+                        </div>
+                      {:else if field.type === 'select' && field.options}
+                        {@const opt = field.options.find(o => o.value === value)}
+                        <Badge variant="outline" class="text-[10px]">{opt?.label ?? value ?? '—'}</Badge>
+                      {:else}
+                        {value ?? '—'}
+                      {/if}
+                    </span>
+                  </div>
+                {/each}
+              </div>
+            </div>
+          {:else}
+            <div class="text-center py-10 text-muted-foreground">
+              {#if emptyState}
+                {@render emptyState()}
+              {:else}
+                {t('common.noData')}
+              {/if}
+            </div>
+          {/each}
+        </div>
       </div>
     {/if}
   </div>

package/src/components/ChatDialog.svelte

@@ -0,0 +1,469 @@
+<script lang="ts">
+  import { getChatProvider, getChatContext, setChatContext } from '@svadmin/core';
+  import type { ChatMessage, ChatAction } from '@svadmin/core';
+  import { t } from '@svadmin/core/i18n';
+  import { useParsed } from '@svadmin/core';
+  import { fly, fade, scale } from 'svelte/transition';
+  import { Button } from './ui/button/index.js';
+  import TooltipButton from './TooltipButton.svelte';
+  import { MessageCircle, X, Minus, Send, Loader2, Bot, Trash2 } from 'lucide-svelte';
+
+  interface Props {
+    /** localStorage key for chat history persistence. Set to '' to disable. */
+    persistKey?: string;
+    /** Custom persistence callback — called when messages change */
+    onPersist?: (messages: ChatMessage[]) => void;
+    /** Custom restore callback — called on mount to load history */
+    onRestore?: () => ChatMessage[];
+    /** Callback when user clicks an action button in an assistant message */
+    onAction?: (action: ChatAction, message: ChatMessage) => void;
+  }
+
+  const {
+    persistKey = 'svadmin-chat',
+    onPersist,
+    onRestore,
+    onAction,
+  }: Props = $props();
+
+  let open = $state(false);
+  let minimized = $state(false);
+  let inputValue = $state('');
+  let messages = $state<ChatMessage[]>([]);
+  let isStreaming = $state(false);
+  let messagesContainer: HTMLDivElement | undefined = $state();
+  let abortController: AbortController | null = null;
+  let messageIdCounter = $state(0);
+  let initialized = $state(false);
+
+  const provider = $derived(getChatProvider());
+  const parsed = useParsed();
+
+  // ─── Auto-update ChatContext from current route ─────────────
+  $effect(() => {
+    setChatContext({
+      currentResource: parsed.resource,
+      selectedRecordId: parsed.id,
+      currentView: parsed.action as 'list' | 'edit' | 'create' | 'show' | undefined,
+      pathname: `/${parsed.resource ?? ''}${parsed.action ? '/' + parsed.action : ''}${parsed.id ? '/' + parsed.id : ''}`,
+    });
+  });
+
+  // ─── Restore persisted history on mount ─────────────────────
+  $effect(() => {
+    if (initialized) return;
+    initialized = true;
+    if (onRestore) {
+      messages = onRestore();
+    } else if (persistKey) {
+      try {
+        const stored = localStorage.getItem(persistKey);
+        if (stored) {
+          const parsed = JSON.parse(stored) as ChatMessage[];
+          if (Array.isArray(parsed) && parsed.length > 0) {
+            messages = parsed;
+          }
+        }
+      } catch {
+        // ignore corrupt data
+      }
+    }
+  });
+
+  // ─── Persist on change (debounced) ──────────────────────────
+  let persistTimer: ReturnType<typeof setTimeout> | null = null;
+
+  $effect(() => {
+    // Access `messages` to subscribe to changes
+    const snapshot = messages;
+    if (!initialized) return;
+
+    if (persistTimer) clearTimeout(persistTimer);
+    persistTimer = setTimeout(() => {
+      if (onPersist) {
+        onPersist(snapshot);
+      } else if (persistKey) {
+        try {
+          localStorage.setItem(persistKey, JSON.stringify(snapshot));
+        } catch {
+          // storage full or unavailable
+        }
+      }
+    }, 300);
+  });
+
+  function genId(): string {
+    messageIdCounter++;
+    return `msg-${Date.now()}-${messageIdCounter}`;
+  }
+
+  function scrollToBottom() {
+    requestAnimationFrame(() => {
+      if (messagesContainer) {
+        messagesContainer.scrollTop = messagesContainer.scrollHeight;
+      }
+    });
+  }
+
+  /** Build a system message with the current admin context */
+  function buildContextSystemMessage(): ChatMessage | null {
+    const ctx = getChatContext();
+    if (!ctx.currentResource) return null;
+
+    const parts: string[] = [];
+    parts.push(`Resource: ${ctx.currentResource}`);
+    if (ctx.currentView) parts.push(`View: ${ctx.currentView}`);
+    if (ctx.selectedRecordId) parts.push(`Selected Record ID: ${ctx.selectedRecordId}`);
+    if (ctx.pathname) parts.push(`Path: ${ctx.pathname}`);
+
+    return {
+      id: 'ctx-system',
+      role: 'system',
+      content: `[Admin Context] ${parts.join(' | ')}`,
+      timestamp: Date.now(),
+    };
+  }
+
+  async function sendMessage() {
+    if (!inputValue.trim() || isStreaming || !provider) return;
+
+    const userMsg: ChatMessage = {
+      id: genId(),
+      role: 'user',
+      content: inputValue.trim(),
+      timestamp: Date.now(),
+    };
+
+    messages = [...messages, userMsg];
+    inputValue = '';
+    scrollToBottom();
+
+    // Create placeholder assistant message
+    const assistantMsg: ChatMessage = {
+      id: genId(),
+      role: 'assistant',
+      content: '',
+      timestamp: Date.now(),
+    };
+    messages = [...messages, assistantMsg];
+    isStreaming = true;
+    scrollToBottom();
+
+    abortController = new AbortController();
+
+    try {
+      // Build message list with context system message prepended
+      const contextMsg = buildContextSystemMessage();
+      const allMessages = messages.filter((m) => m.content);
+      const messagesToSend = contextMsg ? [contextMsg, ...allMessages] : allMessages;
+
+      const result = provider.sendMessage(
+        messagesToSend,
+        { signal: abortController.signal },
+      );
+
+      if (result && typeof result === 'object' && Symbol.asyncIterator in result) {
+        // Streaming response
+        for await (const chunk of result as AsyncGenerator<string>) {
+          assistantMsg.content += chunk;
+          messages = [...messages.slice(0, -1), { ...assistantMsg }];
+          scrollToBottom();
+        }
+      } else {
+        // Non-streaming response
+        const text = await (result as Promise<string>);
+        assistantMsg.content = text;
+        messages = [...messages.slice(0, -1), { ...assistantMsg }];
+        scrollToBottom();
+      }
+    } catch (err: unknown) {
+      if (err instanceof Error && err.name === 'AbortError') return;
+      assistantMsg.content = t('chat.error') || 'Sorry, something went wrong. Please try again.';
+      messages = [...messages.slice(0, -1), { ...assistantMsg }];
+    } finally {
+      isStreaming = false;
+      abortController = null;
+      scrollToBottom();
+    }
+  }
+
+  function stopStreaming() {
+    if (abortController) {
+      abortController.abort();
+      isStreaming = false;
+      abortController = null;
+    }
+  }
+
+  function clearChat() {
+    messages = [];
+    isStreaming = false;
+    if (abortController) {
+      abortController.abort();
+      abortController = null;
+    }
+    // Also clear persisted data
+    if (persistKey) {
+      try { localStorage.removeItem(persistKey); } catch { /* noop */ }
+    }
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      sendMessage();
+    }
+  }
+
+  function handleGlobalKeydown(e: KeyboardEvent) {
+    if (e.ctrlKey && e.shiftKey && e.key === 'L') {
+      e.preventDefault();
+      if (open && !minimized) {
+        open = false;
+      } else {
+        open = true;
+        minimized = false;
+      }
+    }
+  }
+
+  function handleAction(action: ChatAction, msg: ChatMessage) {
+    if (onAction) {
+      onAction(action, msg);
+    }
+  }
+
+  /** Simple markdown→html: bold, italic, code blocks, inline code, line breaks */
+  function renderMarkdown(text: string): string {
+    return text
+      .replace(/```(\w*)\n([\s\S]*?)```/g, '<pre class="chat-code-block"><code>$2</code></pre>')
+      .replace(/`([^`]+)`/g, '<code class="chat-inline-code">$1</code>')
+      .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+      .replace(/\*(.+?)\*/g, '<em>$1</em>')
+      .replace(/\n/g, '<br>');
+  }
+
+  const suggestions = $derived([
+    t('chat.suggestion1') || 'How do I create a new resource?',
+    t('chat.suggestion2') || 'Explain the data model',
+    t('chat.suggestion3') || 'Help me write a filter query',
+  ]);
+</script>
+
+<svelte:window onkeydown={handleGlobalKeydown} />
+
+{#if provider}
+  <!-- FAB Button -->
+  {#if !open}
+    <div transition:scale={{ duration: 200 }}>
+      <TooltipButton
+        tooltip={t('chat.title') || 'AI Assistant'}
+        variant="default"
+        size="icon"
+        class="fixed bottom-6 right-6 z-[9998] h-12 w-12 rounded-full shadow-xl hover:shadow-2xl hover:scale-110 transition-all bg-primary text-primary-foreground"
+        onclick={() => { open = true; minimized = false; }}
+      >
+        <MessageCircle class="h-5 w-5" />
+        {#if messages.length > 0}
+          <span class="absolute -top-1 -right-1 h-4 w-4 rounded-full bg-destructive text-[10px] font-bold text-destructive-foreground flex items-center justify-center">
+            {messages.filter(m => m.role === 'assistant').length}
+          </span>
+        {/if}
+      </TooltipButton>
+    </div>
+  {/if}
+
+  <!-- Chat Panel -->
+  {#if open}
+    <div
+      class="fixed bottom-6 right-6 z-[9998] flex flex-col rounded-2xl border bg-card shadow-2xl overflow-hidden"
+      class:w-[400px]={!minimized}
+      class:h-[560px]={!minimized}
+      class:w-[280px]={minimized}
+      class:h-auto={minimized}
+      transition:fly={{ y: 300, duration: 250 }}
+    >
+      <!-- Header -->
+      <div class="flex items-center justify-between px-4 py-3 bg-primary text-primary-foreground shrink-0">
+        <div class="flex items-center gap-2.5">
+          <div class="flex items-center justify-center h-7 w-7 rounded-full bg-primary-foreground/20">
+            <Bot class="h-4 w-4" />
+          </div>
+          <div>
+            <h3 class="text-sm font-semibold leading-none">
+              {t('chat.title') || 'AI Assistant'}
+            </h3>
+            {#if isStreaming}
+              <p class="text-[10px] opacity-80 mt-0.5">{t('chat.typing') || 'Typing...'}</p>
+            {/if}
+          </div>
+        </div>
+        <div class="flex items-center gap-0.5">
+          {#if messages.length > 0}
+            <TooltipButton
+              tooltip={t('chat.clear') || 'Clear'}
+              variant="ghost"
+              size="icon"
+              class="h-7 w-7 text-primary-foreground/70 hover:text-primary-foreground hover:bg-primary-foreground/10"
+              onclick={clearChat}
+            >
+              <Trash2 class="h-3.5 w-3.5" />
+            </TooltipButton>
+          {/if}
+          <TooltipButton
+            tooltip={minimized ? (t('common.expand') || 'Expand') : (t('common.collapse') || 'Minimize')}
+            variant="ghost"
+            size="icon"
+            class="h-7 w-7 text-primary-foreground/70 hover:text-primary-foreground hover:bg-primary-foreground/10"
+            onclick={() => minimized = !minimized}
+          >
+            <Minus class="h-3.5 w-3.5" />
+          </TooltipButton>
+          <TooltipButton
+            tooltip={t('common.close') || 'Close'}
+            variant="ghost"
+            size="icon"
+            class="h-7 w-7 text-primary-foreground/70 hover:text-primary-foreground hover:bg-primary-foreground/10"
+            onclick={() => open = false}
+          >
+            <X class="h-3.5 w-3.5" />
+          </TooltipButton>
+        </div>
+      </div>
+
+      {#if !minimized}
+        <!-- Messages -->
+        <div
+          bind:this={messagesContainer}
+          class="flex-1 overflow-y-auto p-4 space-y-3 scroll-smooth"
+        >
+          {#if messages.length === 0}
+            <!-- Welcome state -->
+            <div class="flex flex-col items-center justify-center h-full text-center px-4" in:fade={{ duration: 200 }}>
+              <div class="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center mb-4">
+                <Bot class="h-6 w-6 text-primary" />
+              </div>
+              <h4 class="text-sm font-semibold text-foreground mb-1">
+                {t('chat.welcome') || 'How can I help?'}
+              </h4>
+              <p class="text-xs text-muted-foreground mb-4">
+                {t('chat.welcomeDesc') || 'Ask me anything about your admin panel.'}
+              </p>
+              <div class="flex flex-col gap-2 w-full max-w-[240px]">
+                {#each suggestions as suggestion}
+                  <button
+                    class="text-left text-xs px-3 py-2 rounded-lg border border-border hover:bg-accent hover:text-accent-foreground transition-colors cursor-pointer"
+                    onclick={() => { inputValue = suggestion; }}
+                  >
+                    {suggestion}
+                  </button>
+                {/each}
+              </div>
+            </div>
+          {:else}
+            {#each messages as msg (msg.id)}
+              <div
+                class="flex {msg.role === 'user' ? 'justify-end' : 'justify-start'}"
+                in:fly={{ y: 10, duration: 150 }}
+              >
+                <div
+                  class="max-w-[85%] rounded-2xl px-3.5 py-2.5 text-sm leading-relaxed {msg.role === 'user'
+                    ? 'bg-primary text-primary-foreground rounded-br-md'
+                    : 'bg-muted text-foreground rounded-bl-md'}"
+                >
+                  {#if msg.role === 'assistant'}
+                    {#if msg.content}
+                      <div class="chat-markdown">{@html renderMarkdown(msg.content)}</div>
+                      <!-- Action Buttons -->
+                      {#if msg.actions && msg.actions.length > 0}
+                        <div class="flex flex-wrap gap-1.5 mt-2 pt-2 border-t border-border/50">
+                          {#each msg.actions as action}
+                            <Button
+                              variant={action.variant ?? 'outline'}
+                              size="sm"
+                              class="h-7 text-xs"
+                              onclick={() => handleAction(action, msg)}
+                            >
+                              {action.label}
+                            </Button>
+                          {/each}
+                        </div>
+                      {/if}
+                    {:else}
+                      <div class="flex items-center gap-1.5 text-muted-foreground">
+                        <Loader2 class="h-3.5 w-3.5 animate-spin" />
+                        <span class="text-xs">{t('chat.thinking') || 'Thinking...'}</span>
+                      </div>
+                    {/if}
+                  {:else}
+                    {msg.content}
+                  {/if}
+                </div>
+              </div>
+            {/each}
+          {/if}
+        </div>
+
+        <!-- Input area -->
+        <div class="shrink-0 border-t bg-card p-3">
+          <div class="flex items-end gap-2">
+            <textarea
+              bind:value={inputValue}
+              onkeydown={handleKeydown}
+              placeholder={t('chat.placeholder') || 'Type a message...'}
+              rows={1}
+              disabled={isStreaming}
+              class="flex-1 resize-none rounded-xl border border-input bg-background px-3 py-2.5 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1 disabled:opacity-50 max-h-[100px] min-h-[40px]"
+            ></textarea>
+            {#if isStreaming}
+              <Button
+                variant="destructive"
+                size="icon"
+                class="h-10 w-10 rounded-xl shrink-0"
+                onclick={stopStreaming}
+              >
+                <X class="h-4 w-4" />
+              </Button>
+            {:else}
+              <Button
+                variant="default"
+                size="icon"
+                class="h-10 w-10 rounded-xl shrink-0"
+                onclick={sendMessage}
+                disabled={!inputValue.trim()}
+              >
+                <Send class="h-4 w-4" />
+              </Button>
+            {/if}
+          </div>
+          <p class="text-[10px] text-muted-foreground mt-1.5 text-center">
+            <kbd class="px-1 py-0.5 rounded border border-border bg-muted text-[9px] font-mono">Ctrl+Shift+L</kbd>
+            {t('chat.shortcutHint') || 'to toggle'}
+          </p>
+        </div>
+      {/if}
+    </div>
+  {/if}
+{/if}
+
+<style>
+  :global(.chat-markdown pre.chat-code-block) {
+    background: hsl(var(--muted));
+    border-radius: 0.5rem;
+    padding: 0.75rem;
+    margin: 0.5rem 0;
+    overflow-x: auto;
+    font-size: 0.75rem;
+    line-height: 1.5;
+  }
+  :global(.chat-markdown code.chat-inline-code) {
+    background: hsl(var(--muted));
+    padding: 0.125rem 0.375rem;
+    border-radius: 0.25rem;
+    font-size: 0.8125em;
+    font-family: ui-monospace, monospace;
+  }
+  :global(.chat-markdown strong) {
+    font-weight: 600;
+  }
+</style>

package/src/components/Layout.svelte

@@ -5,6 +5,7 @@
   import Toast from './Toast.svelte';
   import Header from './Header.svelte';
   import CommandPalette from './CommandPalette.svelte';
+  import ChatDialog from './ChatDialog.svelte';
   import TooltipButton from './TooltipButton.svelte';
   import { t } from '@svadmin/core/i18n';
   import { getAuthProvider } from '@svadmin/core';
@@ -124,6 +125,7 @@
     </div>
   </div>
   <CommandPalette bind:open={commandOpen} />
+  <ChatDialog />
   <Toast />
 {/if}
 </div>

package/src/components/MarkdownRenderer.svelte

@@ -0,0 +1,140 @@
+<script lang="ts">
+  import { Marked } from 'marked';
+  import { markedHighlight } from 'marked-highlight';
+  import hljs from 'highlight.js';
+  import 'highlight.js/styles/github-dark.css'; // or your preferred theme
+  import DOMPurify from 'isomorphic-dompurify';
+  import { Check, Copy } from 'lucide-svelte';
+  import { Button } from './ui/button/index.js';
+
+  interface Props {
+    /** The raw markdown string to render */
+    content: string;
+    /** Whether to enable streaming/typing effect styling */
+    streaming?: boolean;
+    /** Custom class for the container */
+    class?: string;
+  }
+
+  let { content, streaming = false, class: className = '' }: Props = $props();
+
+  // Configure marked with syntax highlighting
+  const marked = new Marked(
+    markedHighlight({
+      langPrefix: 'hljs language-',
+      highlight(code, lang) {
+        const language = hljs.getLanguage(lang) ? lang : 'plaintext';
+        return hljs.highlight(code, { language }).value;
+      }
+    })
+  );
+
+  // Render HTML safely
+  const html = $derived(DOMPurify.sanitize(marked.parse(content || '') as string));
+
+  // Handle copy code blocks
+  let copiedBlock = $state<string | null>(null);
+
+  function handleCopy(event: MouseEvent) {
+    const target = event.target as HTMLElement;
+    const button = target.closest('.copy-btn');
+    if (!button) return;
+
+    const pre = button.closest('.code-block-wrapper')?.querySelector('pre');
+    if (!pre) return;
+
+    const code = pre.textContent || '';
+    navigator.clipboard.writeText(code);
+
+    const id = Math.random().toString(36);
+    copiedBlock = id;
+    button.setAttribute('data-copied-id', id);
+
+    setTimeout(() => {
+      if (copiedBlock === id) copiedBlock = null;
+    }, 2000);
+  }
+
+  // Inject copy buttons into the HTML after rendering
+  // We do this via action instead of raw string manipulation for safety
+  function enhanceCodeBlocks(node: HTMLElement, _: string) {
+    return {
+      update(newHtml: string) {
+        // Find all pre > code blocks that don't have wrappers yet
+        const pres = node.querySelectorAll('pre:not(.enhanced)');
+        pres.forEach(pre => {
+          pre.classList.add('enhanced');
+          const wrapper = document.createElement('div');
+          wrapper.className = 'code-block-wrapper group relative my-4 rounded-md bg-zinc-950';
+          
+          const header = document.createElement('div');
+          header.className = 'flex items-center justify-between px-4 py-2 text-xs text-zinc-400 border-b border-zinc-800';
+          
+          const lang = Array.from(pre.querySelector('code')?.classList || []).find(c => c.startsWith('language-'))?.replace('language-', '') || 'Code';
+          header.innerHTML = `
+            <span>${lang}</span>
+            <button class="copy-btn hover:text-white transition-colors flex items-center gap-1">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
+            </button>
+          `;
+          
+          pre.replaceWith(wrapper);
+          wrapper.appendChild(header);
+          
+          const scrollContainer = document.createElement('div');
+          scrollContainer.className = 'overflow-x-auto p-4';
+          scrollContainer.appendChild(pre);
+          wrapper.appendChild(scrollContainer);
+        });
+
+        // Add event listener for copy buttons
+        node.addEventListener('click', handleCopy);
+      },
+      destroy() {
+        node.removeEventListener('click', handleCopy);
+      }
+    };
+  }
+</script>
+
+<div 
+  class="prose prose-sm dark:prose-invert max-w-none break-words {className}"
+  class:streaming={streaming}
+  use:enhanceCodeBlocks={html}
+>
+  {@html html}
+</div>
+
+<style>
+  /* Base Markdown Styles */
+  :global(.prose) {
+    line-height: 1.6;
+  }
+  :global(.prose p) {
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+  }
+  
+  /* Streaming cursor effect */
+  .streaming > :global(*:last-child)::after {
+    content: '▋';
+    display: inline-block;
+    animation: blink 1s step-start infinite;
+    margin-left: 2px;
+    vertical-align: baseline;
+    color: currentColor;
+  }
+
+  @keyframes blink {
+    50% { opacity: 0; }
+  }
+
+  /* Handle copied state for dynamically injected buttons */
+  :global(.copy-btn[data-copied-id]) {
+    color: #10b981; /* Tailwind emerald-500 */
+  }
+  :global(.copy-btn[data-copied-id] svg) {
+    /* Swap to Check icon */
+    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%2310b981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>');
+  }
+</style>

package/src/components/ui/select/select.svelte

@@ -2,7 +2,9 @@
 	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLSelectAttributes } from "svelte/elements";
 
-	type Props = WithElementRef<HTMLSelectAttributes, HTMLSelectElement> & {
+	// Use HTMLElement instead of HTMLSelectElement to avoid TS error:
+	// HTMLSelectElement.remove() returns void, incompatible with HTMLElement's Element return
+	type Props = WithElementRef<HTMLSelectAttributes, HTMLElement> & {
 		placeholder?: string;
 	};
 

package/src/index.ts

@@ -46,7 +46,7 @@ export { default as StepsForm } from './components/StepsForm.svelte';
 export { default as InfiniteList } from './components/InfiniteList.svelte';
 export { default as ComboboxField } from './components/ComboboxField.svelte';
 export { default as PasswordInput } from './components/PasswordInput.svelte';
-
+export { default as ChatDialog } from './components/ChatDialog.svelte';
 // Field display components
 export { default as NumberField } from './components/fields/NumberField.svelte';
 export { default as DateField } from './components/fields/DateField.svelte';