chore(ui): style updates part1

src/leapfrogai_ui/src/app.css

@@ -6,7 +6,7 @@
   --header-height: 3rem;
   --message-input-height: 2.5rem;
   --sidebar-width: 255px;
-  scrollbar-color: #4b5563 #1f2937;
+  scrollbar-color: #4b5563 transparent;
 }
 
 /* Override TailwindCSS default Preflight styles for lists in messages */

src/leapfrogai_ui/src/lib/components/ChatFileUpload.svelte

@@ -114,6 +114,7 @@
   bind:ref={fileUploadBtnRef}
   testId="upload-file-btn"
   name="files"
+  unstyled
   outline
   multiple
   size="sm"
@@ -145,8 +146,8 @@
   }}
   accept={ACCEPTED_DOC_AND_AUDIO_FILE_TYPES}
   disabled={uploadingFiles}
-  class="remove-btn-style flex  rounded-lg  p-1.5 text-gray-500 hover:bg-inherit dark:hover:bg-inherit"
+  class="remove-btn-style flex  rounded-lg  p-1.5 hover:bg-inherit dark:hover:bg-inherit "
 >
-  <PaperClipOutline class="text-gray-300" />
+  <PaperClipOutline class="dark:text-gray-400 dark:hover:text-gray-300" />
   <span class="sr-only">Attach file</span>
 </LFFileUploadBtn>

src/leapfrogai_ui/src/lib/components/FileChatActions.svelte

@@ -122,7 +122,6 @@
         }
         return;
       }
