@flowdrop/flowdrop 1.12.0 → 1.13.0

package/dist/components/ConfigForm.svelte

@@ -191,6 +191,7 @@
    * This fixes the Svelte 5 reactivity warnings
    */
   let configValues = $state<Record<string, unknown>>({});
+  setContext<() => Record<string, unknown>>('flowdrop:getFormValues', () => configValues);
 
   /**
    * UI Extension values for display settings

package/dist/components/SchemaForm.svelte

@@ -197,6 +197,7 @@
    * Internal reactive state for form values
    */
   let formValues = $state<Record<string, unknown>>({});
+  setContext<() => Record<string, unknown>>('flowdrop:getFormValues', () => formValues);
 
   /**
    * Initialize form values when schema or values change

package/dist/components/form/FormAutocomplete.svelte

@@ -68,6 +68,9 @@
     'flowdrop:getAuthProvider'
   );
   const getBaseUrl = getContext<(() => string) | undefined>('flowdrop:getBaseUrl');
+  const getFormValues = getContext<(() => Record<string, unknown>) | undefined>(
+    'flowdrop:getFormValues'
+  );
 
   // Hoist the autocomplete branch — seven reads in the template, one inside
   // an {#each tag} loop. One getter walk per render.
@@ -82,6 +85,7 @@
   const valueField = $derived(autocomplete.valueField ?? 'value');
   const allowFreeText = $derived(autocomplete.allowFreeText ?? false);
   const multiple = $derived(autocomplete.multiple ?? false);
+  const params = $derived(autocomplete.params ?? {});
 
   // Component state
   let inputElement: HTMLInputElement | undefined = $state(undefined);
@@ -102,6 +106,33 @@
   // Cache of value-to-label mappings for selected items
   let labelCache = $state<Map<string, string>>(new Map());
 
+  // Resolved values for each param dependency: { paramName -> currentFieldValue }
+  // Used both in buildUrl (appending to query) and in the dep-change effect.
+  const depParamValues = $derived.by(() => {
+    const all = getFormValues?.() ?? {};
+    const result: Record<string, string> = {};
+    for (const [paramName, fieldName] of Object.entries(params)) {
+      const val = all[fieldName];
+      if (val !== undefined && val !== '') result[paramName] = String(val);
+    }
+    return result;
+  });
+
+  // Stable fingerprint — any change triggers selection clearing.
+  // JSON.stringify gives a canonical string without null-byte ambiguity.
+  const depFingerprint = $derived(JSON.stringify(depParamValues));
+  let prevDepFingerprint = depFingerprint;
+
+  $effect(() => {
+    if (Object.keys(params).length > 0 && !getFormValues) {
+      logger.warn(
+        '[FormAutocomplete] `params` is configured but no flowdrop:getFormValues context ' +
+          'was found. Dependent field values will not be passed to the autocomplete URL. ' +
+          'Ensure this component is rendered inside ConfigForm or SchemaForm.'
+      );
+    }
+  });
+
   // Generate unique IDs for accessibility
   // svelte-ignore state_referenced_locally — id prop never changes
   const listboxId = `${id}-listbox`;
@@ -160,7 +191,13 @@
       : `${baseUrl}${autocomplete.url}`;
 
     const separator = url.includes('?') ? '&' : '?';
-    return `${url}${separator}${encodeURIComponent(queryParam)}=${encodeURIComponent(query)}`;
+    let fullUrl = `${url}${separator}${encodeURIComponent(queryParam)}=${encodeURIComponent(query)}`;
+
+    for (const [paramName, val] of Object.entries(depParamValues)) {
+      fullUrl += `&${encodeURIComponent(paramName)}=${encodeURIComponent(val)}`;
+    }
+
+    return fullUrl;
   }
 
   /**
@@ -198,25 +235,25 @@
 
     isLoading = true;
     error = null;
-    abortController = new AbortController();
+    // Capture in a local const so the timeout closure and fetch signal
+    // always reference the same controller, even if a new request starts
+    // before the 5-second timeout fires.
+    const controller = new AbortController();
+    abortController = controller;
 
+    let timeoutId: ReturnType<typeof setTimeout> | null = null;
     try {
       // Build headers with authentication (call getter to get current value)
       const headers = await buildFetchHeaders(getAuthProvider?.());
 
-      // Fetch with timeout
-      const timeoutId = setTimeout(() => {
-        abortController?.abort();
-      }, 5000);
+      timeoutId = setTimeout(() => controller.abort(), 5000);
 
       const response = await fetch(buildUrl(query), {
         method: 'GET',
         headers,
-        signal: abortController.signal
+        signal: controller.signal
       });
 
-      clearTimeout(timeoutId);
-
       if (!response.ok) {
         throw new Error(`HTTP ${response.status}: ${response.statusText}`);
       }
@@ -240,6 +277,7 @@
       error = err instanceof Error ? err.message : 'Failed to fetch suggestions';
       suggestions = [];
     } finally {
+      if (timeoutId !== null) clearTimeout(timeoutId);
       isLoading = false;
       abortController = null;
     }
@@ -297,6 +335,13 @@
     setTimeout(() => {
       hideDropdown();
 
+      // When dependent params are configured, the suggestion list is bound to the
+      // current values of sibling fields. Clear it on blur so that fetchOnFocus
+      // always re-fetches with the current dep values rather than showing stale results.
+      if (Object.keys(params).length > 0) {
+        suggestions = [];
+      }
+
       // If not allowFreeText and single mode, validate the input
       if (!allowFreeText && !multiple && inputValue !== '') {
         const currentVal = selectedValues;
@@ -542,6 +587,18 @@
     }
   });
 
+  $effect(() => {
+    const current = depFingerprint;
+    if (current === prevDepFingerprint) return;
+    prevDepFingerprint = current;
+    // A dependency field changed — abort any in-flight fetch, clear state
+    abortController?.abort();
+    suggestions = [];
+    labelCache = new Map();
+    if (multiple) onChange([]);
+    else onChange('');
+  });
+
   /**
    * Cleanup on unmount
    */
