Skip to content

Commit

Permalink
chore(ui): style updates part1 (#1168)
Browse files Browse the repository at this point in the history
  • Loading branch information
andrewrisse authored Oct 7, 2024
1 parent 8129c34 commit bab2dcd
Show file tree
Hide file tree
Showing 18 changed files with 171 additions and 141 deletions.
2 changes: 1 addition & 1 deletion src/leapfrogai_ui/src/app.css
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand Down
4 changes: 2 additions & 2 deletions src/leapfrogai_ui/src/lib/components/ChatFileUpload.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -145,8 +145,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 dark:focus:ring-0"
>
<PaperClipOutline class="text-gray-300" />
<PaperClipOutline class="dark:text-gray-400 dark:hover:text-gray-300" />
<span class="sr-only">Attach file</span>
</LFFileUploadBtn>
3 changes: 1 addition & 2 deletions src/leapfrogai_ui/src/lib/components/FileChatActions.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,6 @@
}
return;
}
// save translation response
let responseMessage;
try {
Expand All @@ -139,7 +138,7 @@
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'
Expand Down
18 changes: 15 additions & 3 deletions src/leapfrogai_ui/src/lib/components/IconButton.svelte
Original file line number Diff line number Diff line change
@@ -1,10 +1,22 @@
<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';
export let btnClass = 'dark:text-gray-400 dark:hover:text-white rounded-lg p-1';
</script>

<button type="button" {...$$restProps} class={twMerge(btnClass, $$props.class)} on:click>
<button
type="button"
{...$$restProps}
class={twMerge(btnClass, $$props.class)}
on:click
on:change
on:keydown
on:keyup
on:touchstart|passive
on:touchend
on:touchcancel
on:mouseenter
on:mouseleave
>
<slot />
</button>
10 changes: 6 additions & 4 deletions src/leapfrogai_ui/src/lib/components/ImportExport.svelte
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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>
40 changes: 28 additions & 12 deletions src/leapfrogai_ui/src/lib/components/LFFileUploadBtn.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
22 changes: 14 additions & 8 deletions src/leapfrogai_ui/src/lib/components/LFSidebar.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -57,33 +57,39 @@
data-testid="sidebar"
class="sidebar-height flex w-[var(--sidebar-width)] border-r border-gray-700 dark:bg-gray-800 "
>
<SidebarWrapper class="flex w-full flex-col px-0">
<SidebarWrapper class="flex w-full flex-col p-0">
<SidebarGroup>
<div class="flex flex-col gap-2 px-3">
<Button on:click={() => threadsStore.changeThread('')}>
<PlusOutline />New Chat
<div class="flex flex-col gap-2 px-3 py-4">
<Button on:click={() => threadsStore.changeThread('')} class="justify-between">
New chat <PlusOutline />
</Button>
<Input type="txt" placeholder="Search..." bind:value={searchText} maxlength={25}></Input>
</div>
</SidebarGroup>
<Hr classHr="my-2" />
<Hr classHr="my-0" />
<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">
<Hr classHr="my-0" />
<SidebarGroup class="px-3 py-4">
<ImportExport />
</SidebarGroup>
</SidebarWrapper>
Expand Down
67 changes: 37 additions & 30 deletions src/leapfrogai_ui/src/lib/components/LFSidebarDropdownItem.svelte
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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={!hovered && 'opacity-0'}
on:click={(e) => {
e.stopPropagation();
}}
>
<DotsVerticalOutline class="dark:text-gray-400 dark:hover:text-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>

Expand All @@ -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">
Expand Down
2 changes: 2 additions & 0 deletions src/leapfrogai_ui/src/lib/components/Message.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -214,6 +214,7 @@
tabindex="0"
>
<EditOutline />
<span class="sr-only">Edit Message</span>
</IconButton>
{/if}
{#if message.role !== 'user'}
Expand Down Expand Up @@ -245,6 +246,7 @@
tabindex="0"
>
<RedoOutline />
<span class="sr-only">Regenerate Message</span>
</IconButton>
{/if}
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/leapfrogai_ui/src/lib/components/PoweredByDU.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
import DefenseUnicorns from '$assets/DefenseUnicorns.png';
</script>

<div class="flex items-center justify-center gap-1 py-4 text-white">
<div class="flex items-center justify-center gap-1 py-3 text-white">
<img alt="Doug" src={doug} class="h-6" />
<span class="tracking-custom text-xs leading-4">Powered By</span>
<img alt="Defense Unicorns" src={DefenseUnicorns} class="w-[6.75rem]" />
Expand Down
Loading

0 comments on commit bab2dcd

Please sign in to comment.