@flowdrop/flowdrop 1.5.0 → 1.7.0

package/dist/components/playground/InputCollector.svelte

@@ -7,13 +7,10 @@
 -->
 
 <script lang="ts">
-  import Icon from "@iconify/svelte";
-  import { slide } from "svelte/transition";
-  import type { PlaygroundInputField } from "../../types/playground.js";
-  import {
-    getInputFields,
-    getHasChatInput,
-  } from "../../stores/playgroundStore.svelte.js";
+  import Icon from '@iconify/svelte';
+  import { slide } from 'svelte/transition';
+  import type { PlaygroundInputField } from '../../types/playground.js';
+  import { getInputFields, getHasChatInput } from '../../stores/playgroundStore.svelte.js';
 
   /**
    * Component props
@@ -33,7 +30,7 @@
     isExpanded = $bindable(true),
     onToggle,
     values = $bindable({}),
-    onValuesChange,
+    onValuesChange
   }: Props = $props();
 
   /** Flag to track if we've initialized default values */
@@ -53,8 +50,7 @@
 
       getInputFields().forEach((field) => {
         if (field.defaultValue !== undefined) {
-          initialValues[`${field.nodeId}:${field.fieldId}`] =
-            field.defaultValue;
+          initialValues[`${field.nodeId}:${field.fieldId}`] = field.defaultValue;
           hasDefaults = true;
         }
       });