@@ -567,11 +624,11 @@
   class:form-autocomplete--has-value={selectedValues.length > 0}
 >
   <!-- Main input container styled like a textfield/textarea -->
+  <!-- svelte-ignore a11y_no_static_element_interactions — role="presentation"; keyboard interaction is handled by the <input> inside -->
   <div
     class="form-autocomplete__field"
     class:form-autocomplete__field--focused={isOpen}
     onclick={() => inputElement?.focus()}
-    onkeydown={() => {}}
     role="presentation"
   >
     <!-- Selected tags -->

package/dist/components/form/FormField.svelte

@@ -45,6 +45,7 @@
   import { getSchemaOptions } from './types.js';
   import type { WorkflowNode, WorkflowEdge, AuthProvider } from '../../types/index.js';
   import { getResolvedTheme } from '../../stores/settingsStore.svelte.js';
+  import { fieldComponentRegistry } from '../../form/fieldRegistry.js';
 
   interface Props {
     /** Unique key/id for the field */
@@ -224,6 +225,10 @@
     return [];
   });
 
+  const registeredAutocompleteComponent = $derived(
+    fieldType === 'autocomplete' ? fieldComponentRegistry.resolveFieldComponent(schema) : null
+  );
+
   /**
    * Get autocomplete value - can be string or string[] based on multiple setting
    */
@@ -387,6 +392,22 @@
         {authProvider}
         onChange={(val) => onChange(val)}
       />
+    {:else if fieldType === 'autocomplete' && schema.autocomplete && registeredAutocompleteComponent}
+      <registeredAutocompleteComponent.component
+        id={fieldKey}
+        value={autocompleteValue}
+        placeholder={schema.placeholder ?? ''}
+        {required}
+        {schema}
+        ariaDescribedBy={descriptionId}
+        disabled={isReadOnly}
+        {node}
+        {nodes}
+        {edges}
+        {workflowId}
+        {authProvider}
+        onChange={(val: unknown) => onChange(val)}
+      />
     {:else if fieldType === 'autocomplete' && schema.autocomplete}
       <FormAutocomplete
         id={fieldKey}

package/dist/components/form/FormFieldLight.svelte

@@ -243,6 +243,7 @@
         spellChecker={schema.spellChecker as boolean | undefined}
         variables={schema.variables}
         placeholderExample={schema.placeholderExample as string | undefined}
+        autocomplete={schema.autocomplete}
         onChange={(val: unknown) => onChange(val)}
       />
     {:else if fieldType === 'checkbox-group'}

package/dist/components/interrupt/InterruptBubble.svelte

@@ -14,6 +14,12 @@
   import TextInputPrompt from './TextInputPrompt.svelte';
   import FormPrompt from './FormPrompt.svelte';
   import ReviewPrompt from './ReviewPrompt.svelte';
+  import MessageTagStrip from '../playground/MessageTagStrip.svelte';
+  import HierarchyTrail from '../playground/HierarchyTrail.svelte';
+  import type {
+    MessageHierarchyItem,
+    MessageTag
+  } from '../../types/playground.js';
   import type {
     Interrupt,
     InterruptType,
@@ -49,9 +55,25 @@
     showTimestamp?: boolean;
     /** Callback to refresh messages after interrupt resolution */
     onResolved?: () => void;
-  }
-
-  let { interrupt: initialInterrupt, showTimestamp = true, onResolved }: Props = $props();
+    /**
+     * Hierarchy items forwarded from the parent playground message. Rendered
+     * as a chevron-separated trail in the footer.
+     */
+    hierarchy?: MessageHierarchyItem[];
+    /**
+     * Server-emitted tags forwarded from the parent playground message.
+     * Rendered as chips in the footer.
+     */
+    tags?: MessageTag[];
+  }
+
+  let {
+    interrupt: initialInterrupt,
+    showTimestamp = true,
+    onResolved,
+    hierarchy,
+    tags
+  }: Props = $props();
 
   /**
    * Get the current interrupt state from the store.
@@ -61,6 +83,11 @@
     getInterruptsMap().get(initialInterrupt.id) ?? addMachineState(initialInterrupt)
   );
 
+  const hierarchyItems = $derived(hierarchy ?? []);
+  const tagItems = $derived(tags ?? []);
+  const hasHierarchy = $derived(hierarchyItems.length > 0);
+  const hasTags = $derived(tagItems.length > 0);
+
   /**
    * Helper to ensure interrupt has machine state
    */
