From 2de8c683ac93b202ab69d26fc3dd5f3396846134 Mon Sep 17 00:00:00 2001
From: Andrew Beal <andrew.business@tuta.com>
Date: Sun, 28 Sep 2025 23:31:35 +0100
Subject: [PATCH] Add StreamingIndicator component and replace static streaming
 indicator in ChatArea

---
 Components/ChatArea.svelte           |  14 +-
 Components/StreamingIndicator.svelte | 253 +++++++++++++++++++++++++++
 2 files changed, 255 insertions(+), 12 deletions(-)
 create mode 100644 Components/StreamingIndicator.svelte

diff --git a/Components/ChatArea.svelte b/Components/ChatArea.svelte
index 121a04a..ca3bdd3 100644
--- a/Components/ChatArea.svelte
+++ b/Components/ChatArea.svelte
@@ -3,6 +3,7 @@
   import { Services } from "Services/Services";
   import type { StreamingMarkdownService } from "Services/StreamingMarkdownService";
 	import ChatAreaThought from "./ChatAreaThought.svelte";
+	import StreamingIndicator from "./StreamingIndicator.svelte";
 
   export let messages: Array<{id: string, content: string, isUser: boolean, isStreaming: boolean}> = [];
   export let chatContainer: HTMLDivElement;
@@ -98,7 +99,7 @@
             <!-- Streaming message: use action for initialization -->
             {#if message.isStreaming}
             <div use:streamingAction={message.id} class="streaming-content"></div>
-            <span class="streaming-indicator">● ● ●</span>
+            <StreamingIndicator/>
             <ChatAreaThought/>
             {:else}
             <!-- Static message: use traditional rendering -->
@@ -168,15 +169,4 @@
     min-height: 1em; /* Ensure the element exists for binding */
   }
 
-  .streaming-indicator {
-    display: inline-block;
-    color: var(--text-accent);
-    animation: pulse 1.5s infinite;
-    margin-left: 4px;
-  }
-
-  @keyframes pulse {
-    0%, 100% { opacity: 0.3; }
-    50% { opacity: 1; }
-  }
 </style>
