@flowdrop/flowdrop 1.12.0 → 1.13.0

package/dist/components/playground/MessageBubble.svelte.d.ts

@@ -1,21 +1,13 @@
-import type { PlaygroundMessage } from '../../types/playground.js';
-/**
- * Component props
- */
+import { type PlaygroundMessage } from '../../types/playground.js';
 interface Props {
-    /** The message to display */
     message: PlaygroundMessage;
-    /** Whether to show the timestamp */
     showTimestamp?: boolean;
-    /** Whether this is the last message (affects styling) */
     isLast?: boolean;
-    /** Whether to render markdown content */
     enableMarkdown?: boolean;
     /**
      * Use compact display mode for system messages.
-     * When true, system messages are rendered as minimal inline text
-     * instead of full chat bubbles to reduce visual noise.
-     * @default true
+     * When true (default), system messages without an explicit `display`
+     * default to the 'notice' layout instead of 'bubble'.
      */
     compactSystemMessages?: boolean;
 }

package/dist/components/playground/MessageCard.svelte

@@ -0,0 +1,106 @@
+<!--
+  MessageCard — vertical card layout: hierarchy (top) · body (middle) · tags (bottom).
+  Picks up shared markdown typography via <MessageMarkdown>.
+-->
+
+<script lang="ts">
+  import type { PlaygroundMessage } from '../../types/playground.js';
+  import HierarchyTrail from './HierarchyTrail.svelte';
+  import MessageTagStrip from './MessageTagStrip.svelte';
+  import MessageMarkdown from './MessageMarkdown.svelte';
+  import { formatTimestamp, getRoleLabel } from './messageDisplay.js';
+  import { m } from '../../messages/index.js';
+
+  interface Props {
+    message: PlaygroundMessage;
+    showTimestamp?: boolean;
+    isLast?: boolean;
+    enableMarkdown?: boolean;
+  }
+
+  let { message, showTimestamp = true, isLast = false, enableMarkdown = true }: Props = $props();
+
+  const level = $derived(message.metadata?.level);
+  const hierarchy = $derived(message.hierarchy ?? []);
+  const tags = $derived(message.tags ?? []);
+  const roleLabel = $derived(getRoleLabel(message, m().playground.roles));
+  // Logs render as plain text; everything else respects enableMarkdown.
+  const markdown = $derived(enableMarkdown && message.role !== 'log');
+</script>
+
+<article
+  class="message-card"
+  class:message-card--last={isLast}
+  class:message-card--error={level === 'error'}
+  class:message-card--warning={level === 'warning'}
+  aria-label={roleLabel}
+>
+  {#if hierarchy.length > 0 || showTimestamp}
+    <header class="message-card__header">
+      <HierarchyTrail items={hierarchy} />
+      {#if showTimestamp}
+        <time
+          class="message-card__timestamp"
+          datetime={message.timestamp}
+          aria-label="sent at {formatTimestamp(message.timestamp)}"
+        >{formatTimestamp(message.timestamp)}</time>
+      {/if}
+    </header>
+  {/if}
+  <MessageMarkdown content={message.content} enableMarkdown={markdown} />
+  <MessageTagStrip {tags} />
+</article>
+
+<style>
+  .message-card {
+    display: flex;
+    flex-direction: column;
+    gap: var(--fd-space-xs);
+    margin: var(--fd-space-3xs) var(--fd-space-xl);
+    padding: var(--fd-space-sm) var(--fd-space-md);
+    border-radius: var(--fd-radius-lg);
+    background-color: var(--fd-card);
+    border: 1px solid var(--fd-border);
+    color: var(--fd-card-foreground);
+    font-size: var(--fd-text-sm);
+    line-height: var(--fd-leading-normal);
+    /* fd-fade-in + reduced-motion guard live in MessageStream.svelte */
+    animation: fd-fade-in 0.18s ease-out;
+  }
+
+  .message-card--last {
+    margin-bottom: var(--fd-space-xl);
+  }
+
+  .message-card--error {
+    border-color: var(--fd-error);
+    background-color: color-mix(in srgb, var(--fd-error) 6%, var(--fd-card));
+  }
+
+  .message-card--warning {
+    border-color: var(--fd-warning);
+    background-color: color-mix(in srgb, var(--fd-warning) 6%, var(--fd-card));
+  }
+
+  .message-card__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--fd-space-sm);
+    min-width: 0;
+  }
+
+  .message-card__timestamp {
+    flex-shrink: 0;
+    font-size: 0.625rem;
+    font-family: var(--fd-font-mono);
+    color: var(--fd-muted-foreground);
+  }
+
+  @media (max-width: 640px) {
+    .message-card {
+      margin: var(--fd-space-3xs) var(--fd-space-md);
+      padding: var(--fd-space-xs) var(--fd-space-sm);
+    }
+  }
+</style>