@@ -262,7 +289,7 @@
   <!-- Header -->
   <div class="interrupt-bubble__header">
     <span class="interrupt-bubble__type">
-      <Icon icon={getTypeIcon(currentInterrupt.type)} />
+      <Icon icon={getTypeIcon(currentInterrupt.type)} aria-hidden="true" />
       {#if isResolved}
         {currentInterrupt.machineState.status === 'cancelled'
           ? t.cancelled
@@ -274,9 +301,13 @@
       {/if}
     </span>
     {#if showTimestamp}
-      <span class="interrupt-bubble__timestamp">
+      <time
+        class="interrupt-bubble__timestamp"
+        datetime={currentInterrupt.resolvedAt ?? currentInterrupt.createdAt}
+        aria-label="sent at {formatTimestamp(currentInterrupt.resolvedAt ?? currentInterrupt.createdAt)}"
+      >
         {formatTimestamp(currentInterrupt.resolvedAt ?? currentInterrupt.createdAt)}
-      </span>
+      </time>
     {/if}
   </div>
 
@@ -349,17 +380,21 @@
   </div>
 
   <!-- Footer -->
-  {#if currentInterrupt.nodeId || (currentInterrupt.allowCancel && !isResolved && currentInterrupt.type !== 'confirmation')}
+  {#if currentInterrupt.nodeId || hasHierarchy || hasTags || (currentInterrupt.allowCancel && !isResolved && currentInterrupt.type !== 'confirmation')}
     <div class="interrupt-bubble__footer">
-      {#if currentInterrupt.nodeId}
-        <span
-          class="interrupt-bubble__node"
-          title={t.nodeIdTooltip({ id: currentInterrupt.nodeId })}
-        >
-          <Icon icon="mdi:graph" />
-          <span>{t.fromWorkflow}</span>
-        </span>
-      {/if}
+      <div class="interrupt-bubble__attribution">
+        {#if currentInterrupt.nodeId}
+          <span
+            class="interrupt-bubble__node"
+            title={t.nodeIdTooltip({ id: currentInterrupt.nodeId })}
+          >
+            <Icon icon="mdi:graph" aria-hidden="true" />
+            <span>{t.fromWorkflow}</span>
+          </span>
+        {/if}
+        <HierarchyTrail items={hierarchyItems} />
+        <MessageTagStrip tags={tagItems} />
+      </div>
       {#if currentInterrupt.allowCancel && !isResolved && currentInterrupt.type !== 'confirmation'}
         <button
           type="button"
@@ -367,7 +402,7 @@
           onclick={handleCancel}
           disabled={isSubmitting}
         >
-          <Icon icon="mdi:close" />
+          <Icon icon="mdi:close" aria-hidden="true" />
           <span>{t.cancel}</span>
         </button>
       {/if}
@@ -542,6 +577,7 @@
   /* Footer */
   .interrupt-bubble__footer {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
     gap: var(--fd-space-xs);
@@ -565,6 +601,15 @@
     border-top-color: var(--fd-interrupt-prompt-border-error);
   }
 
+  .interrupt-bubble__attribution {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--fd-space-xs);
+    min-width: 0;
+    flex: 1 1 auto;
+  }
+
   .interrupt-bubble__node {
     display: flex;
     align-items: center;
@@ -618,5 +663,19 @@
       padding-left: var(--fd-space-lg);
       padding-right: var(--fd-space-lg);
     }
+
+    .interrupt-bubble__cancel-btn {
+      min-height: 2.5rem;
+      padding: var(--fd-space-xs) var(--fd-space-md);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .interrupt-bubble {
+      animation: none;
+    }
+    .interrupt-bubble__cancel-btn {
+      transition: none;
+    }
   }
 </style>

package/dist/components/interrupt/InterruptBubble.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { MessageHierarchyItem, MessageTag } from '../../types/playground.js';
 import type { Interrupt } from '../../types/interrupt.js';
 import { type InterruptWithState } from '../../stores/interruptStore.svelte.js';
 /**
@@ -10,6 +11,16 @@ interface Props {
     showTimestamp?: boolean;
     /** Callback to refresh messages after interrupt resolution */
     onResolved?: () => void;
+    /**
+     * Hierarchy items forwarded from the parent playground message. Rendered
+     * as a chevron-separated trail in the footer.
+     */
+    hierarchy?: MessageHierarchyItem[];
+    /**
+     * Server-emitted tags forwarded from the parent playground message.
+     * Rendered as chips in the footer.
+     */
+    tags?: MessageTag[];
 }
 declare const InterruptBubble: import("svelte").Component<Props, {}, "">;
 type InterruptBubble = ReturnType<typeof InterruptBubble>;

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>