@flowdrop/flowdrop 1.11.0 → 1.13.0

package/dist/components/interrupt/TextInputPrompt.svelte

@@ -315,6 +315,11 @@
     transform: translateY(-1px);
   }
 
+  .text-prompt__submit:focus-visible {
+    outline: 2px solid var(--fd-ring);
+    outline-offset: 2px;
+  }
+
   .text-prompt__submit:disabled {
     opacity: 0.5;
     cursor: not-allowed;

package/dist/components/nodes/GatewayNode.svelte

@@ -210,9 +210,7 @@
               style="top: 50%; transform: translateY(-50%); --fd-handle-fill: {getDataTypeColorToken(
                 port.dataType
               )}; --fd-handle-border-color: var(--fd-handle-border);"
-              role="button"
-              tabindex={0}
-              aria-label={graph.connectInputPort({ name: port.name })}
+              tabindex={-1}
             />
 
             <!-- Port Info: padding lives here so handle position is simple -->
@@ -298,9 +296,7 @@
                 : getDataTypeColorToken(
                     'trigger'
                   )}; --fd-handle-border-color: var(--fd-handle-border);"
-              role="button"
-              tabindex={0}
-              aria-label={graph.connectBranch({ name: branch.name })}
+              tabindex={-1}
             />
           </div>
         {/each}

package/dist/components/nodes/WorkflowNode.svelte

@@ -264,9 +264,7 @@
               style="top: 50%; transform: translateY(-50%); --fd-handle-fill: var(--fd-port-skin-color, {getDataTypeColorToken(
                 port.dataType
               )}); --fd-handle-border-color: var(--fd-handle-border);"
-              role="button"
-              tabindex={0}
-              aria-label={graph.connectInputPort({ name: port.name })}
+              tabindex={-1}
             />
 
             <!-- Port Info: padding lives here so handle position is simple -->
@@ -342,9 +340,7 @@
               style="top: 50%; transform: translateY(-50%); --fd-handle-fill: var(--fd-port-skin-color, {getDataTypeColorToken(
                 port.dataType
               )}); --fd-handle-border-color: var(--fd-handle-border);"
-              role="button"
-              tabindex={0}
-              aria-label={graph.connectOutputPort({ name: port.name })}
+              tabindex={-1}
             />
           </div>
         {/each}

package/dist/components/playground/ChatBubble.svelte