package/dist/components/playground/MessageCard.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { PlaygroundMessage } from '../../types/playground.js';
+interface Props {
+    message: PlaygroundMessage;
+    showTimestamp?: boolean;
+    isLast?: boolean;
+    enableMarkdown?: boolean;
+}
+declare const MessageCard: import("svelte").Component<Props, {}, "">;
+type MessageCard = ReturnType<typeof MessageCard>;
+export default MessageCard;

package/dist/components/playground/MessageMarkdown.svelte

@@ -0,0 +1,160 @@
+<!--
+  MessageMarkdown Component
+
+  Renders message content. Wraps marked + sanitizeHtml and applies the
+  shared markdown typography. Used by ChatBubble (assistant/system/user)
+  and MessageCard so they share one set of typography rules.
+
+  Consumers scope overrides via :global(.message-markdown ...) from their
+  own component CSS — see ChatBubble's user-bubble rules.
+
+  When `enableMarkdown` is false (or the role is 'log'), the content is
+  rendered as plain text.
+-->
+
+<script lang="ts">
+  import { marked } from 'marked';
+  import { sanitizeHtml } from '../../utils/sanitize.js';
+
+  interface Props {
+    content: string;
+    enableMarkdown?: boolean;
+  }
+
+  let { content, enableMarkdown = true }: Props = $props();
+
+  const rendered = $derived(
+    enableMarkdown ? sanitizeHtml(marked.parse(content || '') as string) : null
+  );
+</script>
+
+<div class="message-markdown">
+  {#if rendered !== null}
+    <!-- Markdown sanitized via DOMPurify in sanitizeHtml. -->
+    <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+    {@html rendered}
+  {:else}
+    {content}
+  {/if}
+</div>
+
+<style>
+  .message-markdown {
+    line-height: var(--fd-leading-relaxed);
+    word-break: break-word;
+  }
+
+  .message-markdown :global(p) {
+    margin: 0 0 var(--fd-space-md) 0;
+  }
+
+  .message-markdown :global(p:last-child) {
+    margin-bottom: 0;
+  }
+
+  .message-markdown :global(h1),
+  .message-markdown :global(h2),
+  .message-markdown :global(h3),
+  .message-markdown :global(h4),
+  .message-markdown :global(h5),
+  .message-markdown :global(h6) {
+    margin: var(--fd-space-xl) 0 var(--fd-space-xs) 0;
+    font-weight: 600;
+    line-height: 1.3;
+  }
+
+  .message-markdown :global(h1:first-child),
+  .message-markdown :global(h2:first-child),
+  .message-markdown :global(h3:first-child),
+  .message-markdown :global(h4:first-child),
+  .message-markdown :global(h5:first-child),
+  .message-markdown :global(h6:first-child) {
+    margin-top: 0;
+  }
+
+  .message-markdown :global(h1) { font-size: var(--fd-text-xl); }
+  .message-markdown :global(h2) { font-size: var(--fd-text-lg); }
+  .message-markdown :global(h3) { font-size: var(--fd-text-base); }
+
+  .message-markdown :global(ul),
+  .message-markdown :global(ol) {
+    margin: var(--fd-space-xs) 0;
+    padding-left: var(--fd-space-3xl);
+  }
+
+  .message-markdown :global(li) {
+    margin: var(--fd-space-3xs) 0;
+  }
+
+  .message-markdown :global(code) {
+    background-color: var(--fd-secondary);
+    padding: 0.125rem var(--fd-space-3xs);
+    border-radius: var(--fd-radius-sm);
+    font-family: var(--fd-font-mono);
+    font-size: 0.875em;
+  }
+
+  .message-markdown :global(pre) {
+    background-color: var(--fd-foreground);
+    color: var(--fd-background);
+    padding: var(--fd-space-md) var(--fd-space-xl);
+    border-radius: var(--fd-radius-lg);
+    overflow-x: auto;
+    margin: var(--fd-space-md) 0;
+    font-size: var(--fd-text-sm);
+    line-height: var(--fd-leading-normal);
+  }
+
+  .message-markdown :global(pre code) {
+    background-color: transparent;
+    padding: 0;
+    border-radius: 0;
+    color: inherit;
+    font-size: inherit;
+  }
+
+  .message-markdown :global(blockquote) {
+    border-left: 3px solid var(--fd-border-strong);
+    padding-left: var(--fd-space-xl);
+    margin: var(--fd-space-md) 0;
+    color: var(--fd-muted-foreground);
+    font-style: italic;
+  }
+
+  .message-markdown :global(a) {
+    color: var(--fd-primary);
+    text-decoration: none;
+  }
+
+  .message-markdown :global(a:hover) {
+    text-decoration: underline;
+  }
+
+  .message-markdown :global(hr) {
+    border: none;
+    border-top: 1px solid var(--fd-border);
+    margin: var(--fd-space-xl) 0;
+  }
+
+  .message-markdown :global(table) {
+    border-collapse: collapse;
+    width: 100%;
+    margin: var(--fd-space-md) 0;
+    font-size: var(--fd-text-sm);
+  }
+
+  .message-markdown :global(th),
+  .message-markdown :global(td) {
+    border: 1px solid var(--fd-border);
+    padding: var(--fd-space-xs) var(--fd-space-md);
+    text-align: left;
+  }
+
+  .message-markdown :global(th) {
+    background-color: var(--fd-muted);
+    font-weight: 600;
+  }
+
+  .message-markdown :global(strong) { font-weight: 600; }
+  .message-markdown :global(em) { font-style: italic; }
+</style>

package/dist/components/playground/MessageMarkdown.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    content: string;
+    enableMarkdown?: boolean;
+}
+declare const MessageMarkdown: import("svelte").Component<Props, {}, "">;
+type MessageMarkdown = ReturnType<typeof MessageMarkdown>;
+export default MessageMarkdown;

