From f6d3d7f50477ba8fbc22787d9b95b8c2f899c9d3 Mon Sep 17 00:00:00 2001
From: Andrew Beal <andrew.business@tuta.com>
Date: Mon, 29 Sep 2025 11:09:22 +0100
Subject: [PATCH] Add chat padding feature and adjust StreamingIndicator layout

- Introduced a conditional chat padding element in ChatArea for improved UI.
- Updated ChatWindow to manage the visibility of chat padding during streaming.
- Adjusted padding in StreamingIndicator for better alignment.
---
 Components/ChatArea.svelte           | 11 +++++++++++
 Components/ChatWindow.svelte         |  7 ++++++-
 Components/StreamingIndicator.svelte |  2 +-
 3 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/Components/ChatArea.svelte b/Components/ChatArea.svelte
index fc9033e..f2520b9 100644
--- a/Components/ChatArea.svelte
+++ b/Components/ChatArea.svelte
@@ -4,8 +4,10 @@
   import type { StreamingMarkdownService } from "Services/StreamingMarkdownService";
 	import ChatAreaThought from "./ChatAreaThought.svelte";
 	import StreamingIndicator from "./StreamingIndicator.svelte";
+	import { slide } from "svelte/transition";
 
   export let messages: Array<{id: string, content: string, isUser: boolean, isStreaming: boolean}> = [];
+  export let showChatPadding: boolean = false;
   export let chatContainer: HTMLDivElement;
   
   let streamingMarkdownService: StreamingMarkdownService = Resolve(Services.StreamingMarkdownService);
@@ -101,6 +103,9 @@
             <div use:streamingAction={message.id} class="streaming-content"></div>
             <StreamingIndicator/>
             <ChatAreaThought/>
+            {#if showChatPadding}
+            <div class="chat-padding" transition:slide={{duration: 2000, delay: 0}}></div>
+            {/if}
             {:else}
             <!-- Static message: use traditional rendering -->
             {@html getStaticHTML(message)}
@@ -131,6 +136,12 @@
   .chat-area::-webkit-scrollbar {
     display: none;
   }
+
+  .chat-padding {
+    background-color: violet;
+    height: 40vh;
+    width: 100%;
+  }
   
   .message-container {
     display: flex;
diff --git a/Components/ChatWindow.svelte b/Components/ChatWindow.svelte
index 39bb63e..33450b6 100644
--- a/Components/ChatWindow.svelte
+++ b/Components/ChatWindow.svelte
@@ -17,6 +17,8 @@
   let userRequest = "";
   let isSubmitting = false;
   let userHasScrolled = false;
+  let showChatPadding = false;
+
   let messages: Array<{
     id: string, 
     content: string, 
@@ -48,6 +50,7 @@
       isStreaming: true
     }];
 
+    showChatPadding = true;
     scrollToBottom();
     userHasScrolled = false;
 
@@ -94,8 +97,10 @@
               : msg
           );
         }
+        showChatPadding = false;
       }
     } finally {
+      showChatPadding = false;
       semaphore.release();
       isSubmitting = false;
     }
@@ -133,7 +138,7 @@
 
 <main class="container">
   <div id="chat-container">
-    <ChatArea bind:messages bind:chatContainer={chatContainer}/>
+    <ChatArea bind:messages bind:chatContainer={chatContainer} bind:showChatPadding={showChatPadding}/>
   </div>
   
   <div id="input-container">
diff --git a/Components/StreamingIndicator.svelte b/Components/StreamingIndicator.svelte
index 82de269..88b5a55 100644
--- a/Components/StreamingIndicator.svelte
+++ b/Components/StreamingIndicator.svelte
@@ -21,7 +21,7 @@
     align-items: center;
     position: relative;
     margin-left: 4px;
-    margin-top: 12px;
+    padding-top: 12px;
   }
 
   .📦 {