@flowdrop/flowdrop 1.5.0 → 1.6.0

package/dist/components/playground/ChatPanel.svelte

@@ -7,29 +7,29 @@
 -->
 
 <script lang="ts">
-  import Icon from "@iconify/svelte";
-  import { tick } from "svelte";
-  import MessageBubble from "./MessageBubble.svelte";
-  import { InterruptBubble } from "../interrupt/index.js";
-  import type { PlaygroundMessage } from "../../types/playground.js";
-  import { hasEnableRunFlag } from "../../types/playground.js";
+  import Icon from '@iconify/svelte';
+  import { tick } from 'svelte';
+  import MessageBubble from './MessageBubble.svelte';
+  import { InterruptBubble } from '../interrupt/index.js';
+  import type { PlaygroundMessage } from '../../types/playground.js';
+  import { hasEnableRunFlag } from '../../types/playground.js';
   import {
     isInterruptMetadata,
     extractInterruptMetadata,
-    metadataToInterrupt,
-  } from "../../types/interrupt.js";
+    metadataToInterrupt
+  } from '../../types/interrupt.js';
   import {
     getMessages,
     getChatMessages,
     getIsExecuting,
     getSessionStatus,
-    getCurrentSession,
-  } from "../../stores/playgroundStore.svelte.js";
+    getCurrentSession
+  } from '../../stores/playgroundStore.svelte.js';
   import {
     getInterruptsMap,
     interruptActions,
-    getInterruptByMessageId,
-  } from "../../stores/interruptStore.svelte.js";
+    getInterruptByMessageId
+  } from '../../stores/interruptStore.svelte.js';
 
   /**
    * Component props
@@ -78,7 +78,7 @@
   let {
     showTimestamps = true,
     autoScroll = true,
-    placeholder = "Type your message...",
+    placeholder = 'Type your message...',
     onSendMessage,
     onStopExecution,
     showLogsInline = false,
@@ -86,8 +86,8 @@
     onInterruptResolved,
     showChatInput = true,
     showRunButton = true,
-    predefinedMessage = "Run workflow",
-    compactSystemMessages = true,
+    predefinedMessage = 'Run workflow',
+    compactSystemMessages = true
   }: Props = $props();
 
   /**
@@ -104,7 +104,7 @@
   const noInputsAvailable = $derived(!showChatInput && !showRunButton);
 
   /** Input field value */
-  let inputValue = $state("");
+  let inputValue = $state('');
 
   /** Reference to the messages container for scrolling */
   let messagesContainer = $state<HTMLDivElement>();
@@ -115,9 +115,7 @@
   /**
    * Filter messages based on showLogsInline setting
    */
-  const displayMessages = $derived(
-    showLogsInline ? getMessages() : getChatMessages(),
-  );
+  const displayMessages = $derived(showLogsInline ? getMessages() : getChatMessages());
 
   /**
    * Track previous message count for detecting new messages.
@@ -151,11 +149,11 @@
     if (!activeElement) return false;
     // Check if active element is a form control inside the messages container
     const isFormControl =
-      activeElement.tagName === "INPUT" ||
-      activeElement.tagName === "TEXTAREA" ||
-      activeElement.tagName === "SELECT" ||
-      activeElement.tagName === "BUTTON" ||
-      activeElement.getAttribute("contenteditable") === "true";
+      activeElement.tagName === 'INPUT' ||
+      activeElement.tagName === 'TEXTAREA' ||
+      activeElement.tagName === 'SELECT' ||
+      activeElement.tagName === 'BUTTON' ||
+      activeElement.getAttribute('contenteditable') === 'true';
     return isFormControl && messagesContainer.contains(activeElement);
   }
 
@@ -163,9 +161,7 @@
    * Check if a message is an interrupt request
    */
   function isInterruptMessage(message: PlaygroundMessage): boolean {
-    return isInterruptMetadata(
-      message.metadata as Record<string, unknown> | undefined,
-    );
+    return isInterruptMetadata(message.metadata as Record<string, unknown> | undefined);
   }
 
   /**
@@ -188,14 +184,10 @@
       if (!existing) {
         // Extract and validate interrupt metadata
         const metadata = extractInterruptMetadata(
-          message.metadata as Record<string, unknown> | undefined,
+          message.metadata as Record<string, unknown> | undefined
         );
         if (metadata) {
-          const interrupt = metadataToInterrupt(
-            metadata,
-            message.id,
-            message.content,
-          );
+          const interrupt = metadataToInterrupt(metadata, message.id, message.content);
           interruptActions.addInterrupt(interrupt);
 
           // If the message status is 'completed', mark the interrupt as resolved
@@ -203,11 +195,8 @@
           // - "Confirmation Submitted" header
           // - Disabled buttons
           // - "Response submitted" indicator
-          if (message.status === "completed") {
-            interruptActions.resolveInterrupt(
-              interrupt.id,
-              metadata.response_value,
-            );
+          if (message.status === 'completed') {
+            interruptActions.resolveInterrupt(interrupt.id, metadata.response_value);
           }
         }
       }
@@ -222,8 +211,8 @@
     new Map(
       Array.from(getInterruptsMap().values())
         .filter((i) => i.messageId)
-        .map((i) => [i.messageId, i]),
-    ),
+        .map((i) => [i.messageId, i])
+    )
   );
 
   /**
@@ -236,16 +225,12 @@
   /**
    * Check if we should show the welcome state
    */