-
       // save translation response
       let responseMessage;
       try {
@@ -132,13 +131,14 @@
           role: 'assistant',
           metadata: {
             wasTranscriptionOrTranslation: 'true'
-          }
+          },
+          lengthOverride: true
         });
       } catch {
         await handleGeneralError(toastError);
         responseMessage = await saveMessage({
           thread_id: threadId,
-          content: 'There was an error translating the file',
+          content: 'There was an error processing the file',
           role: 'assistant',
           metadata: {
             wasTranscriptionOrTranslation: 'true'

src/leapfrogai_ui/src/lib/components/ImportExport.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { Button, Spinner } from 'flowbite-svelte';
-  import { DownloadOutline } from 'flowbite-svelte-icons';
+  import { FileExportOutline, FileImportOutline } from 'flowbite-svelte-icons';
   import { threadsStore, toastStore } from '$stores';
   import { threadsSchema } from '$schemas/threadSchema';
   import type { LFThread } from '$lib/types/threads';
@@ -84,19 +84,21 @@
   {:else}
     <LFFileUploadBtn
       data-testid="import-chat-history-input"
+      color="alternative"
       outline
       size="sm"
       on:change={(e) => onUpload(e.detail)}
       accept={['application/json']}
       disabled={importing}
+      btnColor="alternative"
     >
-      Import chat history <DownloadOutline /></LFFileUploadBtn
+      Import chat history <FileImportOutline /></LFFileUploadBtn
     >
   {/if}
 
-  <Button id="export-btn" outline size="sm" on:click={onExport} class="w-full">
+  <Button id="export-btn" outline size="sm" color="alternative" on:click={onExport} class="w-full">
     <div class="flex w-full justify-between">
-      Export chat history <DownloadOutline />
+      Export chat history <FileExportOutline />
     </div>
   </Button>
 </div>

src/leapfrogai_ui/src/lib/components/LFFileUploadBtn.svelte

@@ -12,6 +12,8 @@
   export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'none' = 'sm';
   export let outline: boolean = false;
   export let testId: string | null = null; // for the button element
+  export let btnColor = 'primary';
+  export let unstyled = false;
 
   const dispatch = createEventDispatcher();
 </script>
@@ -36,16 +38,30 @@
     {...$$restProps}
     class="sr-only"
   />
-  <Button
-    data-testid={testId}
-    {outline}
-    {size}
-    {disabled}
-    on:click={() => ref?.click()}
-    class={twMerge('w-full', $$props.class)}
-  >
-    <div class="flex w-full justify-between">
-      <slot />
-    </div>
-  </Button>
+  {#if unstyled}
+    <button
+      data-testid={testId}
+      {disabled}
+      on:click={() => ref?.click()}
+      class={twMerge('w-full', $$props.class)}
+    >
+      <div class="flex w-full justify-between">
+        <slot />
+      </div>
+    </button>
+  {:else}
+    <Button
+      data-testid={testId}
+      color={btnColor}
+      {outline}
+      {size}
+      {disabled}
+      on:click={() => ref?.click()}
+      class={twMerge('w-full', $$props.class)}
+    >
+      <div class="flex w-full justify-between">
+        <slot />
+      </div>
+    </Button>
+  {/if}
 </div>

src/leapfrogai_ui/src/lib/components/LFSidebar.svelte

@@ -60,8 +60,8 @@
   <SidebarWrapper class="flex w-full flex-col px-0">
     <SidebarGroup>
       <div class="flex flex-col gap-2 px-3">
-        <Button on:click={() => threadsStore.changeThread('')}>
-          <PlusOutline />New Chat
+        <Button on:click={() => threadsStore.changeThread('')} class="justify-between">
+          New chat <PlusOutline />
         </Button>
         <Input type="txt" placeholder="Search..." bind:value={searchText} maxlength={25}></Input>
       </div>
@@ -70,20 +70,26 @@
     <SidebarGroup class="no-scrollbar flex-grow overflow-y-scroll px-3" data-testid="threads">
       {#each organizedThreads as category}
         {#if category.threads.length > 0}
-          <SidebarDropdownWrapper label={category.label} isOpen={true}>
+          <SidebarDropdownWrapper
+            label={category.label}
+            isOpen={true}
+            spanClass="flex-1 text-left whitespace-nowrap"
+            ulClass="pt-0.5 pb-1 space-y-2"
+          >
             {#each category.threads as thread (thread.id)}
               <LFSidebarDropdownItem
                 threadId={thread.id}
                 label={thread.metadata.label}
                 active={activeThreadId === thread.id}
+                labelClass="ps-4"
               />
             {/each}
           </SidebarDropdownWrapper>
         {/if}
       {/each}
     </SidebarGroup>
     <Hr classHr="my-2" />
-    <SidebarGroup class="px-3">
+    <SidebarGroup class="px-3 py-2">
       <ImportExport />
     </SidebarGroup>
   </SidebarWrapper>

src/leapfrogai_ui/src/lib/components/LFSidebarDropdownItem.svelte

@@ -1,27 +1,28 @@
 <!--
 This is a modified version of Flowbite Svelte's SidebarDropdownItem.svelte component
-It adds a "three-dot" menu button with Popover, and delete confirmation Modal
+It adds a "three-dot" menu button with Dropdown, and delete confirmation Modal
 -->
 <script lang="ts">
   import { twMerge } from 'tailwind-merge';
-  import { Button, Input, P, Popover } from 'flowbite-svelte';
+  import { Button, Dropdown, DropdownItem, Input, Modal, P } from 'flowbite-svelte';
   import { DotsVerticalOutline, ExclamationCircleOutline } from 'flowbite-svelte-icons';
   import { threadsStore } from '$stores';
   import { goto } from '$app/navigation';
   import { page } from '$app/stores';
   import { MAX_LABEL_SIZE } from '$constants';
-  import { Modal } from 'flowbite-svelte';
 
   export let sClass: string =
-    'flex items-center p-2 ps-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700';
+    'flex items-center p-2 ps-4 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700';
   export let threadId: string;
   export let label: string = '';
   export let activeClass: string =
-    'flex items-center p-2 ps-11 text-base font-normal text-gray-900 bg-gray-200 dark:bg-gray-700 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700';
+    'flex items-center p-2 ps-4 text-base font-normal text-gray-900 bg-gray-200 dark:bg-gray-700 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700';
   export let active: boolean = false;
+  export let labelClass: string = '';
   let deleteModalOpen = false;
   let editLabelText: string | undefined = label;
   let editLabelInputDisabled = false;
+  let hovered = false;
 
   $: popperOpen = false;
   $: editMode = false;
@@ -71,7 +72,13 @@ It adds a "three-dot" menu button with Popover, and delete confirmation Modal
   };
 </script>
 
-<li class="flex flex-grow justify-between">
+<li
+  class="flex flex-grow justify-between"
+  on:mouseover={() => (hovered = true)}
+  on:mouseout={() => (hovered = false)}
+  on:focus
+  on:blur
+>
   {#if editMode}
     <Input
       data-testid="edit-thread-input"
@@ -108,48 +115,48 @@ It adds a "three-dot" menu button with Popover, and delete confirmation Modal
       on:click={async () => {
         await threadsStore.changeThread(threadId);
       }}
+      aria-label={label}
       class={twMerge(
         active ? activeClass : sClass,
         'truncate',
         'flex-grow',
         'cursor-pointer',
+        'justify-between',
         $$props.class
       )}
     >
-      <P size="sm" class="truncate whitespace-nowrap">
+      <P size="sm" class={twMerge('truncate whitespace-nowrap', labelClass)}>
         {label}
       </P>
+      <button
+        data-testid={`thread-menu-btn-${label}`}
+        id={`btn-${threadId}`}
+        class={twMerge(popperOpen && 'focus:rounded focus:bg-gray-400', !hovered && 'hidden')}
+        on:click={(e) => {
+          e.stopPropagation();
+        }}
+      >
+        <DotsVerticalOutline color="white" />
+      </button>
     </button>
-    <button
-      data-testid={`thread-menu-btn-${label}`}
-      id={`btn-${threadId}`}
-      class={popperOpen && 'focus:rounded focus:bg-gray-400'}
-    >
-      <DotsVerticalOutline color="white" />
-    </button>
-    <Popover
+
+    <Dropdown
       data-testid={'sidebar-popover'}
-      class="w-32 border-none border-none text-sm font-light"
-      defaultClass="p-0"
       placement="right"
       trigger="click"
       triggeredBy={`#btn-${threadId}`}
-      arrow={false}
       on:show={() => {
         popperOpen = !popperOpen;
       }}
-      ><div class="flex flex-col items-center gap-1">
-        <Button size="xs" class="w-full" on:click={handleEditClick}>Edit</Button>
-        <Button
-          size="xs"
-          class="w-full"
-          on:click={(e) => {
-            e.stopPropagation();
-            deleteModalOpen = true;
-          }}>Delete</Button
-        >
-      </div></Popover
     >
+      <DropdownItem on:click={handleEditClick}>Edit</DropdownItem>
+      <DropdownItem
+        on:click={(e) => {
+          e.stopPropagation();
+          deleteModalOpen = true;
+        }}>Delete</DropdownItem
+      >
+    </Dropdown>
   {/if}
 </li>
 
@@ -162,7 +169,7 @@ It adds a "three-dot" menu button with Popover, and delete confirmation Modal
 >
   <div class="flex flex-col gap-4">
     <ExclamationCircleOutline class="mx-auto  h-12 w-12 text-gray-400 dark:text-white" />
-    <P size="xl" class="text-center dark:text-gray-400">
+    <P size="xl" class={twMerge('text-center dark:text-gray-400', labelClass)}>
       Are you sure you want to delete your <strong>{label.substring(0, MAX_LABEL_SIZE)}</strong> chat?
     </P>
     <div class="flex justify-end gap-2">