@plures/design-dojo 0.5.2 → 0.7.1

package/dist/app/ChatView.svelte

@@ -0,0 +1,542 @@
+<!--
+  ChatView — Chat message list with markdown rendering and streaming indicator.
+
+  Modes:
+  - "bounded" (default): terminal-pane style with crisp bordered message boxes,
+    keyboard navigation (j/k / arrow keys between messages, Enter expand/collapse),
+    and smart scroll lock.
+  - "bubble": classic right/left chat bubble layout.
+
+  Shared features:
+  - Basic markdown: **bold**, *italic*, `inline code`, ```code block```
+  - Streaming indicator: animated bouncing dots on the last message
+  - Auto-scroll to bottom; scroll-lock on scroll-up
+  - "▼ N new" jump button when locked
+-->
+<script lang="ts">
+  import type { ChatViewMessage, ChatViewMode } from "./ChatView.types.js";
+
+  interface Props {
+    messages: ChatViewMessage[];
+    /**
+     * Layout mode.
+     * - "bounded": terminal-pane message boxes with keyboard navigation (default).
+     * - "bubble": classic chat bubble layout.
+     */
+    mode?: ChatViewMode;
+    /** Show author + timestamps in message headers. Default: true */
+    showTimestamps?: boolean;
+    /** Custom CSS class. */
+    class?: string;
+    /** Fired when user clicks the "jump to latest" indicator. */
+    onscrolltolatest?: () => void;
+  }
+
+  let {
+    messages,
+    mode = "bounded",
+    showTimestamps = true,
+    class: className = "",
+    onscrolltolatest,
+  }: Props = $props();
+
+  // ── Scroll state ──────────────────────────────────────────────────────────
+  let scrollEl: HTMLDivElement | undefined = $state();
+  let atBottom = $state(true);
+  let newCount = $state(0);
+  let prevLength = $state(0);
+
+  $effect(() => {
+    const len = messages.length;
+    if (len !== prevLength) {
+      const added = len - prevLength;
+      prevLength = len;
+      if (atBottom) {
+        newCount = 0;
+        scheduleScrollToBottom();
+      } else if (added > 0) {
+        newCount += added;
+      }
+    }
+  });
+
+  function scheduleScrollToBottom() {
+    if (typeof requestAnimationFrame !== "undefined") {
+      requestAnimationFrame(() => scrollToBottom());
+    }
+  }
+
+  function scrollToBottom() {
+    if (scrollEl) scrollEl.scrollTop = scrollEl.scrollHeight;
+  }
+
+  function handleScrollToLatest() {
+    atBottom = true;
+    newCount = 0;
+    scrollToBottom();
+    onscrolltolatest?.();
+  }
+
+  function handleScroll() {
+    if (!scrollEl) return;
+    const { scrollTop, scrollHeight, clientHeight } = scrollEl;
+    const wasAtBottom = atBottom;
+    atBottom = scrollHeight - scrollTop - clientHeight < 8;
+    if (atBottom && !wasAtBottom) newCount = 0;
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (!scrollEl) return;
+    const h = scrollEl.clientHeight;
+    switch (e.key) {
+      case "PageUp":   e.preventDefault(); scrollEl.scrollBy({ top: -h, behavior: "smooth" }); break;
+      case "PageDown": e.preventDefault(); scrollEl.scrollBy({ top: h, behavior: "smooth" }); break;
+      case "Home":     e.preventDefault(); scrollEl.scrollTo({ top: 0, behavior: "smooth" }); break;
+      case "End":      e.preventDefault(); scrollToBottom(); break;
+    }
+  }
+
+  // ── Bounded-mode state ────────────────────────────────────────────────────
+  /** Index of the currently keyboard-focused message (-1 = none). */
+  let focusedIndex = $state(-1);
+  /** Set of message IDs that are manually collapsed in bounded mode. */
+  let collapsedIds = $state(new Set<string>());
+
+  function clampIndex(i: number): number {
+    return Math.max(0, Math.min(messages.length - 1, i));
+  }
+
+  function focusMessage(i: number) {
+    focusedIndex = clampIndex(i);
+    // Scroll focused message row into view
+    if (scrollEl) {
+      const row = scrollEl.querySelector<HTMLElement>(`[data-msg-idx="${focusedIndex}"]`);
+      row?.scrollIntoView({ block: "nearest", behavior: "smooth" });
+    }
+  }
+
+  function handleBoundedKeydown(e: KeyboardEvent) {
+    if (!scrollEl) return;
+    const h = scrollEl.clientHeight;
+    switch (e.key) {
+      case "j":
+      case "ArrowDown":
+        e.preventDefault();
+        if (focusedIndex < 0) focusMessage(0);
+        else focusMessage(focusedIndex + 1);
+        break;
+      case "k":
+      case "ArrowUp":
+        e.preventDefault();
+        if (focusedIndex < 0) focusMessage(messages.length - 1);
+        else focusMessage(focusedIndex - 1);
+        break;
+      case "Enter": {
+        e.preventDefault();
+        if (focusedIndex >= 0 && focusedIndex < messages.length) {
+          const id = messages[focusedIndex].id;
+          const next = new Set(collapsedIds);
+          if (next.has(id)) next.delete(id);
+          else next.add(id);
+          collapsedIds = next;
+        }
+        break;
+      }
+      case "PageUp":   e.preventDefault(); scrollEl.scrollBy({ top: -h, behavior: "smooth" }); break;
+      case "PageDown": e.preventDefault(); scrollEl.scrollBy({ top: h, behavior: "smooth" }); break;
+      case "Home":     e.preventDefault(); scrollEl.scrollTo({ top: 0, behavior: "smooth" }); focusMessage(0); break;
+      case "End":      e.preventDefault(); scrollToBottom(); focusMessage(messages.length - 1); break;
+    }
+  }
+
+  // ── Markdown renderer ─────────────────────────────────────────────────────
+  // Safety: escape() is called on raw text BEFORE any regex replacements, so
+  // capture groups ($1 etc.) always contain already-escaped HTML entities.
+  // Injected HTML is limited to the known-safe tags below.
+  function escape(s: string): string {
+    return s
+      .replace(/&/g, "&amp;")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;");
+  }
+
+  function renderMarkdown(text: string): string {
+    // Split into code-block segments (captured) and normal segments
+    const parts = text.split(/(```[\s\S]*?```)/g);
+    return parts
+      .map((part, i) => {
+        if (i % 2 === 1) {
+          // Code block: strip fence markers, escape, wrap
+          const inner = escape(part.slice(3, -3).replace(/^\n/, "").replace(/\n$/, ""));
+          return `<pre class="md-pre"><code>${inner}</code></pre>`;
+        }
+        // Normal text: escape then apply inline markdown
+        let s = escape(part);
+        s = s.replace(/`([^`]+)`/g, '<code class="md-code">$1</code>');
+        s = s.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>");
+        s = s.replace(/\*([^*\n]+)\*/g, "<em>$1</em>");
+        s = s.replace(/\n/g, "<br>");
+        return s;
+      })
+      .join("");
+  }
+
+  // ── Helpers ───────────────────────────────────────────────────────────────
+  function formatTime(date: Date): string {
+    return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+  }
+</script>
+
+<div class="chat-view {className}" role="log" aria-live="polite" aria-label="Chat messages">
+  <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+  <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+  <div
+    class="chat-view__scroll"
+    bind:this={scrollEl}
+    tabindex="0"
+    role="region"
+    aria-label="Scrollable message history"
+    onscroll={handleScroll}
+    onkeydown={mode === "bounded" ? handleBoundedKeydown : handleKeydown}
+  >
+    <div class="chat-view__messages">
+      {#each messages as msg, i (msg.id)}
+        {#if mode === "bounded"}
+          <!-- ── Bounded mode: terminal-pane message box ── -->
+          <div
+            class="chat-view__box"
+            class:chat-view__box--user={msg.type === "user"}
+            class:chat-view__box--agent={msg.type === "agent" || !msg.type}
+            class:chat-view__box--system={msg.type === "system"}
+            class:chat-view__box--focused={focusedIndex === i}
+            role="article"
+            data-msg-idx={i}
+            onclick={() => { focusedIndex = i; }}
+            onkeydown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); focusedIndex = i; } }}
+          >
+            {#if msg.type === "system"}
+              <div class="chat-view__system">{msg.content}</div>
+            {:else}
+              <div class="chat-view__box-header">
+                <span class="chat-view__author">{msg.author}</span>
+                {#if showTimestamps}
+                  <span class="chat-view__time">{formatTime(msg.timestamp)}</span>
+                {/if}
+                {#if collapsedIds.has(msg.id)}
+                  <span class="chat-view__collapse-hint" aria-hidden="true">▸ collapsed</span>
+                {/if}
+              </div>
+              {#if msg.streaming}
+                <div class="chat-view__streaming" aria-label="Generating response">
+                  <span class="chat-view__dot"></span>
+                  <span class="chat-view__dot"></span>
+                  <span class="chat-view__dot"></span>
+                </div>
+              {:else if collapsedIds.has(msg.id)}
+                <!-- collapsed: show nothing below header -->
+              {:else}
+                <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+                <div class="chat-view__content">{@html renderMarkdown(msg.content)}</div>
+              {/if}
+            {/if}
+          </div>
+        {:else}
+          <!-- ── Bubble mode: original layout ── -->
+          <div
+            class="chat-view__row"
+            class:chat-view__row--user={msg.type === "user"}
+            class:chat-view__row--agent={msg.type === "agent" || !msg.type}
+            class:chat-view__row--system={msg.type === "system"}
+          >
+            {#if msg.type === "system"}
+              <div class="chat-view__system">{msg.content}</div>
+            {:else}
+              <div
+                class="chat-view__bubble"
+                class:chat-view__bubble--user={msg.type === "user"}
+                class:chat-view__bubble--agent={msg.type === "agent" || !msg.type}
+              >
+                <div class="chat-view__bubble-header">
+                  <span class="chat-view__author">{msg.author}</span>
+                  {#if showTimestamps}
+                    <span class="chat-view__time">{formatTime(msg.timestamp)}</span>
+                  {/if}
+                </div>
+                {#if msg.streaming}
+                  <div class="chat-view__streaming" aria-label="Generating response">
+                    <span class="chat-view__dot"></span>
+                    <span class="chat-view__dot"></span>
+                    <span class="chat-view__dot"></span>
+                  </div>
+                {:else}
+                  <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+                  <div class="chat-view__content">{@html renderMarkdown(msg.content)}</div>
+                {/if}
+              </div>
+            {/if}
+          </div>
+        {/if}
+      {/each}
+      <div class="chat-view__sentinel" aria-hidden="true"></div>
+    </div>
+  </div>
+
+  {#if newCount > 0 && !atBottom}
+    <button
+      class="chat-view__jump"
+      onclick={handleScrollToLatest}
+      aria-live="polite"
+      aria-label="Jump to latest messages"
+    >
+      ▼ {newCount} new {newCount === 1 ? "message" : "messages"}
+    </button>
+  {/if}
+</div>
+
+<style>
+  .chat-view {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    height: 100%;
+  }
+
+  .chat-view__scroll {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    scroll-behavior: smooth;
+    outline: none;
+    padding: var(--space-4, 16px);
+    display: flex;
+    flex-direction: column;
+  }
+
+  .chat-view__messages {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3, 12px);
+    flex: 1;
+    justify-content: flex-end;
+  }
+
+  /* ── Row alignment ── */
+  .chat-view__row {
+    display: flex;
+  }
+
+  .chat-view__row--user  { justify-content: flex-end; }
+  .chat-view__row--agent { justify-content: flex-start; }
+  .chat-view__row--system { justify-content: center; }
+
+  /* ── Bounded-mode message boxes ── */
+  .chat-view__box {
+    border: 1px solid var(--color-border, #2a2a2a);
+    border-radius: var(--radius-md, 8px);
+    overflow: hidden;
+    background: var(--surface-1, #141414);
+    cursor: default;
+  }
+
+  .chat-view__box--user {
+    border-color: var(--color-accent, #6366f1);
+    background: color-mix(in srgb, var(--color-accent, #6366f1) 8%, var(--surface-1, #141414));
+  }
+
+  .chat-view__box--system {
+    opacity: 0.7;
+  }
+
+  .chat-view__box--focused {
+    outline: 2px solid var(--color-accent, #6366f1);
+    outline-offset: -1px;
+  }
+
+  .chat-view__box-header {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2, 8px);
+    padding: var(--space-2, 6px) var(--space-3, 12px);
+    border-bottom: 1px solid var(--color-border, #2a2a2a);
+    background: color-mix(in srgb, var(--color-border, #2a2a2a) 30%, transparent);
+  }
+
+  .chat-view__box--user .chat-view__box-header {
+    border-bottom-color: color-mix(in srgb, var(--color-accent, #6366f1) 40%, transparent);
+  }
+
+  .chat-view__collapse-hint {
+    margin-left: auto;
+    font-size: 10px;
+    color: var(--color-text-muted, #888);
+    font-family: var(--font-mono, monospace);
+    opacity: 0.7;
+  }
+
+  /* ── Bubbles ── */
+  .chat-view__bubble {
+    max-width: 75%;
+    border-radius: var(--radius-lg, 16px);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .chat-view__bubble--user {
+    background: var(--color-accent, #6366f1);
+    border-bottom-right-radius: var(--radius-sm, 6px);
+  }
+
+  .chat-view__bubble--agent {
+    background: var(--surface-2, #1e1e1e);
+    border: 1px solid var(--color-border, #2a2a2a);
+    border-bottom-left-radius: var(--radius-sm, 6px);
+  }
+
+  .chat-view__bubble-header {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2, 8px);
+    padding: var(--space-2, 8px) var(--space-3, 12px) var(--space-1, 4px);
+  }
+
+  .chat-view__author {
+    font-size: var(--text-xs, 12px);
+    font-weight: 600;
+    color: var(--color-text, #e8e8e8);
+    opacity: 0.75;
+  }
+
+  .chat-view__box .chat-view__author {
+    color: var(--color-accent, #6366f1);
+    opacity: 1;
+  }
+
+  .chat-view__bubble--user .chat-view__author {
+    color: rgba(255, 255, 255, 0.85);
+    opacity: 1;
+  }
+
+  .chat-view__time {
+    font-size: 11px;
+    font-family: var(--font-mono, monospace);
+    color: var(--color-text-muted, #888);
+    opacity: 0.6;
+  }
+
+  .chat-view__bubble--user .chat-view__time {
+    color: rgba(255, 255, 255, 0.65);
+  }
+
+  /* ── Content ── */
+  .chat-view__content {
+    padding: var(--space-2, 8px) var(--space-3, 12px) var(--space-3, 12px);
+    font-size: var(--text-sm, 14px);
+    line-height: var(--leading-relaxed, 1.625);
+    word-break: break-word;
+    color: var(--color-text, #e8e8e8);
+  }
+
+  .chat-view__bubble--user .chat-view__content {
+    color: white;
+  }
+
+  /* Markdown elements */
+  .chat-view__content :global(strong) { font-weight: 700; }
+  .chat-view__content :global(em)     { font-style: italic; }
+
+  .chat-view__content :global(code.md-code) {
+    background: rgba(0, 0, 0, 0.25);
+    border-radius: 4px;
+    padding: 0.1em 0.35em;
+    font-family: var(--font-mono, monospace);
+    font-size: 0.88em;
+  }
+
+  .chat-view__content :global(pre.md-pre) {
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: var(--radius-sm, 6px);
+    padding: var(--space-3, 12px);
+    overflow-x: auto;
+    margin: var(--space-2, 8px) 0 0;
+    font-family: var(--font-mono, monospace);
+    font-size: 0.85em;
+    line-height: 1.5;
+  }
+
+  .chat-view__content :global(pre.md-pre code) {
+    background: none;
+    padding: 0;
+    border-radius: 0;
+    font-size: inherit;
+  }
+
+  /* ── System message ── */
+  .chat-view__system {
+    font-size: var(--text-xs, 12px);
+    color: var(--color-text-subtle, #555);
+    font-style: italic;
+    padding: 0 var(--space-3, 12px);
+  }
+
+  .chat-view__box--system .chat-view__system {
+    padding: var(--space-2, 8px) var(--space-3, 12px);
+  }
+
+  /* ── Streaming dots ── */
+  .chat-view__streaming {
+    padding: var(--space-3, 12px);
+    display: flex;
+    gap: 4px;
+    align-items: center;
+  }
+
+  .chat-view__dot {
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: var(--color-text-muted, #888);
+    animation: chat-dot-bounce 1.2s ease-in-out infinite;
+  }
+
+  .chat-view__dot:nth-child(2) { animation-delay: 0.2s; }
+  .chat-view__dot:nth-child(3) { animation-delay: 0.4s; }
+
+  @keyframes chat-dot-bounce {
+    0%, 80%, 100% { transform: translateY(0);    opacity: 0.4; }
+    40%           { transform: translateY(-6px); opacity: 1;   }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .chat-view__dot { animation: none; opacity: 0.7; }
+  }
+
+  /* ── Sentinel + jump button ── */
+  .chat-view__sentinel {
+    height: 1px;
+    flex-shrink: 0;
+  }
+
+  .chat-view__jump {
+    position: absolute;
+    bottom: var(--space-4, 16px);
+    left: 50%;
+    transform: translateX(-50%);
+    background: var(--color-accent, #6366f1);
+    color: white;
+    border: none;
+    border-radius: var(--radius-full, 9999px);
+    padding: 6px 16px;
+    font-size: var(--text-sm, 13px);
+    font-weight: 600;
+    cursor: pointer;
+    white-space: nowrap;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+    z-index: 10;
+    transition: opacity 0.15s;
+  }
+
+  .chat-view__jump:hover { opacity: 0.85; }
+</style>

package/dist/app/ChatView.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { ChatViewMessage, ChatViewMode } from "./ChatView.types.js";
+interface Props {
+    messages: ChatViewMessage[];
+    /**
+     * Layout mode.
+     * - "bounded": terminal-pane message boxes with keyboard navigation (default).
+     * - "bubble": classic chat bubble layout.
+     */
+    mode?: ChatViewMode;
+    /** Show author + timestamps in message headers. Default: true */
+    showTimestamps?: boolean;
+    /** Custom CSS class. */
+    class?: string;
+    /** Fired when user clicks the "jump to latest" indicator. */
+    onscrolltolatest?: () => void;
+}
+declare const ChatView: import("svelte").Component<Props, {}, "">;
+type ChatView = ReturnType<typeof ChatView>;
+export default ChatView;

package/dist/app/ChatView.types.js

@@ -0,0 +1 @@
+export {};