@@ -0,0 +1,289 @@
+<!--
+  ChatBubble — avatar + bubble layout for user/assistant/system messages.
+  Markdown typography comes from MessageMarkdown; user-bubble overrides
+  (primary-bg) are scoped here.
+-->
+
+<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 MessageMarkdown from './MessageMarkdown.svelte';
+  import {
+    formatDuration,
+    formatTimestamp,
+    getRoleIcon,
+    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 hierarchy = $derived(message.hierarchy ?? []);
+  const tags = $derived(message.tags ?? []);
+  const roleLabel = $derived(getRoleLabel(message, m().playground.roles));
+  const hasFooter = $derived(
+    message.metadata?.duration !== undefined || !!message.nodeId || tags.length > 0
+  );
+</script>
+
+<article
+  class="message-bubble"
+  class:message-bubble--user={message.role === 'user'}
+  class:message-bubble--assistant={message.role === 'assistant'}
+  class:message-bubble--system={message.role === 'system'}
+  class:message-bubble--last={isLast}
+  aria-label="{roleLabel} message"
+>
+  <div class="message-bubble__avatar" aria-hidden="true">
+    <Icon icon={getRoleIcon(message.role)} />
+  </div>
+
+  <div class="message-bubble__content">
+    <div class="message-bubble__header">
+      <span class="message-bubble__role">{roleLabel}</span>
+      {#if showTimestamp}
+        <time
+          class="message-bubble__timestamp"
+          datetime={message.timestamp}
+          aria-label="sent at {formatTimestamp(message.timestamp)}"
+        >{formatTimestamp(message.timestamp)}</time>
+      {/if}
+    </div>
+
+    {#if hierarchy.length > 0}
+      <div class="message-bubble__hierarchy">
+        <HierarchyTrail items={hierarchy} />
+      </div>
+    {/if}
+
+    <MessageMarkdown content={message.content} {enableMarkdown} />
+
+    {#if hasFooter}
+      <div class="message-bubble__footer">
+        {#if message.nodeId}
+          <span
+            class="message-bubble__node"
+            title={m().playground.messageTooltips.nodeId({ id: message.nodeId })}
+          >
+            <Icon icon="mdi:vector-square" aria-hidden="true" />
+            via {message.metadata?.nodeLabel ?? message.nodeId}
+          </span>
+        {/if}
+        {#if message.metadata?.duration !== undefined}
+          <span
+            class="message-bubble__duration"
+            title={m().playground.messageTooltips.executionDuration}
+            aria-label="execution duration {formatDuration(message.metadata.duration)}"
+          >
+            <Icon icon="mdi:timer-outline" aria-hidden="true" />
+            {formatDuration(message.metadata.duration)}
+          </span>
+        {/if}
+        <MessageTagStrip {tags} />
+      </div>
+    {/if}
+  </div>
+</article>
+
+<style>
+  .message-bubble {
+    display: flex;
+    gap: var(--fd-space-sm);
+    padding: 2px var(--fd-space-xl);
+    margin-bottom: 2px;
+    align-items: flex-end;
+    /* fd-fade-in + reduced-motion guard live in MessageStream.svelte */
+    animation: fd-fade-in 0.18s ease-out;
+  }
+
+  .message-bubble--user {
+    flex-direction: row-reverse;
+  }
+
+  .message-bubble--last {
+    margin-bottom: var(--fd-space-xl);
+  }
+
+  .message-bubble__avatar {
+    flex-shrink: 0;
+    width: 1.875rem;
+    height: 1.875rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--fd-radius-full);
+    font-size: 1rem;
+  }
+
+  .message-bubble--user .message-bubble__avatar {
+    background-color: var(--fd-primary);
+    color: var(--fd-primary-foreground);
+  }
+
+  .message-bubble--assistant .message-bubble__avatar {
+    background-color: var(--fd-secondary);
+    color: var(--fd-secondary-foreground);
+    border: 1px solid var(--fd-border);
+  }
+
+  .message-bubble--system .message-bubble__avatar {
+    background-color: var(--fd-muted);
+    color: var(--fd-muted-foreground);
+  }
+
+  .message-bubble__content {
+    min-width: 0;
+    max-width: 78%;
+    padding: var(--fd-space-sm) var(--fd-space-md);
+    border-radius: var(--fd-radius-2xl);
+  }
+
+  .message-bubble--user .message-bubble__content {
+    background-color: var(--fd-primary);
+    color: var(--fd-primary-foreground);
+    border-bottom-right-radius: var(--fd-radius-sm);
+  }
+
+  .message-bubble--assistant .message-bubble__content {
+    background-color: var(--fd-card);
+    border: 1px solid var(--fd-border);
+    color: var(--fd-card-foreground);
+    box-shadow: 0 1px 3px 0 oklch(0% 0 0 / 0.06), 0 1px 2px -1px oklch(0% 0 0 / 0.04);
+    border-bottom-left-radius: var(--fd-radius-sm);
+  }
+
+  .message-bubble--system .message-bubble__content {
+    background-color: var(--fd-muted);
+    border: 1px solid var(--fd-border);
+    color: var(--fd-muted-foreground);
+    font-size: var(--fd-text-sm);
+    max-width: 88%;
+  }
+
+  .message-bubble__header {
+    display: flex;
+    align-items: center;
+    gap: var(--fd-space-xs);
+    margin-bottom: var(--fd-space-3xs);
+  }
+
+  .message-bubble--user .message-bubble__header {
+    flex-direction: row-reverse;
+  }
+
+  .message-bubble__role {
+    font-weight: 600;
+    font-size: var(--fd-text-xs);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .message-bubble--user .message-bubble__role {
+    color: var(--fd-primary-foreground);
+    opacity: 0.75;
+  }
+
+  .message-bubble--assistant .message-bubble__role,
+  .message-bubble--system .message-bubble__role {
+    color: var(--fd-muted-foreground);
+  }
+
+  .message-bubble__timestamp {
+    font-size: 0.6875rem;
+    font-family: var(--fd-font-mono);
+    opacity: 0.55;
+  }
+
+  .message-bubble--user .message-bubble__timestamp {
+    color: var(--fd-primary-foreground);
+  }
+
+  .message-bubble--assistant .message-bubble__timestamp {
+    color: var(--fd-muted-foreground);
+  }
+
+  .message-bubble__hierarchy {
+    margin: var(--fd-space-3xs) 0 var(--fd-space-xs);
+  }
+
+  /* Override markdown styling on the primary-bg user bubble */
+  .message-bubble--user :global(.message-markdown code) {
+    background-color: color-mix(in srgb, var(--fd-primary-foreground) 18%, transparent);
+    color: var(--fd-primary-foreground);
+  }
+
+  .message-bubble--user :global(.message-markdown pre) {
+    background-color: rgb(0 0 0 / 0.25);
+    color: var(--fd-primary-foreground);
+  }
+
+  .message-bubble--user :global(.message-markdown a) {
+    color: var(--fd-primary-foreground);
+    text-decoration: underline;
+    opacity: 0.85;
+  }
+
+  .message-bubble--user :global(.message-markdown blockquote) {
+    border-left-color: color-mix(in srgb, var(--fd-primary-foreground) 40%, transparent);
+    color: var(--fd-primary-foreground);
+    opacity: 0.8;
+  }
+
+  .message-bubble__footer {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--fd-space-md);
+    margin-top: var(--fd-space-xs);
+    padding-top: var(--fd-space-3xs);
+    border-top: 1px solid var(--fd-border);
+    font-size: var(--fd-text-xs);
+    color: var(--fd-muted-foreground);
+  }
+
+  .message-bubble--user .message-bubble__footer {
+    justify-content: flex-end;
+    border-top-color: color-mix(in srgb, var(--fd-primary-foreground) 20%, transparent);
+    color: var(--fd-primary-foreground);
+    opacity: 0.75;
+  }
+
+  .message-bubble__node,
+  .message-bubble__duration {
+    display: flex;
+    align-items: center;
+    gap: var(--fd-space-3xs);
+  }
+
+  @media (max-width: 640px) {
+    .message-bubble {
+      padding: 2px var(--fd-space-md);
+      gap: var(--fd-space-xs);
+    }
+
+    .message-bubble__content {
+      max-width: calc(100% - 2.5rem);
+      padding: var(--fd-space-xs) var(--fd-space-sm);
+    }
+
+    .message-bubble__avatar {
+      width: 1.625rem;
+      height: 1.625rem;
+      font-size: var(--fd-text-sm);
+    }
+
+    .message-bubble__footer {
+      gap: var(--fd-space-xs);
+      font-size: var(--fd-text-2xs);
+    }
+  }
+</style>

package/dist/components/playground/ChatBubble.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 ChatBubble: import("svelte").Component<Props, {}, "">;
+type ChatBubble = ReturnType<typeof ChatBubble>;
+export default ChatBubble;

package/dist/components/playground/ChatInput.svelte

@@ -0,0 +1,359 @@
+<!--
+  ChatInput Component
+
+  The textarea + Run/Send/Stop button. Reusable input primitive shared by
+  ChatPanel (conversational) and ControlPanel (orchestration controls).
+
+  Reads execution state from playgroundStore. Owns its own input string and
+  textarea ref; emits sent content via onSendMessage.
+-->
+
+<script lang="ts">
+  import Icon from '@iconify/svelte';
+  import { tick, untrack } from 'svelte';
+  import { hasEnableRunFlag } from '../../types/playground.js';
+  import {
+    getMessages,
+    getIsExecuting,
+    getCanSendMessage,
+    getCurrentSession
+  } from '../../stores/playgroundStore.svelte.js';
+  import { m } from '../../messages/index.js';
+
+  interface Props {
+    placeholder?: string;
+    /** Show the textarea (default: true). When false, only the Run button is shown. */
+    showTextarea?: boolean;
+    /** Show the Run button when textarea is hidden (default: true) */
+    showRunButton?: boolean;
+    /** Message sent when Run is clicked with textarea hidden */
+    predefinedMessage?: string;
+    onSendMessage?: (content: string) => void;
+    onStopExecution?: () => void;
+  }
+
+  let {
+    placeholder,
+    showTextarea = true,
+    showRunButton = true,
+    predefinedMessage,
+    onSendMessage,
+    onStopExecution
+  }: Props = $props();
+
+  const actions = $derived(m().playground.actions);
+  const chat = $derived(m().playground.chat);
+  const states = $derived(m().playground.states);
+
+  const resolvedPlaceholder = $derived(placeholder ?? chat.placeholder);
+  const resolvedPredefinedMessage = $derived(predefinedMessage ?? chat.predefinedRun);
+
+  const noInputsAvailable = $derived(!showTextarea && !showRunButton);
+
+  /**
+   * Tracks whether the Run button is enabled. Starts as true; becomes false
+   * after Run is clicked; re-enabled when the backend sends a message with
+   * enableRun: true metadata.
+   */
+  let runEnabled = $state(true);
+
+  let inputValue = $state('');
+  let inputField: HTMLTextAreaElement | undefined;
+
+  // Count of enableRun messages seen so far — plain let, not $state.
+  // Written with untrack to make the bookkeeping intent explicit.
+  let seenEnableRunCount = 0;
+
+  $effect(() => {
+    const count = getMessages().filter(m => hasEnableRunFlag(m.metadata)).length;
+    if (count > seenEnableRunCount) {
+      untrack(() => { seenEnableRunCount = count; });
+      runEnabled = true;
+    }
+  });
+
+  $effect(() => {
+    if (getCurrentSession()?.id) {
+      untrack(() => { seenEnableRunCount = 0; });
+      runEnabled = true;
+    }
+  });
+
+  let wasExecuting = false;
+
+  /** Auto-focus input when execution completes */
+  $effect(() => {
+    const nowExecuting = getIsExecuting();
+    if (wasExecuting && !nowExecuting && inputField) {
+      tick().then(() => inputField?.focus({ preventScroll: true }));
+    }
+    untrack(() => { wasExecuting = nowExecuting; });
+  });
+
+  function handleSend(): void {
+    const trimmedValue = inputValue.trim();
+    if (!trimmedValue || !getCanSendMessage()) return;
+
+    onSendMessage?.(trimmedValue);
+    inputValue = '';
+
+    if (inputField) {
+      inputField.style.height = 'auto';
+    }
+
+    tick().then(() => {
+      inputField?.focus({ preventScroll: true });
+    });
+  }
+
+  function handleKeydown(event: KeyboardEvent): void {
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault();
+      handleSend();
+    }
+  }
+
+  function handleStop(): void {
+    onStopExecution?.();
+  }
+
+  function handleRun(): void {
+    if (getIsExecuting() || !runEnabled) return;
+    runEnabled = false;
+    onSendMessage?.(resolvedPredefinedMessage);
+  }
+
+  function handleInput(): void {
+    if (inputField) {
+      inputField.style.height = 'auto';
+      inputField.style.height = `${Math.min(inputField.scrollHeight, 120)}px`;
+    }
+  }
+</script>
+
+<div class="chat-input">
+  {#if noInputsAvailable}
+    <div class="chat-input__no-inputs">
+      <Icon icon="mdi:information-outline" />
+      <span>{states.viewOnlyHelp}</span>
+    </div>
+  {:else}
+    <div class="chat-input__container" class:chat-input__container--run-only={!showTextarea}>
+      {#if showTextarea}
+        <div class="chat-input__wrapper">
+          <textarea
+            bind:this={inputField}
+            bind:value={inputValue}
+            class="chat-input__textarea"
+            placeholder={resolvedPlaceholder}
+            rows="1"
+            disabled={getIsExecuting() || !getCurrentSession()}
+            onkeydown={handleKeydown}
+            oninput={handleInput}
+          ></textarea>
+        </div>
+      {/if}
+
+      {#if getIsExecuting()}
+        <button
+          type="button"
+          class="chat-input__stop-btn"
+          onclick={handleStop}
+          title={actions.stopTitle}
+          aria-label={actions.stopTitle}
+        >
+          <Icon icon="mdi:stop" />
+          {actions.stop}
+        </button>
+      {:else if showTextarea}
+        <button
+          type="button"
+          class="chat-input__send-btn"
+          onclick={handleSend}
+          disabled={!inputValue.trim() || !getCanSendMessage()}
+          title={actions.sendTitle}
+          aria-label={actions.sendTitle}
+        >
+          {actions.send}
+        </button>
+      {:else if showRunButton}
+        {@const runLabel = runEnabled ? actions.runTitle : actions.runWaitingTitle}
+        <button
+          type="button"
+          class="chat-input__run-btn"
+          onclick={handleRun}
+          disabled={!runEnabled}
+          title={runLabel}
+          aria-label={runLabel}
+        >
+          <Icon icon="mdi:play" />
+          {actions.run}
+        </button>
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .chat-input {
+    flex-shrink: 0;
+    padding: var(--fd-space-xl) var(--fd-space-3xl) var(--fd-space-3xl);
+    background-color: var(--fd-background);
+    border-top: 1px solid var(--fd-border-muted);
+  }
+
+  .chat-input__container {
+    display: flex;
+    align-items: flex-end;
+    gap: var(--fd-space-md);
+    max-width: 760px;
+    margin: 0 auto;
+  }
+
+  .chat-input__container--run-only {
+    justify-content: flex-end;
+  }
+
+  .chat-input__wrapper {
+    flex: 1;
+    display: flex;
+    align-items: flex-end;
+    background-color: var(--fd-background);
+    border: 1px solid var(--fd-border);
+    border-radius: var(--fd-radius-xl);
+    padding: var(--fd-space-sm) var(--fd-space-md);
+    transition:
+      border-color var(--fd-transition-fast),
+      box-shadow var(--fd-transition-fast);
+  }
+
+  .chat-input__wrapper:focus-within {
+    border-color: var(--fd-primary);
+    box-shadow: 0 0 0 3px var(--fd-primary-muted);
+  }
+
+  .chat-input__textarea {
+    flex: 1;
+    border: none;
+    outline: none;
+    resize: none;
+    font-family: inherit;
+    font-size: var(--fd-text-base);
+    line-height: var(--fd-leading-normal);
+    max-height: 120px;
+    background: transparent;
+    color: var(--fd-foreground);
+  }
+
+  .chat-input__textarea::placeholder {
+    color: var(--fd-muted-foreground);
+  }
+
+  .chat-input__textarea:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  .chat-input__send-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--fd-space-sm) var(--fd-space-2xl);
+    border: none;
+    border-radius: var(--fd-radius-lg);
+    background-color: var(--fd-foreground);
+    color: var(--fd-background);
+    font-size: var(--fd-text-sm);
+    font-weight: 500;
+    cursor: pointer;
+    transition: all var(--fd-transition-fast);
+    flex-shrink: 0;
+  }
+
+  .chat-input__send-btn:hover:not(:disabled) {
+    opacity: 0.85;
+  }
+
+  .chat-input__send-btn:disabled {
+    background-color: var(--fd-foreground);
+    color: var(--fd-background);
+    opacity: 0.3;
+    cursor: not-allowed;
+  }
+
+  .chat-input__stop-btn {
+    display: flex;
+    align-items: center;
+    gap: var(--fd-space-3xs);
+    padding: var(--fd-space-sm) var(--fd-space-xl);
+    border: none;
+    border-radius: var(--fd-radius-lg);
+    background-color: var(--fd-error);
+    color: var(--fd-error-foreground);
+    font-size: var(--fd-text-sm);
+    font-weight: 500;
+    cursor: pointer;
+    transition: background-color var(--fd-transition-fast);
+    flex-shrink: 0;
+  }
+
+  .chat-input__stop-btn:hover {
+    background-color: var(--fd-error-hover);
+  }
+
+  .chat-input__run-btn {
+    display: flex;
+    align-items: center;
+    gap: var(--fd-space-3xs);
+    padding: var(--fd-space-sm) var(--fd-space-2xl);
+    border: none;
+    border-radius: var(--fd-radius-lg);
+    background-color: var(--fd-success);
+    color: var(--fd-success-foreground);
+    font-size: var(--fd-text-sm);
+    font-weight: 500;
+    cursor: pointer;
+    transition: all var(--fd-transition-fast);
+    flex-shrink: 0;
+  }
+
+  .chat-input__run-btn:hover:not(:disabled) {
+    background-color: var(--fd-success-hover);
+  }
+
+  .chat-input__run-btn:disabled {
+    background-color: var(--fd-border);
+    color: var(--fd-muted-foreground);
+    cursor: not-allowed;
+  }
+
+  .chat-input__no-inputs {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--fd-space-xs);
+    padding: var(--fd-space-md) var(--fd-space-xl);
+    background-color: var(--fd-muted);
+    border-radius: var(--fd-radius-lg);
+    color: var(--fd-muted-foreground);
+    font-size: var(--fd-text-sm);
+    max-width: 760px;
+    margin: 0 auto;
+  }
+
+  @media (max-width: 640px) {
+    .chat-input {
+      padding: var(--fd-space-md) var(--fd-space-xl) var(--fd-space-xl);
+    }
+
+    .chat-input__container {
+      gap: var(--fd-space-xs);
+    }
+
+    .chat-input__send-btn,
+    .chat-input__stop-btn,
+    .chat-input__run-btn {
+      padding: var(--fd-space-xs) var(--fd-space-xl);
+    }
+  }
+</style>