@@ -88,24 +84,24 @@
    */
   function getValue(field: PlaygroundInputField): unknown {
     const key = `${field.nodeId}:${field.fieldId}`;
-    return values[key] ?? field.defaultValue ?? "";
+    return values[key] ?? field.defaultValue ?? '';
   }
 
   /**
    * Get input type from field schema
    */
   function getInputType(field: PlaygroundInputField): string {
-    if (field.schema?.format === "multiline") {
-      return "textarea";
+    if (field.schema?.format === 'multiline') {
+      return 'textarea';
     }
     switch (field.type) {
-      case "number":
-      case "integer":
-        return "number";
-      case "boolean":
-        return "checkbox";
+      case 'number':
+      case 'integer':
+        return 'number';
+      case 'boolean':
+        return 'checkbox';
       default:
-        return "text";
+        return 'text';
     }
   }
 
@@ -147,34 +143,24 @@
       </div>
       <Icon
         icon="mdi:chevron-down"
-        class="input-collector__chevron {isExpanded
-          ? 'input-collector__chevron--expanded'
-          : ''}"
+        class="input-collector__chevron {isExpanded ? 'input-collector__chevron--expanded' : ''}"
       />
     </button>
 
     <!-- Content -->
     {#if isExpanded}
-      <div
-        class="input-collector__content"
-        transition:slide={{ duration: 200 }}
-      >
+      <div class="input-collector__content" transition:slide={{ duration: 200 }}>
         {#if getHasChatInput()}
           <div class="input-collector__hint">
             <Icon icon="mdi:information-outline" />
-            <span
-              >Chat input will be collected from the message field below</span
-            >
+            <span>Chat input will be collected from the message field below</span>
           </div>
         {/if}
 
         <div class="input-collector__fields">
-          {#each getInputFields() as field (field.nodeId + ":" + field.fieldId)}
+          {#each getInputFields() as field (field.nodeId + ':' + field.fieldId)}
             <div class="input-collector__field">
-              <label
-                class="input-collector__label"
-                for="input-{field.nodeId}-{field.fieldId}"
-              >
+              <label class="input-collector__label" for="input-{field.nodeId}-{field.fieldId}">
                 {field.label}
                 {#if field.required}
                   <span class="input-collector__required">*</span>
@@ -194,18 +180,17 @@
                     <option value={String(option)}>{option}</option>
                   {/each}
                 </select>
-              {:else if getInputType(field) === "textarea"}
+              {:else if getInputType(field) === 'textarea'}
                 <!-- Textarea for multiline -->
                 <textarea
                   id="input-{field.nodeId}-{field.fieldId}"
                   class="input-collector__textarea"
-                  placeholder={field.schema?.description ??
-                    `Enter ${field.label}`}
-                  value={String(getValue(field) ?? "")}
+                  placeholder={field.schema?.description ?? `Enter ${field.label}`}
+                  value={String(getValue(field) ?? '')}
                   oninput={(e) => updateValue(field, e.currentTarget.value)}
                   rows="3"
                 ></textarea>
-              {:else if getInputType(field) === "checkbox"}
+              {:else if getInputType(field) === 'checkbox'}
                 <!-- Checkbox for boolean -->
                 <label class="input-collector__checkbox-wrapper">
                   <input
@@ -213,26 +198,23 @@
                     type="checkbox"
                     class="input-collector__checkbox"
                     checked={Boolean(getValue(field))}
-                    onchange={(e) =>
-                      updateValue(field, e.currentTarget.checked)}
+                    onchange={(e) => updateValue(field, e.currentTarget.checked)}
                   />
                   <span class="input-collector__checkbox-label">
-                    {field.schema?.description ?? "Enable"}
+                    {field.schema?.description ?? 'Enable'}
                   </span>
                 </label>
-              {:else if getInputType(field) === "number"}
+              {:else if getInputType(field) === 'number'}
                 <!-- Number input -->
                 <input
                   id="input-{field.nodeId}-{field.fieldId}"
                   type="number"
                   class="input-collector__input"
-                  placeholder={field.schema?.description ??
-                    `Enter ${field.label}`}
+                  placeholder={field.schema?.description ?? `Enter ${field.label}`}
                   value={Number(getValue(field) ?? 0)}
                   min={field.schema?.minimum}
                   max={field.schema?.maximum}
-                  oninput={(e) =>
-                    updateValue(field, parseFloat(e.currentTarget.value) || 0)}
+                  oninput={(e) => updateValue(field, parseFloat(e.currentTarget.value) || 0)}
                 />
               {:else}
                 <!-- Text input (default) -->
@@ -240,14 +222,13 @@
                   id="input-{field.nodeId}-{field.fieldId}"
                   type="text"
                   class="input-collector__input"
-                  placeholder={field.schema?.description ??
-                    `Enter ${field.label}`}
-                  value={String(getValue(field) ?? "")}
+                  placeholder={field.schema?.description ?? `Enter ${field.label}`}
+                  value={String(getValue(field) ?? '')}
                   oninput={(e) => updateValue(field, e.currentTarget.value)}
                 />
               {/if}
 
-              {#if field.schema?.description && getInputType(field) !== "checkbox"}
+              {#if field.schema?.description && getInputType(field) !== 'checkbox'}
                 <p class="input-collector__description">
                   {field.schema.description}
                 </p>

package/dist/components/playground/MessageBubble.stories.svelte

@@ -1,14 +1,14 @@
 <script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-  import MessageBubble from "./MessageBubble.svelte";
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import MessageBubble from './MessageBubble.svelte';
 
   const { Story } = defineMeta({
-    title: "Playground/MessageBubble",
+    title: 'Playground/MessageBubble',
     component: MessageBubble,
-    tags: ["autodocs"],
+    tags: ['autodocs'],
     parameters: {
-      layout: "padded",
-    },
+      layout: 'padded'
+    }
   });
 </script>
 
@@ -16,11 +16,11 @@
   name="User Message"
   args={{
     message: {
-      id: "msg-1",
-      role: "user",
-      content: "Can you process this workflow for me?",
-      timestamp: new Date().toISOString(),
-    },
+      id: 'msg-1',
+      role: 'user',
+      content: 'Can you process this workflow for me?',
+      timestamp: new Date().toISOString()
+    }
   }}
 />
 
@@ -28,12 +28,12 @@
   name="Assistant Message"
   args={{
     message: {
-      id: "msg-2",
-      role: "assistant",
+      id: 'msg-2',
+      role: 'assistant',
       content:
         "I've processed the workflow successfully. Here are the results:\n\n- **Step 1**: Data validated\n- **Step 2**: Transformation applied\n- **Step 3**: Output generated\n\nAll checks passed.",
-      timestamp: new Date().toISOString(),
-    },
+      timestamp: new Date().toISOString()
+    }
   }}
 />
 
@@ -41,11 +41,11 @@
   name="System Message"
   args={{
     message: {
-      id: "msg-3",
-      role: "system",
-      content: "Workflow execution started",
-      timestamp: new Date().toISOString(),
-    },
+      id: 'msg-3',
+      role: 'system',
+      content: 'Workflow execution started',
+      timestamp: new Date().toISOString()
+    }
   }}
 />
 
@@ -53,10 +53,10 @@
   name="Log Message"
   args={{
     message: {
-      id: "msg-4",
-      role: "log",
-      content: "[INFO] Processing node: data-transform-1",
-      timestamp: new Date().toISOString(),
-    },
+      id: 'msg-4',
+      role: 'log',
+      content: '[INFO] Processing node: data-transform-1',
+      timestamp: new Date().toISOString()
+    }
   }}
 />

package/dist/components/playground/MessageBubble.stories.svelte.d.ts

@@ -11,7 +11,7 @@ declare const MessageBubble: $$__sveltets_2_IsomorphicComponent<{
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-import MessageBubble from "./MessageBubble.svelte";
+import MessageBubble from './MessageBubble.svelte';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/components/playground/MessageBubble.svelte

@@ -9,14 +9,14 @@
 -->
 
 <script lang="ts">
-  import Icon from "@iconify/svelte";
-  import { marked } from "marked";
-  import { sanitizeHtml } from "../../utils/sanitize.js";
+  import Icon from '@iconify/svelte';
+  import { marked } from 'marked';
+  import { sanitizeHtml } from '../../utils/sanitize.js';
   import type {
     PlaygroundMessage,
     PlaygroundMessageMetadata,
-    PlaygroundMessageRole,
-  } from "../../types/playground.js";
+    PlaygroundMessageRole
+  } from '../../types/playground.js';
 
   /**
    * Component props
@@ -44,24 +44,22 @@
     showTimestamp = true,
     isLast = false,
     enableMarkdown = true,
-    compactSystemMessages = true,
+    compactSystemMessages = true
   }: Props = $props();
 
   /**
    * Determine if this message should render in compact mode.
    * Only system messages use compact mode when enabled.
    */
-  const useCompactMode = $derived(
-    message.role === "system" && compactSystemMessages,
-  );
+  const useCompactMode = $derived(message.role === 'system' && compactSystemMessages);
 
   /**
    * Render content as markdown or plain text
    */
   const renderedContent = $derived(
-    enableMarkdown && message.role !== "log"
-      ? sanitizeHtml(marked.parse(message.content || "") as string)
-      : message.content,
+    enableMarkdown && message.role !== 'log'
+      ? sanitizeHtml(marked.parse(message.content || '') as string)
+      : message.content
   );
 
   /**
@@ -72,16 +70,16 @@
    */
   function getRoleIcon(role: PlaygroundMessageRole): string {
     switch (role) {
-      case "user":
-        return "mdi:account";
-      case "assistant":
-        return "mdi:robot";
-      case "system":
-        return "mdi:cog";
-      case "log":
-        return "mdi:console";
+      case 'user':
+        return 'mdi:account';
+      case 'assistant':
+        return 'mdi:robot';
+      case 'system':
+        return 'mdi:cog';
+      case 'log':
+        return 'mdi:console';
       default:
-        return "mdi:message";
+        return 'mdi:message';
     }
   }
 
@@ -92,21 +90,18 @@
    * @param metadata - Optional message metadata containing userName for user messages
    * @returns Display label
    */
-  function getRoleLabel(
-    role: PlaygroundMessageRole,
-    metadata?: PlaygroundMessageMetadata,
-  ): string {
+  function getRoleLabel(role: PlaygroundMessageRole, metadata?: PlaygroundMessageMetadata): string {
     switch (role) {
-      case "user":
-        return metadata?.userName ?? "You";
-      case "assistant":
-        return "Assistant";
-      case "system":
-        return "System";
-      case "log":
-        return metadata?.nodeLabel ?? "Log";
+      case 'user':
+        return metadata?.userName ?? 'You';
+      case 'assistant':
+        return 'Assistant';
+      case 'system':
+        return 'System';
+      case 'log':
+        return metadata?.nodeLabel ?? 'Log';
       default:
-        return "Message";
+        return 'Message';
     }
   }
 
@@ -118,11 +113,11 @@
    */
   function formatTimestamp(timestamp: string): string {
     const date = new Date(timestamp);
-    return date.toLocaleTimeString("en-US", {
+    return date.toLocaleTimeString('en-US', {
       hour12: false,
-      hour: "2-digit",
-      minute: "2-digit",
-      second: "2-digit",
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit'
     });
   }
 
@@ -132,14 +127,14 @@
   function getLogLevelIcon(): string {
     const level = message.metadata?.level;
     switch (level) {
-      case "error":
-        return "mdi:alert-circle";
-      case "warning":
-        return "mdi:alert";
-      case "debug":
-        return "mdi:bug";
+      case 'error':
+        return 'mdi:alert-circle';
+      case 'warning':
+        return 'mdi:alert';
+      case 'debug':
+        return 'mdi:bug';
       default:
-        return "mdi:information";
+        return 'mdi:information';
     }
   }
 
@@ -160,22 +155,19 @@
     <Icon icon="mdi:information-outline" class="system-notice__icon" />
     <span class="system-notice__text">{message.content}</span>
     {#if showTimestamp}
-      <span class="system-notice__timestamp"
-        >{formatTimestamp(message.timestamp)}</span
-      >
+      <span class="system-notice__timestamp">{formatTimestamp(message.timestamp)}</span>
     {/if}
   </div>
 {:else}
   <div
     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--log={message.role === "log"}
-    class:message-bubble--log-error={message.role === "log" &&
-      message.metadata?.level === "error"}
-    class:message-bubble--log-warning={message.role === "log" &&
-      message.metadata?.level === "warning"}
+    class:message-bubble--user={message.role === 'user'}
+    class:message-bubble--assistant={message.role === 'assistant'}
+    class:message-bubble--system={message.role === 'system'}
+    class:message-bubble--log={message.role === 'log'}
+    class:message-bubble--log-error={message.role === 'log' && message.metadata?.level === 'error'}
+    class:message-bubble--log-warning={message.role === 'log' &&
+      message.metadata?.level === 'warning'}
     class:message-bubble--last={isLast}
   >
     <!-- Avatar / Icon -->
@@ -187,28 +179,23 @@
     <div class="message-bubble__content">
       <!-- Header -->
       <div class="message-bubble__header">
-        <span class="message-bubble__role"
-          >{getRoleLabel(message.role, message.metadata)}</span
-        >
-        {#if message.role === "log" && message.metadata?.level}
+        <span class="message-bubble__role">{getRoleLabel(message.role, message.metadata)}</span>
+        {#if message.role === 'log' && message.metadata?.level}
           <span
-            class="message-bubble__log-level message-bubble__log-level--{message
-              .metadata.level}"
+            class="message-bubble__log-level message-bubble__log-level--{message.metadata.level}"
           >
             <Icon icon={getLogLevelIcon()} />
             {message.metadata.level.toUpperCase()}
           </span>
         {/if}
         {#if showTimestamp}
-          <span class="message-bubble__timestamp"
-            >{formatTimestamp(message.timestamp)}</span
-          >
+          <span class="message-bubble__timestamp">{formatTimestamp(message.timestamp)}</span>
         {/if}
       </div>
 
       <!-- Message Text -->
       <div class="message-bubble__text">
-        {#if enableMarkdown && message.role !== "log"}
+        {#if enableMarkdown && message.role !== 'log'}
           <!-- Markdown content - sanitized with DOMPurify to prevent XSS -->
           <!-- eslint-disable-next-line svelte/no-at-html-tags -->
           {@html renderedContent}
@@ -221,10 +208,7 @@
       {#if message.metadata?.duration !== undefined || message.nodeId}
         <div class="message-bubble__footer">
           {#if message.nodeId}
-            <span
-              class="message-bubble__node"
-              title="Node ID: {message.nodeId}"
-            >
+            <span class="message-bubble__node" title="Node ID: {message.nodeId}">
               <Icon icon="mdi:graph" />
               {message.metadata?.nodeLabel ?? message.nodeId}
             </span>

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

@@ -1,4 +1,4 @@
-import type { PlaygroundMessage } from "../../types/playground.js";
+import type { PlaygroundMessage } from '../../types/playground.js';
 /**
  * Component props
  */