@flowdrop/flowdrop 1.12.0 → 1.14.0

package/dist/components/playground/ChatBubble.svelte

@@ -0,0 +1,287 @@
+<!--
+  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

@@ -58,23 +58,27 @@
   let runEnabled = $state(true);
 
   let inputValue = $state('');
-  let inputField: HTMLTextAreaElement | undefined;
+  let inputField: HTMLTextAreaElement | undefined = $state();
 
   // 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;
+    const count = getMessages().filter((m) => hasEnableRunFlag(m.metadata)).length;
     if (count > seenEnableRunCount) {
-      untrack(() => { seenEnableRunCount = count; });
+      untrack(() => {
+        seenEnableRunCount = count;
+      });
       runEnabled = true;
     }
   });
 
   $effect(() => {
     if (getCurrentSession()?.id) {
-      untrack(() => { seenEnableRunCount = 0; });
+      untrack(() => {
+        seenEnableRunCount = 0;
+      });
       runEnabled = true;
     }
   });
@@ -87,7 +91,9 @@
     if (wasExecuting && !nowExecuting && inputField) {
       tick().then(() => inputField?.focus({ preventScroll: true }));
     }
-    untrack(() => { wasExecuting = nowExecuting; });
+    untrack(() => {
+      wasExecuting = nowExecuting;
+    });
   });
 
   function handleSend(): void {

package/dist/components/playground/ControlPanel.svelte

@@ -159,35 +159,37 @@
           </button>
           {#if getSessions().length > 0}
             <div class="control-panel__session-popover-divider"></div>
-            {#each getSessions() as session (session.id)}
-              {@const isActive = getCurrentSession()?.id === session.id}
-              <div class="control-panel__session-popover-row">
-                <button
-                  type="button"
-                  role="menuitem"
-                  class="control-panel__session-popover-item"
-                  class:control-panel__session-popover-item--active={isActive}
-                  onclick={() => handleSelect(session.id)}
-                >
-                  {#if isActive}
-                    <Icon icon="mdi:check" class="control-panel__session-popover-check" />
-                  {:else}
-                    <Icon icon="mdi:message-outline" />
-                  {/if}
-                  <span>{session.name}</span>
-                </button>
-                <button
-                  type="button"
-                  role="menuitem"
-                  class="control-panel__session-popover-delete"
-                  onclick={(e) => handleDelete(e, session.id)}
-                  title={cp.deleteSession}
-                  aria-label={cp.deleteSession}
-                >
-                  <Icon icon="mdi:delete-outline" />
-                </button>
-              </div>
-            {/each}
+            <div class="control-panel__session-popover-list">
+              {#each getSessions() as session (session.id)}
+                {@const isActive = getCurrentSession()?.id === session.id}
+                <div class="control-panel__session-popover-row">
+                  <button
+                    type="button"
+                    role="menuitem"
+                    class="control-panel__session-popover-item"
+                    class:control-panel__session-popover-item--active={isActive}
+                    onclick={() => handleSelect(session.id)}
+                  >
+                    {#if isActive}
+                      <Icon icon="mdi:check" class="control-panel__session-popover-check" />
+                    {:else}
+                      <Icon icon="mdi:message-outline" />
+                    {/if}
+                    <span>{session.name}</span>
+                  </button>
+                  <button
+                    type="button"
+                    role="menuitem"
+                    class="control-panel__session-popover-delete"
+                    onclick={(e) => handleDelete(e, session.id)}
+                    title={cp.deleteSession}
+                    aria-label={cp.deleteSession}
+                  >
+                    <Icon icon="mdi:delete-outline" />
+                  </button>
+                </div>
+              {/each}
+            </div>
           {/if}
         </div>
       {/if}
@@ -333,6 +335,9 @@
     z-index: 50;
     min-width: 220px;
     max-width: 300px;
+    max-height: min(60vh, 420px);
+    display: flex;
+    flex-direction: column;
     padding: var(--fd-space-xs);
     background-color: var(--fd-background);
     border: 1px solid var(--fd-border);
@@ -344,6 +349,13 @@
     height: 1px;
     background-color: var(--fd-border-muted);
     margin: var(--fd-space-xs) 0;
+    flex-shrink: 0;
+  }
+
+  .control-panel__session-popover-list {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
   }
 
   .control-panel__session-popover-row {
@@ -396,6 +408,7 @@
     color: var(--fd-primary);
     font-weight: 500;
     width: 100%;
+    flex: 0 0 auto;
   }
 
   .control-panel__session-popover-item--new :global(svg) {

package/dist/components/playground/ExecutionConsole.svelte

@@ -22,6 +22,8 @@
     onInterruptResolved?: () => void;
     /** Optional callback that, when provided, shows a "New session" CTA in the welcome state */
     onCreateSession?: () => void;
+    /** Called when the user scrolls near the top to load older messages */
+    onLoadOlder?: () => void | Promise<void>;
   }
 
   let {
@@ -31,7 +33,8 @@
     allowLogs = true,
     compactSystemMessages = true,
     onInterruptResolved,
-    onCreateSession
+    onCreateSession,
+    onLoadOlder
   }: Props = $props();
 
   const ec = $derived(m().playground.executionConsole);
@@ -50,6 +53,7 @@
     {allowLogs}
     {compactSystemMessages}
     {onInterruptResolved}
+    {onLoadOlder}
     welcome={welcomeState}
     emptySession={readyState}
   />

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

@@ -8,6 +8,8 @@ interface Props {
     onInterruptResolved?: () => void;
     /** Optional callback that, when provided, shows a "New session" CTA in the welcome state */
     onCreateSession?: () => void;
+    /** Called when the user scrolls near the top to load older messages */
+    onLoadOlder?: () => void | Promise<void>;
 }
 declare const ExecutionConsole: import("svelte").Component<Props, {}, "">;
 type ExecutionConsole = ReturnType<typeof ExecutionConsole>;

package/dist/components/playground/ExecutionList.svelte

@@ -119,8 +119,13 @@
   }
 
   @keyframes pulse {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.4; }
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.4;
+    }
   }
 
   :global(.execution-list__status-icon) {

package/dist/components/playground/HierarchyTrail.svelte

@@ -0,0 +1,88 @@
+<!--
+  HierarchyTrail Component
+
+  Renders a chevron-separated path of MessageHierarchyItem entries. The
+  path is a *display*, not a list users navigate, so the SR announcement
+  comes entirely from the wrapper's aria-label (built from the labels of
+  the items themselves) and the visible chips are hidden from AT to avoid
+  the path being announced twice.
+-->
+
+<script lang="ts">
+  import Icon from '@iconify/svelte';
+  import type { MessageHierarchyItem } from '../../types/playground.js';
+  import { m } from '../../messages/index.js';
+
+  interface Props {
+    items: MessageHierarchyItem[];
+  }
+
+  let { items }: Props = $props();
+
+  const ariaLabel = $derived.by(() => {
+    const path = items.map((i) => i.label).join(' / ');
+    return m().playground.messageAnnotations.hierarchyOf({ path });
+  });
+</script>
+
+{#if items.length > 0}
+  <span class="hierarchy-trail" aria-label={ariaLabel}>
+    {#each items as item (item.id)}
+      <span class="hierarchy-trail__item" aria-hidden="true">
+        {#if item.icon}
+          <Icon icon={item.icon} class="hierarchy-trail__icon" />
+        {/if}
+        <span class="hierarchy-trail__label">{item.label}</span>
+      </span>
+    {/each}
+  </span>
+{/if}
+
+<style>
+  .hierarchy-trail {
+    display: inline-flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--fd-space-3xs);
+    font-size: var(--fd-text-2xs);
+    color: var(--fd-muted-foreground);
+    min-width: 0;
+  }
+
+  .hierarchy-trail__item {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--fd-space-3xs);
+    min-width: 0;
+  }
+
+  /* Chevron separator between items, drawn as a pseudo-element so it
+     doesn't enter the markup (and so it never appears to AT — the items
+     are already aria-hidden, but belt-and-braces). U+203A SINGLE
+     RIGHT-POINTING ANGLE QUOTATION MARK matches mdi:chevron-right
+     closely enough without a second iconify dependency. */
+  .hierarchy-trail__item:not(:last-child)::after {
+    content: '\203A';
+    margin-inline-start: var(--fd-space-3xs);
+    opacity: 0.5;
+  }
+
+  .hierarchy-trail__label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 8rem;
+  }
+
+  @media (max-width: 640px) {
+    .hierarchy-trail__label {
+      max-width: 5rem;
+    }
+  }
+
+  .hierarchy-trail :global(.hierarchy-trail__icon) {
+    flex-shrink: 0;
+    font-size: 0.875em;
+    opacity: 0.7;
+  }
+</style>

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

@@ -0,0 +1,7 @@
+import type { MessageHierarchyItem } from '../../types/playground.js';
+interface Props {
+    items: MessageHierarchyItem[];
+}
+declare const HierarchyTrail: import("svelte").Component<Props, {}, "">;
+type HierarchyTrail = ReturnType<typeof HierarchyTrail>;
+export default HierarchyTrail;