@flowdrop/flowdrop 1.11.0 → 1.13.0

package/dist/components/playground/MessageStream.svelte

@@ -0,0 +1,367 @@
+<!--
+  MessageStream Component
+
+  Renders the playground message feed with interrupt UI inline. No input area.
+  This is the shared primitive used by ChatPanel (conversational) and
+  ExecutionConsole (workflow runtime surface).
+
+  The empty/welcome state is delegated to consumers via the `welcome` and
+  `emptySession` snippets so each wrapper renders context-appropriate copy.
+-->
+
+<script lang="ts">
+  import { tick, untrack, type Snippet } from 'svelte';
+  import MessageBubble from './MessageBubble.svelte';
+  import { InterruptBubble } from '../interrupt/index.js';
+  import type { PlaygroundMessage } from '../../types/playground.js';
+  import {
+    isInterruptMetadata,
+    extractInterruptMetadata,
+    metadataToInterrupt
+  } from '../../types/interrupt.js';
+  import {
+    getMessages,
+    getChatMessages,
+    getIsExecuting,
+    getCurrentSession,
+    getShowLogs
+  } from '../../stores/playgroundStore.svelte.js';
+  import {
+    getInterruptsMap,
+    interruptActions,
+    getInterruptByMessageId
+  } from '../../stores/interruptStore.svelte.js';
+  import { m } from '../../messages/index.js';
+
+  interface Props {
+    /** Whether to show timestamps on messages */
+    showTimestamps?: boolean;
+    /** Whether to auto-scroll to bottom on new messages */
+    autoScroll?: boolean;
+    /** Whether to enable markdown rendering in messages */
+    enableMarkdown?: boolean;
+    /**
+     * Whether this surface is permitted to show log messages.
+     * When true, the store's showLogs toggle takes effect.
+     * When false (default), only chat messages are ever shown regardless of the toggle.
+     * Set to true on execution surfaces (e.g. ExecutionConsole); leave false on pure chat surfaces.
+     */
+    allowLogs?: boolean;
+    /** Render system messages in compact inline form */
+    compactSystemMessages?: boolean;
+    /** Called when an interrupt is resolved */
+    onInterruptResolved?: () => void;
+    /** Custom render for the no-session welcome state */
+    welcome?: Snippet;
+    /** Custom render for the empty-session state */
+    emptySession?: Snippet;
+  }
+
+  let {
+    showTimestamps = true,
+    autoScroll = true,
+    enableMarkdown = true,
+    allowLogs = false,
+    compactSystemMessages = true,
+    onInterruptResolved,
+    welcome,
+    emptySession
+  }: Props = $props();
+
+  const states = $derived(m().playground.states);
+
+  /** Reference to the messages container for scrolling */
+  let messagesContainer: HTMLDivElement | undefined;
+
+  const displayMessages = $derived(
+    allowLogs && getShowLogs() ? getMessages() : getChatMessages()
+  );
+
+  let previousMessageCount = 0;
+  let userScrolledUp = false;
+
+  function handleScroll() {
+    if (!messagesContainer) return;
+    const { scrollTop, scrollHeight, clientHeight } = messagesContainer;
+    userScrolledUp = scrollHeight - scrollTop - clientHeight > 50;
+  }
+
+  function isFormFocused(): boolean {
+    if (!messagesContainer) return false;
+    const activeElement = document.activeElement;
+    if (!activeElement) return false;
+    const isFormControl =
+      activeElement.tagName === 'INPUT' ||
+      activeElement.tagName === 'TEXTAREA' ||
+      activeElement.tagName === 'SELECT' ||
+      activeElement.tagName === 'BUTTON' ||
+      activeElement.getAttribute('contenteditable') === 'true';
+    return isFormControl && messagesContainer.contains(activeElement);
+  }
+
+  function isInterruptMessage(message: PlaygroundMessage): boolean {
+    return isInterruptMetadata(message.metadata as Record<string, unknown> | undefined);
+  }
+
+  /**
+   * Sync interrupt messages into the interrupt store. Runs in an effect to
+   * avoid Svelte 5's state_unsafe_mutation error during render.
+   */
+  $effect(() => {
+    const interruptMessages = displayMessages.filter(isInterruptMessage);
+
+    for (const message of interruptMessages) {
+      const existing = getInterruptByMessageId(message.id);
+      if (!existing) {
+        const metadata = extractInterruptMetadata(
+          message.metadata as Record<string, unknown> | undefined
+        );
+        if (metadata) {
+          const interrupt = metadataToInterrupt(metadata, message.id, message.content);
+          interruptActions.addInterrupt(interrupt);
+
+          if (message.status === 'completed') {
+            interruptActions.resolveInterrupt(interrupt.id, metadata.response_value);
+          }
+        }
+      }
+    }
+  });
+
+  const interruptsByMessageId = $derived(
+    new Map(
+      Array.from(getInterruptsMap().values())
+        .filter((i) => i.messageId)
+        .map((i) => [i.messageId, i])
+    )
+  );
+
+  function getInterruptForMessage(message: PlaygroundMessage) {
+    return interruptsByMessageId.get(message.id);
+  }
+
+  const showWelcome = $derived(!getCurrentSession() && displayMessages.length === 0);
+  const showEmptyChat = $derived(getCurrentSession() !== null && displayMessages.length === 0);
+
+  // Reset scroll-tracking when session changes
+  $effect(() => {
+    if (getCurrentSession()) {
+      userScrolledUp = false;
+    }
+  });
+
+  $effect(() => {
+    const currentCount = displayMessages.length;
+
+    if (!autoScroll || !messagesContainer) {
+      untrack(() => { previousMessageCount = currentCount; });
+      return;
+    }
+
+    const hasNewMessage = currentCount > previousMessageCount;
+    untrack(() => { previousMessageCount = currentCount; });
+
+    if (!hasNewMessage || userScrolledUp || isFormFocused()) return;
+
+    tick().then(() => {
+      if (messagesContainer) {
+        messagesContainer.scrollTop = messagesContainer.scrollHeight;
+      }
+    });
+  });
+</script>
+
+<div class="message-stream" role="log" aria-label={m().playground.controlPanel.messageStreamLabel} bind:this={messagesContainer} onscroll={handleScroll}>
+  {#if showWelcome}
+    {#if welcome}
+      {@render welcome()}
+    {/if}
+  {:else if showEmptyChat}
+    {#if emptySession}
+      {@render emptySession()}
+    {/if}
+  {:else}
+    {#each displayMessages as message, index (message.id)}
+      {#if isInterruptMessage(message)}
+        {@const interrupt = getInterruptForMessage(message)}
+        {#if interrupt}
+          <InterruptBubble
+            {interrupt}
+            showTimestamp={showTimestamps}
+            onResolved={onInterruptResolved}
+            hierarchy={message.hierarchy}
+            tags={message.tags}
+          />
+        {/if}
+      {:else}
+        <MessageBubble
+          {message}
+          showTimestamp={showTimestamps}
+          isLast={index === displayMessages.length - 1}
+          {enableMarkdown}
+          {compactSystemMessages}
+        />
+      {/if}
+    {/each}
+
+    {#if getIsExecuting()}
+      <div class="message-stream__typing">
+        <div class="message-stream__typing-indicator">
+          <span></span>
+          <span></span>
+          <span></span>
+        </div>
+        <span class="message-stream__typing-text">{states.processing}</span>
+      </div>
+    {/if}
+  {/if}
+</div>
+
+<style>
+  .message-stream {
+    flex: 1;
+    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 {
+    display: flex;
+    align-items: center;
+    gap: var(--fd-space-xs);
+    padding: var(--fd-space-md) var(--fd-space-xl);
+    margin-top: var(--fd-space-xs);
+    background-color: var(--fd-muted);
+    border-radius: var(--fd-radius-2xl);
+    width: fit-content;
+  }
+
+  .message-stream__typing-indicator {
+    display: flex;
+    gap: var(--fd-space-3xs);
+  }
+
+  .message-stream__typing-indicator span {
+    width: var(--fd-space-2xs);
+    height: var(--fd-space-2xs);
+    background-color: var(--fd-muted-foreground);
+    border-radius: var(--fd-radius-full);
+    animation: message-stream-bounce 1.4s ease-in-out infinite;
+  }
+
+  .message-stream__typing-indicator span:nth-child(1) {
+    animation-delay: 0s;
+  }
+
+  .message-stream__typing-indicator span:nth-child(2) {
+    animation-delay: 0.2s;
+  }
+
+  .message-stream__typing-indicator span:nth-child(3) {
+    animation-delay: 0.4s;
+  }
+
+  @keyframes message-stream-bounce {
+    0%,
+    60%,
+    100% {
+      transform: translateY(0);
+    }
+    30% {
+      transform: translateY(-0.25rem);
+    }
+  }
+
+  .message-stream__typing-text {
+    font-size: var(--fd-text-sm);
+    color: var(--fd-muted-foreground);
+  }
+
+  @media (max-width: 640px) {
+    .message-stream {
+      padding: var(--fd-space-md) 0;
+    }
+  }
+</style>

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

@@ -0,0 +1,27 @@
+import { type Snippet } from 'svelte';
+interface Props {
+    /** Whether to show timestamps on messages */
+    showTimestamps?: boolean;
+    /** Whether to auto-scroll to bottom on new messages */
+    autoScroll?: boolean;
+    /** Whether to enable markdown rendering in messages */
+    enableMarkdown?: boolean;
+    /**
+     * Whether this surface is permitted to show log messages.
+     * When true, the store's showLogs toggle takes effect.
+     * When false (default), only chat messages are ever shown regardless of the toggle.
+     * Set to true on execution surfaces (e.g. ExecutionConsole); leave false on pure chat surfaces.
+     */
+    allowLogs?: boolean;
+    /** Render system messages in compact inline form */
+    compactSystemMessages?: boolean;
+    /** Called when an interrupt is resolved */
+    onInterruptResolved?: () => void;
+    /** Custom render for the no-session welcome state */
+    welcome?: Snippet;
+    /** Custom render for the empty-session state */
+    emptySession?: Snippet;
+}
+declare const MessageStream: import("svelte").Component<Props, {}, "">;
+type MessageStream = ReturnType<typeof MessageStream>;
+export default MessageStream;

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>

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

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