-  const showWelcome = $derived(
-    !getCurrentSession() && displayMessages.length === 0,
-  );
+  const showWelcome = $derived(!getCurrentSession() && displayMessages.length === 0);
 
   /**
    * Check if we should show the empty chat state (session exists but no messages)
    */
-  const showEmptyChat = $derived(
-    getCurrentSession() && displayMessages.length === 0,
-  );
+  const showEmptyChat = $derived(getCurrentSession() && displayMessages.length === 0);
 
   /**
    * Handle sending a message
@@ -257,11 +242,11 @@
     }
 
     onSendMessage?.(trimmedValue);
-    inputValue = "";
+    inputValue = '';
 
     // Reset textarea height
     if (inputField) {
-      inputField.style.height = "auto";
+      inputField.style.height = 'auto';
     }
 
     // Re-focus the input
@@ -274,7 +259,7 @@
    * Handle keyboard events in the input
    */
   function handleKeydown(event: KeyboardEvent): void {
-    if (event.key === "Enter" && !event.shiftKey) {
+    if (event.key === 'Enter' && !event.shiftKey) {
       event.preventDefault();
       handleSend();
     }
@@ -421,11 +406,7 @@
    */
   $effect(() => {
     const status = getSessionStatus();
-    if (
-      (status === "idle" || status === "completed") &&
-      inputField &&
-      !getIsExecuting()
-    ) {
+    if ((status === 'idle' || status === 'completed') && inputField && !getIsExecuting()) {
       tick().then(() => {
         inputField?.focus();
       });
@@ -449,7 +430,7 @@
    */
   function handleInput(): void {
     if (inputField) {
-      inputField.style.height = "auto";
+      inputField.style.height = 'auto';
       inputField.style.height = `${Math.min(inputField.scrollHeight, 120)}px`;
     }
   }
@@ -481,24 +462,9 @@
               stroke-width="2"
               stroke-linejoin="round"
             />
-            <path
-              d="M24 24V40"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linejoin="round"
-            />
-            <path
-              d="M16 12L32 20"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linejoin="round"
-            />
-            <path
-              d="M16 36L32 28"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linejoin="round"
-            />
+            <path d="M24 24V40" stroke="currentColor" stroke-width="2" stroke-linejoin="round" />
+            <path d="M16 12L32 20" stroke="currentColor" stroke-width="2" stroke-linejoin="round" />
+            <path d="M16 36L32 28" stroke="currentColor" stroke-width="2" stroke-linejoin="round" />
           </svg>
         </div>
         {#if noInputsAvailable}
@@ -511,9 +477,7 @@
           <p class="chat-panel__welcome-text">Test your flow with a prompt</p>
         {:else}
           <h2 class="chat-panel__welcome-title">Ready to run</h2>
-          <p class="chat-panel__welcome-text">
-            Click Run to execute your workflow
-          </p>
+          <p class="chat-panel__welcome-text">Click Run to execute your workflow</p>
         {/if}
       </div>
     {:else if showEmptyChat}
@@ -539,24 +503,9 @@
               stroke-width="2"
               stroke-linejoin="round"
             />
-            <path
-              d="M24 24V40"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linejoin="round"
-            />
-            <path
-              d="M16 12L32 20"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linejoin="round"
-            />
-            <path
-              d="M16 36L32 28"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linejoin="round"
-            />
+            <path d="M24 24V40" stroke="currentColor" stroke-width="2" stroke-linejoin="round" />
+            <path d="M16 12L32 20" stroke="currentColor" stroke-width="2" stroke-linejoin="round" />
+            <path d="M16 36L32 28" stroke="currentColor" stroke-width="2" stroke-linejoin="round" />
           </svg>
         </div>
         {#if noInputsAvailable}
@@ -569,9 +518,7 @@
           <p class="chat-panel__welcome-text">Test your flow with a prompt</p>
         {:else}
           <h2 class="chat-panel__welcome-title">Ready to run</h2>
-          <p class="chat-panel__welcome-text">
-            Click Run to execute your workflow
-          </p>
+          <p class="chat-panel__welcome-text">Click Run to execute your workflow</p>
         {/if}
       </div>
     {:else}
@@ -617,8 +564,7 @@
       <!-- No inputs available - show informational message -->
       <div class="chat-panel__no-inputs">
         <Icon icon="mdi:information-outline" />
-        <span>View-only mode. Workflow execution is controlled externally.</span
-        >
+        <span>View-only mode. Workflow execution is controlled externally.</span>
       </div>
     {:else}
       <div
@@ -640,7 +586,7 @@
           </div>
         {/if}
 
-        {#if getSessionStatus() === "running" || getIsExecuting()}
+        {#if getSessionStatus() === 'running' || getIsExecuting()}
           <button
             type="button"
             class="chat-panel__stop-btn"
@@ -666,9 +612,7 @@
             class="chat-panel__run-btn"
             onclick={handleRun}
             disabled={!runEnabled}
-            title={runEnabled
-              ? "Run workflow"
-              : "Waiting for workflow to be ready..."}
+            title={runEnabled ? 'Run workflow' : 'Waiting for workflow to be ready...'}
           >
             <Icon icon="mdi:play" />
             Run

package/dist/components/playground/ExecutionLogs.svelte

@@ -7,13 +7,10 @@
 -->
 
 <script lang="ts">
-  import Icon from "@iconify/svelte";
-  import { slide } from "svelte/transition";
-  import type {
-    PlaygroundMessage,
-    PlaygroundMessageLevel,
-  } from "../../types/playground.js";
-  import { getLogMessages } from "../../stores/playgroundStore.svelte.js";
+  import Icon from '@iconify/svelte';
+  import { slide } from 'svelte/transition';
+  import type { PlaygroundMessage, PlaygroundMessageLevel } from '../../types/playground.js';
+  import { getLogMessages } from '../../stores/playgroundStore.svelte.js';
 
   /**
    * Component props
@@ -27,14 +24,10 @@
     onToggle?: (expanded: boolean) => void;
   }
 
-  let {
-    isExpanded = $bindable(false),
-    maxHeight = "300px",
-    onToggle,
-  }: Props = $props();
+  let { isExpanded = $bindable(false), maxHeight = '300px', onToggle }: Props = $props();
 
   /** Current log level filter */
-  let levelFilter = $state<PlaygroundMessageLevel | "all">("all");
+  let levelFilter = $state<PlaygroundMessageLevel | 'all'>('all');
 
   /** Reference to logs container for auto-scroll */
   let logsContainer = $state<HTMLDivElement>();
@@ -43,9 +36,9 @@
    * Filter logs based on selected level
    */
   const filteredLogs = $derived(
-    levelFilter === "all"
+    levelFilter === 'all'
       ? getLogMessages()
-      : getLogMessages().filter((log) => log.metadata?.level === levelFilter),
+      : getLogMessages().filter((log) => log.metadata?.level === levelFilter)
   );
 
   /**
@@ -53,11 +46,10 @@
    */
   const logCounts = $derived({
     all: getLogMessages().length,
-    info: getLogMessages().filter((l) => l.metadata?.level === "info").length,
-    warning: getLogMessages().filter((l) => l.metadata?.level === "warning")
-      .length,
-    error: getLogMessages().filter((l) => l.metadata?.level === "error").length,
-    debug: getLogMessages().filter((l) => l.metadata?.level === "debug").length,
+    info: getLogMessages().filter((l) => l.metadata?.level === 'info').length,
+    warning: getLogMessages().filter((l) => l.metadata?.level === 'warning').length,
+    error: getLogMessages().filter((l) => l.metadata?.level === 'error').length,
+    debug: getLogMessages().filter((l) => l.metadata?.level === 'debug').length
   });
 
   /**
@@ -73,12 +65,12 @@
    */
   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",
-      fractionalSecondDigits: 3,
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+      fractionalSecondDigits: 3
     });
   }
 
@@ -87,14 +79,14 @@
    */
   function getLevelIcon(level: PlaygroundMessageLevel | undefined): string {
     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';
     }
   }
 
@@ -105,15 +97,15 @@
     const logText = filteredLogs
       .map(
         (log) =>
-          `[${formatTimestamp(log.timestamp)}] [${(log.metadata?.level ?? "info").toUpperCase()}] ${log.content}${log.nodeId ? ` (Node: ${log.nodeId})` : ""}`,
+          `[${formatTimestamp(log.timestamp)}] [${(log.metadata?.level ?? 'info').toUpperCase()}] ${log.content}${log.nodeId ? ` (Node: ${log.nodeId})` : ''}`
       )
-      .join("\n");
+      .join('\n');
 
-    const blob = new Blob([logText], { type: "text/plain" });
+    const blob = new Blob([logText], { type: 'text/plain' });
     const url = URL.createObjectURL(blob);
-    const link = document.createElement("a");
+    const link = document.createElement('a');
     link.href = url;
-    link.download = `playground-logs-${new Date().toISOString().split("T")[0]}.txt`;
+    link.download = `playground-logs-${new Date().toISOString().split('T')[0]}.txt`;
     link.click();
     URL.revokeObjectURL(url);
   }
@@ -143,21 +135,16 @@
         <span class="execution-logs__badge">{logCounts.all}</span>
       {/if}
       {#if logCounts.error > 0}
-        <span class="execution-logs__badge execution-logs__badge--error"
-          >{logCounts.error}</span
-        >
+        <span class="execution-logs__badge execution-logs__badge--error">{logCounts.error}</span>
       {/if}
       {#if logCounts.warning > 0}
-        <span class="execution-logs__badge execution-logs__badge--warning"
-          >{logCounts.warning}</span
+        <span class="execution-logs__badge execution-logs__badge--warning">{logCounts.warning}</span
         >
       {/if}
     </div>
     <Icon
       icon="mdi:chevron-down"
-      class="execution-logs__chevron {isExpanded
-        ? 'execution-logs__chevron--expanded'
-        : ''}"
+      class="execution-logs__chevron {isExpanded ? 'execution-logs__chevron--expanded' : ''}"
     />
   </button>
 
@@ -170,32 +157,32 @@
           <button
             type="button"
             class="execution-logs__filter"
-            class:execution-logs__filter--active={levelFilter === "all"}
-            onclick={() => (levelFilter = "all")}
+            class:execution-logs__filter--active={levelFilter === 'all'}
+            onclick={() => (levelFilter = 'all')}
           >
             All ({logCounts.all})
           </button>
           <button
             type="button"
             class="execution-logs__filter execution-logs__filter--info"
-            class:execution-logs__filter--active={levelFilter === "info"}
-            onclick={() => (levelFilter = "info")}
+            class:execution-logs__filter--active={levelFilter === 'info'}
+            onclick={() => (levelFilter = 'info')}
           >
             Info ({logCounts.info})
           </button>
           <button
             type="button"
             class="execution-logs__filter execution-logs__filter--warning"
-            class:execution-logs__filter--active={levelFilter === "warning"}
-            onclick={() => (levelFilter = "warning")}
+            class:execution-logs__filter--active={levelFilter === 'warning'}
+            onclick={() => (levelFilter = 'warning')}
           >
             Warning ({logCounts.warning})
           </button>
           <button
             type="button"
             class="execution-logs__filter execution-logs__filter--error"
-            class:execution-logs__filter--active={levelFilter === "error"}
-            onclick={() => (levelFilter = "error")}
+            class:execution-logs__filter--active={levelFilter === 'error'}
+            onclick={() => (levelFilter = 'error')}
           >
             Error ({logCounts.error})
           </button>
@@ -212,11 +199,7 @@
       </div>
 
       <!-- Logs List -->
-      <div
-        class="execution-logs__list"
-        bind:this={logsContainer}
-        style="max-height: {maxHeight}"
-      >
+      <div class="execution-logs__list" bind:this={logsContainer} style="max-height: {maxHeight}">
         {#if filteredLogs.length === 0}
           <div class="execution-logs__empty">
             <Icon icon="mdi:file-document-outline" />
@@ -226,12 +209,9 @@
           {#each filteredLogs as log (log.id)}
             <div
               class="execution-logs__entry"
-              class:execution-logs__entry--error={log.metadata?.level ===
-                "error"}
-              class:execution-logs__entry--warning={log.metadata?.level ===
-                "warning"}
-              class:execution-logs__entry--debug={log.metadata?.level ===
-                "debug"}
+              class:execution-logs__entry--error={log.metadata?.level === 'error'}
+              class:execution-logs__entry--warning={log.metadata?.level === 'warning'}
+              class:execution-logs__entry--debug={log.metadata?.level === 'debug'}
             >
               <span class="execution-logs__entry-time">
                 {formatTimestamp(log.timestamp)}
@@ -243,10 +223,7 @@
                 {log.content}
               </span>
               {#if log.nodeId}
-                <span
-                  class="execution-logs__entry-node"
-                  title="Node: {log.nodeId}"
-                >
+                <span class="execution-logs__entry-node" title="Node: {log.nodeId}">
                   {log.metadata?.nodeLabel ?? log.nodeId}
                 </span>
               {/if}