@flowdrop/flowdrop 1.11.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;