@flowdrop/flowdrop 1.10.0 → 1.12.0

package/dist/components/playground/ExecutionConsole.svelte

@@ -0,0 +1,163 @@
+<!--
+  ExecutionConsole Component
+
+  The running workflow's runtime surface. Renders the message feed via
+  MessageStream and surfaces the flow's own UI (interrupts) inline during
+  execution. This is *not* a chat — it's the console where the flow speaks
+  to the user during a run. User-initiated commands live in ControlPanel.
+-->
+
+<script lang="ts">
+  import Icon from '@iconify/svelte';
+  import MessageStream from './MessageStream.svelte';
+  import { m } from '../../messages/index.js';
+
+  interface Props {
+    showTimestamps?: boolean;
+    autoScroll?: boolean;
+    enableMarkdown?: boolean;
+    /** Whether log messages can appear when the user toggle is on. Defaults to true for the execution console. */
+    allowLogs?: boolean;
+    compactSystemMessages?: boolean;
+    onInterruptResolved?: () => void;
+    /** Optional callback that, when provided, shows a "New session" CTA in the welcome state */
+    onCreateSession?: () => void;
+  }
+
+  let {
+    showTimestamps = true,
+    autoScroll = true,
+    enableMarkdown = true,
+    allowLogs = true,
+    compactSystemMessages = true,
+    onInterruptResolved,
+    onCreateSession
+  }: Props = $props();
+
+  const ec = $derived(m().playground.executionConsole);
+</script>
+
+<section class="execution-console">
+  <header class="execution-console__header">
+    <Icon icon="mdi:console-line" class="execution-console__icon" />
+    <span class="execution-console__title">{ec.header}</span>
+  </header>
+
+  <MessageStream
+    {showTimestamps}
+    {autoScroll}
+    {enableMarkdown}
+    {allowLogs}
+    {compactSystemMessages}
+    {onInterruptResolved}
+    welcome={welcomeState}
+    emptySession={readyState}
+  />
+</section>
+
+{#snippet welcomeState()}
+  <div class="execution-console__placeholder">
+    <Icon icon="mdi:play-circle-outline" class="execution-console__placeholder-icon" />
+    <h2 class="execution-console__placeholder-title">{ec.noExecutionTitle}</h2>
+    <p class="execution-console__placeholder-text">{ec.noExecutionText}</p>
+    {#if onCreateSession}
+      <button type="button" class="execution-console__cta" onclick={onCreateSession}>
+        <Icon icon="mdi:plus" />
+        {ec.newSession}
+      </button>
+    {/if}
+  </div>
+{/snippet}
+
+{#snippet readyState()}
+  <div class="execution-console__placeholder">
+    <Icon icon="mdi:play-circle-outline" class="execution-console__placeholder-icon" />
+    <h2 class="execution-console__placeholder-title">{ec.readyTitle}</h2>
+    <p class="execution-console__placeholder-text">{ec.readyText}</p>
+  </div>
+{/snippet}
+
+<style>
+  .execution-console {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    background-color: var(--fd-background);
+  }
+
+  .execution-console__header {
+    display: flex;
+    align-items: center;
+    gap: var(--fd-space-xs);
+    padding: 0 var(--fd-space-xl);
+    height: var(--fd-playground-header-height);
+    min-height: var(--fd-playground-header-height);
+    border-bottom: 1px solid var(--fd-border);
+    flex-shrink: 0;
+  }
+
+  :global(.execution-console__icon) {
+    font-size: var(--fd-text-base);
+    color: var(--fd-muted-foreground);
+    flex-shrink: 0;
+  }
+
+  .execution-console__title {
+    font-size: var(--fd-text-sm);
+    font-weight: 600;
+    color: var(--fd-foreground);
+  }
+
+  .execution-console__placeholder {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    text-align: center;
+    padding: var(--fd-space-4xl);
+    color: var(--fd-muted-foreground);
+  }
+
+  :global(.execution-console__placeholder-icon) {
+    font-size: var(--fd-space-6xl);
+    color: var(--fd-border-strong);
+    margin-bottom: var(--fd-space-xl);
+  }
+
+  .execution-console__placeholder-title {
+    font-size: var(--fd-text-xl);
+    font-weight: 600;
+    color: var(--fd-foreground);
+    margin: 0 0 var(--fd-space-xs) 0;
+  }
+
+  .execution-console__placeholder-text {
+    font-size: var(--fd-text-sm);
+    color: var(--fd-muted-foreground);
+    margin: 0;
+    max-width: 360px;
+  }
+
+  .execution-console__cta {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--fd-space-xs);
+    margin-top: var(--fd-space-2xl);
+    padding: var(--fd-space-sm) var(--fd-space-xl);
+    border: none;
+    border-radius: var(--fd-radius-md);
+    background: var(--fd-primary);
+    color: var(--fd-primary-foreground);
+    font-size: var(--fd-text-base);
+    font-weight: 500;
+    cursor: pointer;
+    transition: opacity var(--fd-transition-fast);
+  }
+
+  .execution-console__cta:hover {
+    opacity: 0.9;
+  }
+</style>

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

@@ -0,0 +1,14 @@
+interface Props {
+    showTimestamps?: boolean;
+    autoScroll?: boolean;
+    enableMarkdown?: boolean;
+    /** Whether log messages can appear when the user toggle is on. Defaults to true for the execution console. */
+    allowLogs?: boolean;
+    compactSystemMessages?: boolean;
+    onInterruptResolved?: () => void;
+    /** Optional callback that, when provided, shows a "New session" CTA in the welcome state */
+    onCreateSession?: () => void;
+}
+declare const ExecutionConsole: import("svelte").Component<Props, {}, "">;
+type ExecutionConsole = ReturnType<typeof ExecutionConsole>;
+export default ExecutionConsole;

package/dist/components/playground/MessageStream.svelte

@@ -0,0 +1,283 @@
+<!--
+  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}
+          />
+        {/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);
+  }
+
+  .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-xl);
+    }
+  }
+</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;