Flowbite chat

src/leapfrogai_ui/src/app.css

@@ -2,8 +2,66 @@
 @tailwind components;
 @tailwind utilities;
 
+:root {
+  --header-height: 3rem;
+  --message-input-height: 2.5rem;
+}
+
+/*TODO - can we get rid of some of these?*/
 @layer utilities {
+  .lf-content {
+    display: flex;
+    flex-grow: 1;
+    padding: 2rem;
+  }
   .no-scrollbar {
     scrollbar-width: none;
   }
+
+  .hide {
+    opacity: 0;
+    transition: opacity 0.2s;
+  }
+
+  .lf-content-container {
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+
+  .centered-flexbox {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .remove-btn-style {
+    background: none;
+    color: inherit;
+    border: none;
+    padding: 0;
+    font: inherit;
+    cursor: pointer;
+    outline: inherit;
+  }
+
+  .link {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    font-weight: 400;
+    letter-spacing: 0.16px;
+    text-decoration: none;
+    color: #78a9ff;
+    cursor: pointer;
+  }
+}
+
+@layer components {
+  .chat-icon {
+    width: 32px;
+    height: 52px;
+    padding: 14px 0.25rem;
+    color: white;
+  }
 }

src/leapfrogai_ui/src/lib/components/Citation.svelte

@@ -2,7 +2,7 @@
   import { browser } from '$app/environment';
   import { toastStore } from '$stores';
   import type { FileObject } from 'openai/resources/files';
-  import { ArrowUp } from 'carbon-icons-svelte';
+  import { ArrowUpOutline } from 'flowbite-svelte-icons';
   export let file: FileObject;
   export let index: string;
 
@@ -38,27 +38,12 @@
 </script>
 
 <button
-  class="centered-flexbox citation-container remove-btn-style"
+  class="flex items-center justify-center gap-1"
   on:click={(e) => {
     e.preventDefault();
     handleClick();
   }}
 >
   <span class="link">{`[${index}] ${file.filename}`}</span>
-  <ArrowUp class="link" color="#78a9ff" style="cursor: pointer;" />
+  <ArrowUpOutline class="link cursor-pointer" color="#78a9ff" />
 </button>
-
-<style lang="scss">
-  .citation-container {
-    gap: 0.25rem;
-  }
-  .link {
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    font-weight: 400;
-    letter-spacing: 0.16px;
-    text-decoration: none;
-    color: #78a9ff;
-    cursor: pointer;
-  }
-</style>

src/leapfrogai_ui/src/lib/components/HeaderButton.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+
+  export let btnClass =
+    'dark:text-gray-400 hover:bg-secondary-800 dark:hover:bg-secondary-300 dark:hover:text-white rounded-lg p-1 focus:outline-none focus:ring-4 focus:ring-primary-300 dark:focus:ring-primary-300 transition duration-100 ease-in-out';
+</script>
+
+<button type="button" {...$$restProps} class={twMerge(btnClass, $$props.class)} on:click>
+  <slot />
+</button>

src/leapfrogai_ui/src/lib/components/IconButton.svelte

@@ -1,8 +1,10 @@
-<button
-  type="button"
-  class="hover:bg-secondary-800 dark:hover:bg-secondary-300 rounded-lg p-1 focus:outline-none focus:ring-4 focus:ring-primary-300 dark:focus:ring-primary-300"
-  on:click
-  {...$$restProps}
->
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+
+  export let btnClass =
+    'dark:text-gray-400 dark:hover:text-white rounded-lg p-1 transition duration-100 ease-in-out';
+</script>
+
+<button type="button" {...$$restProps} class={twMerge(btnClass, $$props.class)} on:click>
   <slot />
 </button>

src/leapfrogai_ui/src/lib/components/LFHeader.svelte

@@ -3,7 +3,7 @@
   import logo from '$assets/LeapfrogAI.png';
   import { Button, Drawer, Navbar, NavBrand } from 'flowbite-svelte';
   import { BarsOutline, CloseOutline, CogOutline, UserCircleOutline } from 'flowbite-svelte-icons';
-  import IconButton from '$components/IconButton.svelte';
+  import HeaderButton from '$components/HeaderButton.svelte';
   import { sineIn } from 'svelte/easing';
 
   export let isUsingOpenAI: boolean;
@@ -29,7 +29,7 @@
     else activeDrawer = name;
   };
 
-  let drawerStyle = 'top-header';
+  let drawerStyle = 'top-header text-white';
   let linkStyle = 'flex p-4 flex-col gap-3.5';
   let headerLinkStyle =
     'text-sm leading-5 font-semibold tracking-tight cursor-pointer bg-none text-inherit border-none p-0 outline-none hover:text-white';
@@ -39,7 +39,7 @@
 <svelte:window bind:innerWidth />
 
 <header>
-  <Navbar fluid class="h-header py-1">
+  <Navbar fluid class="h-header py-1 dark:bg-black">
     <NavBrand
       href={$threadsStore.lastVisitedThreadId
         ? `/chat/${$threadsStore.lastVisitedThreadId}`
@@ -65,13 +65,13 @@
       <img src={logo} class="w-[7.875rem]] h-[2.25rem]" alt="LeapfrogAI Logo" />
     </NavBrand>
     <div class="flex items-center gap-x-2">
-      <IconButton on:click={() => toggleDrawer('settings')}>
+      <HeaderButton on:click={() => toggleDrawer('settings')}>
         <CogOutline data-testid="header-settings-btn" />
-      </IconButton>
+      </HeaderButton>
 
-      <IconButton on:click={() => toggleDrawer('user')}>
+      <HeaderButton on:click={() => toggleDrawer('user')}>
         <UserCircleOutline data-testid="header-user-btn" />
-      </IconButton>
+      </HeaderButton>
     </div>
   </Navbar>
 

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

@@ -53,9 +53,8 @@
 </script>
 
 <!--Custom styling allows center SidebarGroup (chat threads) to scroll-->
-
-<Sidebar class="w-full max-w-64" data-testid="sidebar">
-  <SidebarWrapper class=" flex h-full flex-col">
+<Sidebar data-testid="sidebar" class="dark:bg-gray-800">
+  <SidebarWrapper class="flex h-full flex-col">
     <SidebarGroup>
       <div class="flex flex-col gap-2">
         <Button on:click={() => threadsStore.changeThread('')}>

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

@@ -127,11 +127,11 @@ It adds a "three-dot" menu button with Popover, and delete confirmation Modal
       id={`btn-${threadId}`}
       class={popperOpen && 'focus:rounded focus:bg-gray-400'}
     >
-      <DotsVerticalOutline />
+      <DotsVerticalOutline color="white" />
     </button>
     <Popover
       data-testid={'sidebar-popover'}
-      class="w-32 text-sm font-light"
+      class="w-32 border-none text-sm font-light"
       defaultClass="p-0"
       placement="right"
       trigger="click"
@@ -141,10 +141,8 @@ It adds a "three-dot" menu button with Popover, and delete confirmation Modal
         popperOpen = !popperOpen;
       }}
       ><div class="flex flex-col items-center gap-1">
-        <Button color="alternative" size="xs" class="w-full" on:click={handleEditClick}>Edit</Button
-        >
+        <Button size="xs" class="w-full" on:click={handleEditClick}>Edit</Button>
         <Button
-          color="alternative"
           size="xs"
           class="w-full"
           on:click={(e) => {