\ No newline at end of file
diff --git a/Components/StreamingIndicator.svelte b/Components/StreamingIndicator.svelte
new file mode 100644
index 0000000..3c8a5bc
--- /dev/null
+++ b/Components/StreamingIndicator.svelte
@@ -0,0 +1,253 @@
+<div class="container">
+  <span class="📦"></span>
+  <span class="📦"></span>
+  <span class="📦"></span>
+  <span class="📦"></span>
+  <span class="📦"></span>
+</div>
+
+<style>
+  :root {
+    --duration: 1.5s;
+    --container-size: 100px;
+    --box-size: 12px;
+    --box-border-radius: 15%;
+  }
+
+  .container {
+    width: var(--container-size);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: relative;
+    margin-left: 4px;
+  }
+
+  .📦 {
+    width: var(--box-size);
+    height: var(--box-size);
+    position: relative;
+    display: block;
+    transform-origin: -50% center;
+    border-radius: var(--box-border-radius);
+  }
+  .📦:after {
+    content: "";
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    right: 0;
+    background-color: color-mix(in srgb, var(--interactive-accent) 85%, white 15%);
+    border-radius: var(--box-border-radius);
+    box-shadow: 0px 0px 8px 2px color-mix(in srgb, var(--interactive-accent) 40%, transparent 60%);
+  }
+  .📦:nth-child(1) {
+    animation: slide var(--duration) ease-in-out infinite alternate;
+  }
+  .📦:nth-child(1):after {
+    animation: color-change var(--duration) ease-in-out infinite alternate;
+  }
+  .📦:nth-child(2) {
+    animation: flip-1 var(--duration) ease-in-out infinite alternate;
+  }
+  .📦:nth-child(2):after {
+    animation: squidge-1 var(--duration) ease-in-out infinite alternate;
+  }
+  .📦:nth-child(3) {
+    animation: flip-2 var(--duration) ease-in-out infinite alternate;
+  }
+  .📦:nth-child(3):after {
+    animation: squidge-2 var(--duration) ease-in-out infinite alternate;
+  }
+  .📦:nth-child(4) {
+    animation: flip-3 var(--duration) ease-in-out infinite alternate;
+  }
+  .📦:nth-child(4):after {
+    animation: squidge-3 var(--duration) ease-in-out infinite alternate;
+  }
+  .📦:nth-child(5) {
+    animation: flip-4 var(--duration) ease-in-out infinite alternate;
+  }
+  .📦:nth-child(5):after {
+    animation: squidge-4 var(--duration) ease-in-out infinite alternate;
+  }
+  .📦:nth-child(2):after {
+    background-color: color-mix(in srgb, var(--interactive-accent) 75%, white 25%);
+  }
+  .📦:nth-child(3):after {
+    background-color: color-mix(in srgb, var(--interactive-accent) 80%, white 20%);
+  }
+  .📦:nth-child(4):after {
+    background-color: color-mix(in srgb, var(--interactive-accent) 90%, white 10%);
+  }
+  .📦:nth-child(5):after {
+    background-color: color-mix(in srgb, var(--interactive-accent) 95%, white 5%);
+  }
+
+  @keyframes slide {
+    0% {
+      background-color: color-mix(in srgb, var(--interactive-accent) 70%, black 30%);
+      transform: translatex(0vw);
+    }
+    100% {
+      background-color: color-mix(in srgb, var(--interactive-accent) 95%, white 5%);
+      transform: translatex(
+        calc(var(--container-size) - (var(--box-size) * 1.25))
+      );
+    }
+  }
+
+  @keyframes color-change {
+    0% {
+      background-color: color-mix(in srgb, var(--interactive-accent) 70%, black 30%);
+    }
+    100% {
+      background-color: color-mix(in srgb, var(--interactive-accent) 95%, white 5%);
+    }
+  }
+
+  @keyframes flip-1 {
+    0%,
+    15% {
+      transform: rotate(0);
+    }
+    35%,
+    100% {
+      transform: rotate(-180deg);
+    }
+  }
+
+  @keyframes squidge-1 {
+    5% {
+      transform-origin: center bottom;
+      transform: scalex(1) scaley(1);
+    }
+    15% {
+      transform-origin: center bottom;
+      transform: scalex(1.3) scaley(0.7);
+    }
+    25%,
+    20% {
+      transform-origin: center bottom;
+      transform: scalex(0.8) scaley(1.4);
+    }
+    55%,
+    100% {
+      transform-origin: center top;
+      transform: scalex(1) scaley(1);
+    }
+    40% {
+      transform-origin: center top;
+      transform: scalex(1.3) scaley(0.7);
+    }
+  }
+
+  @keyframes flip-2 {
+    0%,
+    30% {
+      transform: rotate(0);
+    }
+    50%,
+    100% {
+      transform: rotate(-180deg);
+    }
+  }
+
+  @keyframes squidge-2 {
+    20% {
+      transform-origin: center bottom;
+      transform: scalex(1) scaley(1);
+    }
+    30% {
+      transform-origin: center bottom;
+      transform: scalex(1.3) scaley(0.7);
+    }
+    40%,
+    35% {
+      transform-origin: center bottom;
+      transform: scalex(0.8) scaley(1.4);
+    }
+    70%,
+    100% {
+      transform-origin: center top;
+      transform: scalex(1) scaley(1);
+    }
+    55% {
+      transform-origin: center top;
+      transform: scalex(1.3) scaley(0.7);
+    }
+  }
+
+  @keyframes flip-3 {
+    0%,
+    45% {
+      transform: rotate(0);
+    }
+    65%,
+    100% {
+      transform: rotate(-180deg);
+    }
+  }
+
+  @keyframes squidge-3 {
+    35% {
+      transform-origin: center bottom;
+      transform: scalex(1) scaley(1);
+    }
+    45% {
+      transform-origin: center bottom;
+      transform: scalex(1.3) scaley(0.7);
+    }
+    55%,
+    50% {
+      transform-origin: center bottom;
+      transform: scalex(0.8) scaley(1.4);
+    }
+    85%,
+    100% {
+      transform-origin: center top;
+      transform: scalex(1) scaley(1);
+    }
+    70% {
+      transform-origin: center top;
+      transform: scalex(1.3) scaley(0.7);
+    }
+  }
+
+  @keyframes flip-4 {
+    0%,
+    60% {
+      transform: rotate(0);
+    }
+    80%,
+    100% {
+      transform: rotate(-180deg);
+    }
+  }
+
+  @keyframes squidge-4 {
+    50% {
+      transform-origin: center bottom;
+      transform: scalex(1) scaley(1);
+    }
+    60% {
+      transform-origin: center bottom;
+      transform: scalex(1.3) scaley(0.7);
+    }
+    70%,
+    65% {
+      transform-origin: center bottom;
+      transform: scalex(0.8) scaley(1.4);
+    }
+    100%,
+    100% {
+      transform-origin: center top;
+      transform: scalex(1) scaley(1);
+    }
+    85% {
+      transform-origin: center top;
+      transform: scalex(1.3) scaley(0.7);
+    }
+  }
+</style>
\ No newline at end of file