package/dist/components/playground/MessageNotice.svelte

@@ -0,0 +1,120 @@
+<!--
+  MessageNotice — compact centered inline notice for system messages.
+  No role="status" — the parent <div role="log"> already announces additions.
+-->
+
+<script lang="ts">
+  import Icon from '@iconify/svelte';
+  import type { PlaygroundMessage } from '../../types/playground.js';
+  import HierarchyTrail from './HierarchyTrail.svelte';
+  import MessageTagStrip from './MessageTagStrip.svelte';
+  import { formatTimestamp, getLogLevelIcon } from './messageDisplay.js';
+
+  interface Props {
+    message: PlaygroundMessage;
+    showTimestamp?: boolean;
+    isLast?: boolean;
+  }
+
+  let { message, showTimestamp = true, isLast = false }: Props = $props();
+
+  const level = $derived(message.metadata?.level);
+  const hierarchy = $derived(message.hierarchy ?? []);
+  const tags = $derived(message.tags ?? []);
+</script>
+
+<div
+  class="system-notice"
+  class:system-notice--last={isLast}
+  class:system-notice--warning={level === 'warning'}
+  class:system-notice--error={level === 'error'}
+  class:system-notice--debug={level === 'debug'}
+>
+  <Icon icon={getLogLevelIcon(level)} class="system-notice__icon" aria-hidden="true" />
+  {#if message.metadata?.source}
+    <span class="system-notice__source">{message.metadata.source}</span>
+  {/if}
+  <HierarchyTrail items={hierarchy} />
+  <span class="system-notice__text">{message.content}</span>
+  <MessageTagStrip {tags} />
+  {#if showTimestamp}
+    <time
+      class="system-notice__timestamp"
+      datetime={message.timestamp}
+      aria-label="sent at {formatTimestamp(message.timestamp)}"
+    >{formatTimestamp(message.timestamp)}</time>
+  {/if}
+</div>
+
+<style>
+  .system-notice {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: var(--fd-space-3xs);
+    padding: var(--fd-space-3xs) var(--fd-space-md);
+    margin: var(--fd-space-3xs) 0;
+    font-size: var(--fd-text-xs);
+    color: var(--fd-muted-foreground);
+    text-align: center;
+    min-width: 0;
+  }
+
+  .system-notice--last {
+    margin-bottom: var(--fd-space-md);
+  }
+
+  .system-notice :global(.system-notice__icon) {
+    flex-shrink: 0;
+    font-size: var(--fd-text-sm);
+    color: var(--fd-border-strong);
+  }
+
+  .system-notice__source {
+    flex-shrink: 0;
+    font-size: 0.6rem;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--fd-muted-foreground);
+    background-color: var(--fd-muted);
+    border: 1px solid var(--fd-border);
+    border-radius: var(--fd-radius-sm);
+    padding: 0 0.25rem;
+    line-height: 1.4;
+  }
+
+  .system-notice__text {
+    min-width: 0;
+    overflow-wrap: anywhere;
+    line-height: var(--fd-leading-tight);
+  }
+
+  .system-notice--warning,
+  .system-notice--warning :global(.system-notice__icon) {
+    color: var(--fd-warning);
+  }
+
+  .system-notice--error,
+  .system-notice--error :global(.system-notice__icon) {
+    color: var(--fd-error);
+  }
+
+  .system-notice--debug {
+    color: var(--fd-border-strong);
+    opacity: 0.6;
+  }
+
+  .system-notice__timestamp {
+    flex-shrink: 0;
+    font-size: 0.625rem;
+    color: var(--fd-border-strong);
+    font-family: var(--fd-font-mono);
+  }
+
+  @media (max-width: 640px) {
+    .system-notice__timestamp {
+      display: none;
+    }
+  }
+</style>

package/dist/components/playground/MessageNotice.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { PlaygroundMessage } from '../../types/playground.js';
+interface Props {
+    message: PlaygroundMessage;
+    showTimestamp?: boolean;
+    isLast?: boolean;
+}
+declare const MessageNotice: import("svelte").Component<Props, {}, "">;
+type MessageNotice = ReturnType<typeof MessageNotice>;
+export default MessageNotice;

package/dist/components/playground/MessageStream.svelte

@@ -189,6 +189,8 @@
             {interrupt}
             showTimestamp={showTimestamps}
             onResolved={onInterruptResolved}
+            hierarchy={message.hierarchy}
+            tags={message.tags}
           />
         {/if}
       {:else}
@@ -221,6 +223,88 @@
     min-height: 0;
     overflow-y: auto;
     padding: var(--fd-space-3xl);
+
+    /* Establish a containment context so message rows can adapt to the
+       stream's actual width (not the viewport's). The matching @container
+       queries (for .log-row) live below in the same <style> block, so
+       renaming the container only requires editing this file. */
+    container-type: inline-size;
+    container-name: fd-message-stream;
+  }
+
+  /* Shared fade-in for newly-appended message rows. `-global-` so
+     ChatBubble.svelte / MessageCard.svelte can reference it without
+     redeclaring. Honour reduced-motion in the same place. */
+  @keyframes -global-fd-fade-in {
+    from {
+      opacity: 0;
+      transform: translateY(6px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :global(.message-bubble),
+    :global(.message-card) {
+      animation: none;
+    }
+  }
+
+  /* Container-query reshaping for log rows. Lives next to the
+     container-name declaration so the coupling is local — selectors are
+     :global because .log-row is a sibling component's class.
+
+       Tier 1 (≤720px): two rows — level/body, then tags/timestamp.
+       Tier 2 (≤480px): collapse further; body forces internal line break. */
+  @container fd-message-stream (max-width: 720px) {
+    :global(.log-row) {
+      display: grid;
+      grid-template-columns: auto 1fr auto;
+      grid-template-areas:
+        "level body      body"
+        ".     tags      timestamp";
+      align-items: baseline;
+      row-gap: var(--fd-space-2xs);
+      column-gap: var(--fd-space-sm);
+    }
+    :global(.log-row__level) { grid-area: level; }
+    :global(.log-row__body) { grid-area: body; min-width: 0; }
+    :global(.log-row__tags) { grid-area: tags; justify-self: start; }
+    :global(.log-row__timestamp) { grid-area: timestamp; justify-self: end; }
+  }
+
+  @container fd-message-stream (max-width: 480px) {
+    :global(.log-row) {
+      grid-template-columns: auto 1fr;
+      grid-template-areas:
+        "level body"
+        ".     tags";
+    }
+    :global(.log-row__text) {
+      flex-basis: 100%;
+      min-width: 0;
+    }
+    :global(.log-row__timestamp) {
+      display: none;
+    }
+    /* Drop the source + node chips: source is implied by the level
+       colour, node duplicates the hierarchy trail's last entry. Keeping
+       them at this width forced each chip onto its own line and made
+       log rows 5–6 lines tall. */
+    :global(.log-row__source),
+    :global(.log-row__node) {
+      display: none;
+    }
+    /* Reclaim horizontal room by tightening the row's own padding —
+       can't shrink the stream's padding from inside its own
+       container query. */
+    :global(.log-row) {
+      padding-left: var(--fd-space-xs);
+      padding-right: var(--fd-space-xs);
+    }
   }
 
   .message-stream__typing {
@@ -277,7 +361,7 @@
 
   @media (max-width: 640px) {
     .message-stream {
-      padding: var(--fd-space-xl);
+      padding: var(--fd-space-md) 0;
     }
   }
 </style>

package/dist/components/playground/MessageTagChip.svelte

@@ -0,0 +1,99 @@
+<!--
+  MessageTagChip Component
+
+  Renders a single server-emitted MessageTag as a compact chip. Semantic
+  color comes from tag.color, visual emphasis from tag.variant. Used by
+  MessageBubble and InterruptBubble.
+
+  Styling: a single base rule reads from CSS custom properties; one rule
+  per color sets --chip-c, one rule per variant sets bg/fg/border in terms
+  of --chip-c. Adding a color is one line.
+-->
+
+<script lang="ts">
+  import Icon from '@iconify/svelte';
+  import type { MessageTag } from '../../types/playground.js';
+
+  interface Props {
+    tag: MessageTag;
+  }
+
+  let { tag }: Props = $props();
+
+  const color = $derived(tag.color ?? 'muted');
+  const variant = $derived(tag.variant ?? 'subtle');
+</script>
+
+<span
+  class="message-tag-chip"
+  data-color={color}
+  data-variant={variant}
+  aria-label={tag.type ? `${tag.type}: ${tag.label}` : undefined}
+>
+  {#if tag.icon}
+    <Icon icon={tag.icon} class="message-tag-chip__icon" aria-hidden="true" />
+  {/if}
+  <span class="message-tag-chip__label">{tag.label}</span>
+</span>
+
+<style>
+  .message-tag-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--fd-space-3xs);
+    padding: 0 var(--fd-space-3xs);
+    border-radius: var(--fd-radius-sm);
+    font-family: var(--fd-font-mono);
+    font-size: var(--fd-text-2xs);
+    line-height: 1.4;
+    white-space: nowrap;
+    min-width: 0;
+    max-width: 100%;
+    background-color: var(--chip-bg);
+    color: var(--chip-fg);
+    border: 1px solid var(--chip-border, transparent);
+  }
+
+  .message-tag-chip__label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .message-tag-chip :global(.message-tag-chip__icon) {
+    flex-shrink: 0;
+    font-size: 0.875em;
+    opacity: 0.8;
+  }
+
+  /* Color hooks — one line per color. To add a color, add a row here. */
+  .message-tag-chip[data-color='muted']   { --chip-c: var(--fd-muted-foreground); --chip-c-on: var(--fd-background); }
+  .message-tag-chip[data-color='primary'] { --chip-c: var(--fd-primary);          --chip-c-on: var(--fd-primary-foreground); }
+  .message-tag-chip[data-color='success'] { --chip-c: var(--fd-success, oklch(55% 0.15 145)); --chip-c-on: white; }
+  .message-tag-chip[data-color='warning'] { --chip-c: var(--fd-warning);          --chip-c-on: var(--fd-background); }
+  .message-tag-chip[data-color='error']   { --chip-c: var(--fd-error);            --chip-c-on: white; }
+  .message-tag-chip[data-color='info']    { --chip-c: var(--fd-info);             --chip-c-on: var(--fd-background); }
+
+  /* Variants — derive bg/fg/border from --chip-c. */
+  .message-tag-chip[data-variant='subtle'] {
+    --chip-bg: color-mix(in srgb, var(--chip-c) 14%, transparent);
+    --chip-fg: var(--chip-c);
+  }
+  .message-tag-chip[data-variant='subtle'][data-color='muted'] {
+    /* Muted is the only color we render against the design's --fd-muted
+       surface for legibility; the color-mix path would lose contrast. */
+    --chip-bg: var(--fd-muted);
+    --chip-fg: var(--fd-muted-foreground);
+  }
+  .message-tag-chip[data-variant='solid'] {
+    --chip-bg: var(--chip-c);
+    --chip-fg: var(--chip-c-on);
+  }
+  .message-tag-chip[data-variant='outline'] {
+    --chip-bg: transparent;
+    --chip-fg: var(--chip-c);
+    --chip-border: var(--chip-c);
+  }
+  .message-tag-chip[data-variant='outline'][data-color='muted'] {
+    --chip-border: var(--fd-border);
+  }
+</style>

package/dist/components/playground/MessageTagChip.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { MessageTag } from '../../types/playground.js';
+interface Props {
+    tag: MessageTag;
+}
+declare const MessageTagChip: import("svelte").Component<Props, {}, "">;
+type MessageTagChip = ReturnType<typeof MessageTagChip>;
+export default MessageTagChip;

package/dist/components/playground/MessageTagStrip.svelte

@@ -0,0 +1,37 @@
+<!--
+  MessageTagStrip Component
+
+  A flex-wrapped row of MessageTagChips. Encapsulates the layout the four
+  message variants used to copy individually.
+-->
+
+<script lang="ts">
+  import type { MessageTag } from '../../types/playground.js';
+  import MessageTagChip from './MessageTagChip.svelte';
+
+  interface Props {
+    tags: MessageTag[];
+  }
+
+  let { tags }: Props = $props();
+</script>
+
+{#if tags.length > 0}
+  <!-- No role/label — each chip is already labelled (via tag.type when set)
+       and a one-element group adds nothing for AT users. -->
+  <span class="message-tag-strip">
+    {#each tags as tag (tag.id)}
+      <MessageTagChip {tag} />
+    {/each}
+  </span>
+{/if}
+
+<style>
+  .message-tag-strip {
+    display: inline-flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--fd-space-2xs);
+    min-width: 0;
+  }
+</style>