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

@@ -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;

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">

Components/StreamingIndicator.svelte

@@ -21,7 +21,7 @@
     align-items: center;
     position: relative;
     margin-left: 4px;
-    margin-top: 12px;
+    padding-top: 12px;
   }
 
   .📦 {