From a93adae30fd8aa02066c2fbf5069ec4190940110 Mon Sep 17 00:00:00 2001
From: Andrew Risse <andrewrisse@gmail.com>
Date: Wed, 2 Oct 2024 11:39:25 -0600
Subject: [PATCH] fix layout flicker

---
 .../src/lib/components/ChatFileUpload.svelte  |  7 +--
 .../components/SelectAssistantDropdown.svelte |  2 +-
 .../(dashboard)/[[thread_id]]/+page.svelte    | 43 +++++++++----------
 3 files changed, 24 insertions(+), 28 deletions(-)

diff --git a/src/leapfrogai_ui/src/lib/components/ChatFileUpload.svelte b/src/leapfrogai_ui/src/lib/components/ChatFileUpload.svelte
index 88ca2ac7c..9aa643aba 100644
--- a/src/leapfrogai_ui/src/lib/components/ChatFileUpload.svelte
+++ b/src/leapfrogai_ui/src/lib/components/ChatFileUpload.svelte
@@ -147,10 +147,7 @@
   }}
   accept={ACCEPTED_DOC_AND_AUDIO_FILE_TYPES}
   disabled={uploadingFiles}
-  class="remove-btn-style flex  rounded-lg  p-1.5 hover:bg-inherit dark:hover:bg-inherit "
+  class="remove-btn-style flex  rounded-lg  p-1.5 hover:bg-inherit dark:hover:bg-inherit dark:focus:ring-gray-400"
 >
-  <ToolbarButton>
-    <PaperClipOutline class="dark:text-gray-400 dark:hover:text-gray-300" />
-    <span class="sr-only">Attach file</span>
-  </ToolbarButton>
+  <PaperClipOutline class="dark:text-gray-400 dark:hover:text-gray-300" />
 </LFFileUploadBtn>
diff --git a/src/leapfrogai_ui/src/lib/components/SelectAssistantDropdown.svelte b/src/leapfrogai_ui/src/lib/components/SelectAssistantDropdown.svelte
index afe07cb2a..a91fe35b5 100644
--- a/src/leapfrogai_ui/src/lib/components/SelectAssistantDropdown.svelte
+++ b/src/leapfrogai_ui/src/lib/components/SelectAssistantDropdown.svelte
@@ -29,7 +29,7 @@
 
 <Button
   color="dark"
-  class="max-h-[42px] w-48 flex-shrink-0 justify-between border border-gray-600 dark:bg-gray-700  dark:focus-within:ring-1 dark:focus-within:ring-blue-500"
+  class="max-h-[44px] w-48 flex-shrink-0 justify-between border border-gray-600 dark:bg-gray-700  dark:focus-within:ring-1 dark:focus-within:ring-blue-500"
   ><span class="truncate">{selectedAssistantName}</span><ChevronDownOutline
     class="ms-2 h-6 w-6 text-white dark:text-white"
     data-testid="assistants-select-btn"
diff --git a/src/leapfrogai_ui/src/routes/chat/(dashboard)/[[thread_id]]/+page.svelte b/src/leapfrogai_ui/src/routes/chat/(dashboard)/[[thread_id]]/+page.svelte
index 141986660..f91985934 100644
--- a/src/leapfrogai_ui/src/routes/chat/(dashboard)/[[thread_id]]/+page.svelte
+++ b/src/leapfrogai_ui/src/routes/chat/(dashboard)/[[thread_id]]/+page.svelte
@@ -365,21 +365,21 @@
 
     <div
       class={twMerge(
-        'flex flex-grow flex-col gap-1 rounded-lg border border-gray-600 bg-gray-50 px-4 py-0 dark:bg-gray-700',
-        attachedFileMetadata.length > 0 && 'py-4',
-        'min-w-0'
+        'flex min-w-0 flex-grow flex-col gap-1 rounded-lg border border-gray-600 bg-gray-50 px-4 py-0 dark:bg-gray-700',
+        attachedFileMetadata.length > 0 && 'py-4'
       )}
     >
-      <LFCarousel
-        data-testid="uploaded-files-carousel"
-        hidden={attachedFileMetadata.length === 0}
-        btnHeight={14}
-        btnWidth={6}
-      >
-        <UploadedFileCards bind:attachedFileMetadata bind:attachedFiles />
-      </LFCarousel>
-
-      <div id="chat-row" class="flex w-full min-w-0 items-center gap-1">
+      <div class="flex w-full min-w-0 items-center gap-1">
+        {#if attachedFileMetadata.length > 0}
+          <LFCarousel
+            data-testid="uploaded-files-carousel"
+            hidden={false}
+            btnHeight={14}
+            btnWidth={6}
+          >
+            <UploadedFileCards bind:attachedFileMetadata bind:attachedFiles />
+          </LFCarousel>
+        {/if}
         {#if !assistantMode}
           <ChatFileUploadForm bind:uploadingFiles bind:attachedFiles bind:attachedFileMetadata />
         {/if}
@@ -394,7 +394,6 @@
           maxRows={10}
           innerWrappedClass="p-px bg-white dark:bg-gray-700"
         />
-
         {#if !$isLoading && $status !== 'in_progress'}
           <ToolbarButton data-testid="send message" type="submit" disabled={sendDisabled}
             ><ArrowUpOutline class="h-6 w-6 dark:text-gray-400 dark:hover:text-gray-300" />
@@ -406,15 +405,15 @@
             <span class="sr-only">Cancel message</span></ToolbarButton
           >
         {/if}
+        <FileChatActions
+          bind:attachedFileMetadata
+          threadId={activeThread?.id}
+          bind:attachedFiles
+          originalMessages={$chatMessages}
+          setMessages={setChatMessages}
+          append={chatAppend}
+        />
       </div>
-      <FileChatActions
-        bind:attachedFileMetadata
-        threadId={activeThread?.id}
-        bind:attachedFiles
-        originalMessages={$chatMessages}
-        setMessages={setChatMessages}
-        append={chatAppend}
-      />
     </div>
   </div>
   <PoweredByDU />