@flowdrop/flowdrop 1.8.1 → 1.10.0

package/dist/components/playground/MessageBubble.svelte

@@ -153,23 +153,50 @@
 
 {#if useCompactMode}
   <!-- Compact system message: minimal inline text without bubble -->
-  <div class="system-notice" class:system-notice--last={isLast}>
-    <Icon icon="mdi:information-outline" class="system-notice__icon" />
+  <div
+    class="system-notice"
+    class:system-notice--last={isLast}
+    class:system-notice--warning={message.metadata?.level === 'warning'}
+    class:system-notice--error={message.metadata?.level === 'error'}
+    class:system-notice--debug={message.metadata?.level === 'debug'}
+  >
+    <Icon icon={getLogLevelIcon()} class="system-notice__icon" />
+    {#if message.metadata?.source}
+      <span class="system-notice__source">{message.metadata.source}</span>
+    {/if}
     <span class="system-notice__text">{message.content}</span>
     {#if showTimestamp}
       <span class="system-notice__timestamp">{formatTimestamp(message.timestamp)}</span>
     {/if}
   </div>
+{:else if message.role === 'log'}
+  <!-- Compact log row: terminal-style entry, visually distinct from chat bubbles -->
+  <div
+    class="log-row"
+    class:log-row--error={message.metadata?.level === 'error'}
+    class:log-row--warning={message.metadata?.level === 'warning'}
+    class:log-row--debug={message.metadata?.level === 'debug'}
+  >
+    <div class="log-row__level">
+      <Icon icon={getLogLevelIcon()} />
+    </div>
+    <div class="log-row__body">
+      {#if message.metadata?.source}
+        <span class="log-row__source">{message.metadata.source}</span>
+      {/if}
+      <span class="log-row__node">{message.metadata?.nodeLabel ?? message.nodeId ?? 'log'}</span>
+      <span class="log-row__text">{message.content}</span>
+    </div>
+    {#if showTimestamp}
+      <span class="log-row__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--last={isLast}
   >
     <!-- Avatar / Icon -->
@@ -182,14 +209,6 @@
       <!-- 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__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>
         {/if}
@@ -197,7 +216,7 @@
 
       <!-- Message Text -->
       <div class="message-bubble__text">
-        {#if enableMarkdown && message.role !== 'log'}
+        {#if enableMarkdown}
           <!-- Markdown content - sanitized with DOMPurify to prevent XSS -->
           <!-- eslint-disable-next-line svelte/no-at-html-tags -->
           {@html renderedContent}
@@ -214,8 +233,8 @@
               class="message-bubble__node"
               title={m().playground.messageTooltips.nodeId({ id: message.nodeId })}
             >
-              <Icon icon="mdi:graph" />
-              {message.metadata?.nodeLabel ?? message.nodeId}
+              <Icon icon="mdi:vector-square" />
+              via {message.metadata?.nodeLabel ?? message.nodeId}
             </span>
           {/if}
           {#if message.metadata?.duration !== undefined}
@@ -234,19 +253,22 @@
 {/if}
 
 <style>
+  /* ============================================================
+     Bubble container — layout only, no background
+     ============================================================ */
   .message-bubble {
     display: flex;
-    gap: var(--fd-space-md);
-    padding: var(--fd-space-md) var(--fd-space-xl);
-    margin-bottom: var(--fd-space-xs);
-    border-radius: var(--fd-radius-xl);
-    animation: fadeIn 0.2s ease-out;
+    gap: var(--fd-space-sm);
+    padding: 2px var(--fd-space-xl);
+    margin-bottom: 2px;
+    align-items: flex-end;
+    animation: fadeIn 0.18s ease-out;
   }
 
   @keyframes fadeIn {
     from {
       opacity: 0;
-      transform: translateY(8px);
+      transform: translateY(6px);
     }
     to {
       opacity: 1;
@@ -254,75 +276,37 @@
     }
   }
 
-  /* Role-specific styling - Neutral theme */
   .message-bubble--user {
-    background-color: var(--fd-muted);
-    border: 1px solid var(--fd-border);
-    color: var(--fd-foreground);
-    margin-left: var(--fd-space-4xl);
     flex-direction: row-reverse;
   }
 
-  .message-bubble--assistant {
-    background-color: var(--fd-card);
-    border: 1px solid var(--fd-border);
-    color: var(--fd-card-foreground);
-    margin-right: var(--fd-space-4xl);
-  }
-
-  .message-bubble--system {
-    background-color: var(--fd-muted);
-    border: 1px solid var(--fd-border);
-    color: var(--fd-muted-foreground);
-    margin: 0 var(--fd-space-xl);
-    font-size: var(--fd-text-sm);
-  }
-
-  .message-bubble--log {
-    background-color: var(--fd-muted);
-    border: 1px solid var(--fd-border);
-    color: var(--fd-muted-foreground);
-    margin: 0 var(--fd-space-xl);
-    font-size: var(--fd-text-sm);
-    font-family: var(--fd-font-mono);
-  }
-
-  .message-bubble--log-error {
-    background-color: var(--fd-error-muted);
-    border-color: var(--fd-error);
-    color: var(--fd-error);
-  }
-
-  .message-bubble--log-warning {
-    background-color: var(--fd-warning-muted);
-    border-color: var(--fd-warning);
-    color: var(--fd-warning);
-  }
-
   .message-bubble--last {
     margin-bottom: var(--fd-space-xl);
   }
 
-  /* Avatar */
+  /* ============================================================
+     Avatar — smaller, aligned to bubble bottom
+     ============================================================ */
   .message-bubble__avatar {
     flex-shrink: 0;
-    width: var(--fd-space-4xl);
-    height: var(--fd-space-4xl);
+    width: 1.875rem;
+    height: 1.875rem;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: var(--fd-radius-full);
-    font-size: var(--fd-text-lg);
+    font-size: 1rem;
   }
 
   .message-bubble--user .message-bubble__avatar {
-    background-color: var(--fd-secondary);
-    color: var(--fd-secondary-foreground);
+    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 {
@@ -330,21 +314,41 @@
     color: var(--fd-muted-foreground);
   }
 
-  .message-bubble--log .message-bubble__avatar {
-    background-color: var(--fd-secondary);
-    color: var(--fd-muted-foreground);
-    width: var(--fd-space-3xl);
-    height: var(--fd-space-3xl);
-    font-size: var(--fd-text-sm);
-  }
-
-  /* Content */
+  /* ============================================================
+     Content — the actual visible bubble
+     ============================================================ */
   .message-bubble__content {
-    flex: 1;
     min-width: 0;
+    max-width: 78%;
+    padding: var(--fd-space-sm) var(--fd-space-md);
+    border-radius: var(--fd-radius-2xl);
   }
 
-  /* Header */
+  .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%;
+  }
+
+  /* ============================================================
+     Header — role label + timestamp
+     ============================================================ */
   .message-bubble__header {
     display: flex;
     align-items: center;
@@ -358,77 +362,47 @@
 
   .message-bubble__role {
     font-weight: 600;
-    font-size: var(--fd-text-sm);
-    color: var(--fd-foreground);
-  }
-
-  .message-bubble--user .message-bubble__role {
-    color: var(--fd-foreground);
-  }
-
-  .message-bubble--assistant .message-bubble__role {
-    color: var(--fd-foreground);
-  }
-
-  .message-bubble--log .message-bubble__role {
-    font-weight: 500;
-  }
-
-  .message-bubble__log-level {
-    display: flex;
-    align-items: center;
-    gap: var(--fd-space-3xs);
     font-size: var(--fd-text-xs);
-    font-weight: 600;
-    padding: 0.125rem var(--fd-space-3xs);
-    border-radius: var(--fd-radius-sm);
     text-transform: uppercase;
     letter-spacing: 0.05em;
   }
 
-  .message-bubble__log-level--info {
-    background-color: var(--fd-info-muted);
-    color: var(--fd-info);
-  }
-
-  .message-bubble__log-level--warning {
-    background-color: var(--fd-warning-muted);
-    color: var(--fd-warning);
+  .message-bubble--user .message-bubble__role {
+    color: var(--fd-primary-foreground);
+    opacity: 0.75;
   }
 
-  .message-bubble__log-level--error {
-    background-color: var(--fd-error-muted);
-    color: var(--fd-error);
+  .message-bubble--assistant .message-bubble__role {
+    color: var(--fd-muted-foreground);
   }
 
-  .message-bubble__log-level--debug {
-    background-color: var(--fd-accent-muted);
-    color: var(--fd-accent);
+  .message-bubble--system .message-bubble__role {
+    color: var(--fd-muted-foreground);
   }
 
   .message-bubble__timestamp {
-    font-size: var(--fd-text-xs);
-    color: var(--fd-muted-foreground);
+    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 text */
+  /* ============================================================
+     Message text
+     ============================================================ */
   .message-bubble__text {
     line-height: var(--fd-leading-relaxed);
     word-break: break-word;
   }
 
-  .message-bubble--log .message-bubble__text {
-    font-size: var(--fd-text-sm);
-    line-height: var(--fd-leading-tight);
-    white-space: pre-wrap;
-  }
-
-  /* Markdown styling for message content */
+  /* Markdown — shared */
   .message-bubble__text :global(p) {
     margin: 0 0 var(--fd-space-md) 0;
   }
@@ -457,17 +431,9 @@
     margin-top: 0;
   }
 
-  .message-bubble__text :global(h1) {
-    font-size: var(--fd-text-xl);
-  }
-
-  .message-bubble__text :global(h2) {
-    font-size: var(--fd-text-lg);
-  }
-
-  .message-bubble__text :global(h3) {
-    font-size: var(--fd-text-base);
-  }
+  .message-bubble__text :global(h1) { font-size: var(--fd-text-xl); }
+  .message-bubble__text :global(h2) { font-size: var(--fd-text-lg); }
+  .message-bubble__text :global(h3) { font-size: var(--fd-text-base); }
 
   .message-bubble__text :global(ul),
   .message-bubble__text :global(ol) {
@@ -548,26 +514,51 @@
     font-weight: 600;
   }
 
-  .message-bubble__text :global(strong) {
-    font-weight: 600;
+  .message-bubble__text :global(strong) { font-weight: 600; }
+  .message-bubble__text :global(em) { font-style: italic; }
+
+  /* Markdown overrides for primary-bg (user) bubbles */
+  .message-bubble--user .message-bubble__text :global(code) {
+    background-color: color-mix(in srgb, var(--fd-primary-foreground) 18%, transparent);
+    color: var(--fd-primary-foreground);
   }
 
-  .message-bubble__text :global(em) {
-    font-style: italic;
+  .message-bubble--user .message-bubble__text :global(pre) {
+    background-color: rgb(0 0 0 / 0.25);
+    color: var(--fd-primary-foreground);
   }
 
-  /* Footer */
+  .message-bubble--user .message-bubble__text :global(a) {
+    color: var(--fd-primary-foreground);
+    text-decoration: underline;
+    opacity: 0.85;
+  }
+
+  .message-bubble--user .message-bubble__text :global(blockquote) {
+    border-left-color: color-mix(in srgb, var(--fd-primary-foreground) 40%, transparent);
+    color: var(--fd-primary-foreground);
+    opacity: 0.8;
+  }
+
+  /* ============================================================
+     Footer — node / duration metadata
+     ============================================================ */
   .message-bubble__footer {
     display: flex;
     align-items: center;
     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,
@@ -577,25 +568,128 @@
     gap: var(--fd-space-3xs);
   }
 
-  /* Responsive */
+  /* ============================================================
+     Responsive
+     ============================================================ */
   @media (max-width: 640px) {
-    .message-bubble--user,
-    .message-bubble--assistant {
-      margin-left: 0;
-      margin-right: 0;
+    .message-bubble__content {
+      max-width: 88%;
     }
 
     .message-bubble__avatar {
-      width: 1.75rem;
-      height: 1.75rem;
-      font-size: var(--fd-text-base);
+      width: 1.625rem;
+      height: 1.625rem;
+      font-size: var(--fd-text-sm);
     }
   }
 
   /* ========================================
-	   Compact System Notice Styles
-	   Minimal inline display for system messages
-	   ======================================== */
+     Log Row Styles
+     Compact terminal-style entry, distinct from chat bubbles
+     ======================================== */
+
+  .log-row {
+    display: flex;
+    align-items: center;
+    gap: var(--fd-space-sm);
+    padding: 0.1875rem var(--fd-space-xl);
+    border-left: 2px solid var(--fd-info);
+    margin: 1px 0;
+    font-family: var(--fd-font-mono);
+    font-size: var(--fd-text-xs);
+    color: var(--fd-muted-foreground);
+    line-height: var(--fd-leading-normal);
+    background-color: transparent;
+  }
+
+  .log-row:hover {
+    background-color: var(--fd-muted);
+  }
+
+  .log-row--error {
+    border-left-color: var(--fd-error);
+    color: var(--fd-error);
+  }
+
+  .log-row--warning {
+    border-left-color: var(--fd-warning);
+    color: var(--fd-warning);
+  }
+
+  .log-row--debug {
+    border-left-color: var(--fd-border-strong);
+    color: var(--fd-border-strong);
+  }
+
+  .log-row__level {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    font-size: var(--fd-text-sm);
+    opacity: 0.7;
+  }
+
+  .log-row--error .log-row__level {
+    color: var(--fd-error);
+    opacity: 1;
+  }
+
+  .log-row--warning .log-row__level {
+    color: var(--fd-warning);
+    opacity: 1;
+  }
+
+  .log-row__body {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    align-items: baseline;
+    gap: var(--fd-space-sm);
+    overflow: hidden;
+  }
+
+  .log-row__source {
+    flex-shrink: 0;
+    font-size: 0.6rem;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--fd-muted-foreground);
+    opacity: 0.6;
+    background-color: var(--fd-muted);
+    border: 1px solid var(--fd-border);
+    border-radius: var(--fd-radius-sm);
+    padding: 0 0.25rem;
+    line-height: 1.4;
+  }
+
+  .log-row__node {
+    flex-shrink: 0;
+    font-weight: 600;
+    color: var(--fd-foreground);
+    opacity: 0.5;
+    font-size: 0.65rem;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+
+  .log-row__text {
+    flex: 1;
+    min-width: 0;
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+
+  .log-row__timestamp {
+    flex-shrink: 0;
+    font-size: 0.625rem;
+    color: var(--fd-border-strong);
+    opacity: 0.8;
+  }
+
+  /* ========================================
+     Compact System Notice Styles
+     Minimal inline display for system messages
+     ======================================== */
 
   .system-notice {
     display: flex;
@@ -620,11 +714,42 @@
     color: var(--fd-border-strong);
   }
 
-  .system-notice__text {
+  .system-notice__source {
+    flex-shrink: 0;
+    font-size: 0.6rem;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
     color: var(--fd-muted-foreground);
+    background-color: var(--fd-muted);
+    border: 1px solid var(--fd-border);
+    border-radius: var(--fd-radius-sm);
+    padding: 0 0.25rem;
+    line-height: 1.4;
+  }
+
+  .system-notice__text {
     line-height: var(--fd-leading-tight);
   }
 
+  .system-notice--warning {
+    color: var(--fd-warning);
+  }
+  .system-notice--warning :global(.system-notice__icon) {
+    color: var(--fd-warning);
+  }
+
+  .system-notice--error {
+    color: var(--fd-error);
+  }
+  .system-notice--error :global(.system-notice__icon) {
+    color: var(--fd-error);
+  }
+
+  .system-notice--debug {
+    color: var(--fd-border-strong);
+    opacity: 0.6;
+  }
+
   .system-notice__timestamp {
     flex-shrink: 0;
     font-size: 0.625rem;