fix focus and styling

src/leapfrogai_ui/src/lib/components/ChatFileUploadForm.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import { ACCEPTED_FILE_TYPES, MAX_NUM_FILES_UPLOAD } from '$constants';
-  import { ToolbarButton } from 'flowbite-svelte';
   import { PaperClipOutline } from 'flowbite-svelte-icons';
   import { v4 as uuidv4 } from 'uuid';
   import LFFileUploadBtn from '$components/LFFileUploadBtn.svelte';
@@ -29,7 +28,7 @@
   const { enhance, submit } = superForm(form, {
     validators: yup(filesSchema),
     invalidateAll: false,
-    onResult({ result }) {
+    onResult({ result, cancel }) {
       uploadingFiles = false;
       if (result.type === 'success') {
         attachedFileMetadata = attachedFileMetadata.filter((file) => file.status !== 'uploading');
@@ -43,9 +42,12 @@
       } else {
         handleUploadError('Internal Error');
       }
+
+      cancel(); // cancel the rest of the event chain and any form updates to prevent losing focus of chat input
     },
     onError(e) {
       handleUploadError(e.result.error.message);
+      uploadingFiles = false;
     }
   });
 </script>
@@ -62,6 +64,7 @@
         toastStore.addToast(MAX_NUM_FILES_UPLOAD_MSG_TOAST());
         return;
       }
+      uploadingFiles = true;
       // Metadata is limited to 512 characters, we use a short id to save space
       for (const file of e.detail) {
         attachedFileMetadata = [
@@ -73,16 +76,10 @@
       submit(e.detail);
     }}
     accept={ACCEPTED_FILE_TYPES}
-    class="remove-btn-style flex"
+    disabled={uploadingFiles}
+    class="remove-btn-style flex  rounded-lg  p-1.5 text-gray-500 hover:bg-inherit dark:hover:bg-inherit"
   >
-    <ToolbarButton
-      color="dark"
-      class="rounded-full text-gray-500 dark:text-gray-400"
-      disabled={uploadingFiles}
-      on:click={(e) => e.preventDefault()}
-    >
-      <PaperClipOutline />
-      <span class="sr-only">Attach file</span>
-    </ToolbarButton>
+    <PaperClipOutline class="text-gray-300" />
+    <span class="sr-only">Attach file</span>
   </LFFileUploadBtn>
 </form>

src/leapfrogai_ui/src/lib/components/UploadedFileCards.svelte

@@ -12,10 +12,10 @@
 <div
   id="uploaded-files"
   class={attachedFileMetadata.length > 0
-    ? 'ml-9 flex max-w-full  gap-2 overflow-x-auto bg-gray-700 px-2.5'
+    ? 'ml-6 flex max-w-full  gap-2 overflow-x-auto bg-gray-700 '
     : 'hidden'}
 >
-  {#each attachedFileMetadata as fileMetadata, index}
+  {#each attachedFileMetadata as fileMetadata}
     <UploadedFileCard {fileMetadata} on:delete={() => handleRemoveFile(fileMetadata.id)} />
   {/each}
 </div>

src/leapfrogai_ui/src/routes/chat/(dashboard)/[[thread_id]]/+page.svelte

@@ -357,15 +357,14 @@
     <div class="flex flex-grow flex-col rounded-lg bg-gray-50 px-2 dark:bg-gray-700">
       <UploadedFileCards bind:attachedFileMetadata />
 
-      <div id="chat-row" class="flex w-full items-center">
+      <div id="chat-row" class="flex w-full items-center gap-1">
         {#if !assistantMode}
           <ChatFileUploadForm bind:form={data.form} bind:uploadingFiles bind:attachedFileMetadata />
         {/if}
-
         <LFTextArea
           id="chat"
           data-testid="chat-input"
-          class=" flex-grow resize-none border-none bg-white focus:ring-0 dark:bg-gray-700"
+          class="flex-grow resize-none border-none bg-white focus:ring-0 dark:bg-gray-700"
           placeholder="Type your message here..."
           value={chatInput}
           bind:showLengthError={lengthInvalid}

src/leapfrogai_ui/tests/file-chat.test.ts

@@ -4,7 +4,7 @@ import {
   createPDF,
   createTextFile,
   createWordFile,
-  deleteFileByName, deleteFixtureFile,
+  deleteFixtureFile,
   uploadFiles,
   uploadFileWithApi
 } from './helpers/fileHelpers';
@@ -14,20 +14,20 @@ import {
   sendMessage,
   waitForResponseToComplete
 } from './helpers/threadHelpers';
-import { faker, fi } from '@faker-js/faker';
-import { getFakeAssistantInput } from '$testUtils/fakeData';
+import { faker } from '@faker-js/faker';
+import { getFakeAssistantInput } from '../testUtils/fakeData';
 import { createAssistantWithApi } from './helpers/assistantHelpers';
 import {
   ERROR_PROCESSING_FILE_MSG_TOAST,
   MAX_NUM_FILES_UPLOAD_MSG_TOAST
-} from '$constants/toastMessages';
+} from '../src/lib/constants/toastMessages';
 import type { ActionResult } from '@sveltejs/kit';
 import {
   APPROX_MAX_CHARACTERS,
   FILE_UPLOAD_PROMPT,
   MAX_NUM_FILES_UPLOAD
-} from '../src/lib/constants/index';
-import { FILE_CONTEXT_TOO_LARGE_ERROR_MSG } from '$constants/errors';
+} from '../src/lib/constants';
+import { FILE_CONTEXT_TOO_LARGE_ERROR_MSG } from '../src/lib/constants/errors';
 import { shortenFileName } from '../src/lib/helpers/stringHelpers';
 
 test('it attaches multiple files of different types and creates a hidden message with their content', async ({
@@ -180,9 +180,7 @@ test('it displays a toast and removes files when there is an error processing th
   deleteFixtureFile(filename);
 });
 
-test('it adds an error message if a file is too large to add to the context', async ({
-  page
-}) => {
+test('it adds an error message if a file is too large to add to the context', async ({ page }) => {
   const adjustedMax =
     APPROX_MAX_CHARACTERS -
     Number(process.env.PUBLIC_MESSAGE_LENGTH_LIMIT) -
@@ -207,10 +205,10 @@ test('it adds an error message if a file is too large to add to the context', as
   deleteFixtureFile(filename);
 });
 
-test('it limits the number of files that can be uploaded', async ({ page, openAIClient }) => {
+test('it limits the number of files that can be uploaded', async ({ page }) => {
   await loadChatPage(page);
 
-  let filenames: string[] = [];
+  const filenames: string[] = [];
   for (let i = 0; i < MAX_NUM_FILES_UPLOAD + 1; i++) {
     const filename = await createPDF();
     filenames.push(filename);