feat: ui assistants management (#469)

* feat: assistants management page and create assistant * feat: assistants management page and create assistant --------- Co-authored-by: John Alling <john.alling@defenseunicorns.com> Co-authored-by: Jonathan Perry <YrrepNoj@gmail.com>
defenseunicorns · May 10, 2024 · 28ba7ed · 28ba7ed
1 parent 8982bc0
commit 28ba7ed
Show file tree

Hide file tree

Showing 60 changed files with 1,380 additions and 232 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/leapfrogai_ui/package-lock.json b/src/leapfrogai_ui/package-lock.json
diff --git a/src/leapfrogai_ui/package.json b/src/leapfrogai_ui/package.json
@@ -75,6 +75,7 @@
     "msw": "^2.2.14",
     "openai": "^4.41.1",
     "playwright": "^1.42.1",
+    "svelte-forms-lib": "^2.0.1",
     "uuid": "^9.0.1",
     "yup": "^1.4.0"
   }

diff --git a/src/leapfrogai_ui/src/app.d.ts b/src/leapfrogai_ui/src/app.d.ts
@@ -15,6 +15,7 @@ declare global {
       // TODO - add profile type
       // profile?: any;
       conversations?: Conversation[];
+      assistants?: Assistant[];
     }
     // interface PageState {}
     // interface Platform {}

diff --git a/src/leapfrogai_ui/src/lib/components/ChatSidebar.svelte b/src/leapfrogai_ui/src/lib/components/ChatSidebar.svelte
@@ -14,13 +14,12 @@
   import { AddComment } from 'carbon-icons-svelte';
   import { dates } from '$helpers';
   import { MAX_LABEL_SIZE } from '$lib/constants';
-  import { conversationsStore } from '$stores';
+  import { conversationsStore, uiStore } from '$stores';
   import { page } from '$app/stores';
   import { browser } from '$app/environment';
   import ImportExport from '$components/ImportExport.svelte';
   import Fuse, { type FuseResult, type IFuseOptions } from 'fuse.js';
-
-  export let isSideNavOpen: boolean;
+  import { onMount } from 'svelte';
 
   let deleteModalOpen = false;
   let editMode = false;
@@ -118,9 +117,20 @@
     searchResults = fuse.search(searchText);
     filteredConversations = searchResults.map((result) => result.item);
   }
+
+  onMount(() => {
+    // When trying to set the isSideNavOpen to true when initialized as a variable
+    // Header component overrides it to false so menu closes, setting to true here
+    // to prevent that
+    uiStore.setIsSideNavOpen(true);
+  });
 </script>
 
-<SideNav bind:isOpen={isSideNavOpen} aria-label="side navigation" style="background-color: g90;">
+<SideNav
+  bind:isOpen={$uiStore.isSideNavOpen}
+  aria-label="side navigation"
+  style="background-color: g90;"
+>
   <div style="height: 100%">
     <SideNavItems>
       <div class="side-nav-items-container">
@@ -259,6 +269,10 @@ properties had to be manually overridden.
 https://github.com/carbon-design-system/carbon-components-svelte/issues/892
 -->
 <style lang="scss">
+  :global(.bx--side-nav__item) {
+    list-style-type: none;
+  }
+
   .noScroll {
     overflow-y: hidden !important;
   }

diff --git a/src/leapfrogai_ui/src/lib/components/ChatSidebar.test.ts b/src/leapfrogai_ui/src/lib/components/ChatSidebar.test.ts
@@ -8,7 +8,7 @@ import {
 import { conversationsStore, toastStore } from '$stores';
 import { fireEvent, render, screen, within } from '@testing-library/svelte';
 import userEvent from '@testing-library/user-event';
-import { fakeConversations, getFakeConversation } from '../../testUtils/fakeData';
+import { fakeConversations, getFakeConversation } from '../../../testUtils/fakeData';
 import { vi } from 'vitest';
 import stores from '$app/stores';
 import { monthNames } from '$helpers/dates';
@@ -70,7 +70,7 @@ describe('ChatSidebar', () => {
       conversations: fakeConversations
     });
 
-    render(ChatSidebar, { isSideNavOpen: true });
+    render(ChatSidebar);
 
     const conversationsSection = screen.getByTestId('conversations');
 
@@ -116,7 +116,7 @@ describe('ChatSidebar', () => {
       conversations: fakeConversations
     });
 
-    render(ChatSidebar, { isSideNavOpen: true });
+    render(ChatSidebar);
 
     const conversationsSection = screen.getByTestId('conversations');
 
@@ -151,7 +151,7 @@ describe('ChatSidebar', () => {
       conversations: fakeConversations
     });
 
-    render(ChatSidebar, { isSideNavOpen: true });
+    render(ChatSidebar);
 
     const conversationsSection = screen.getByTestId('conversations');
 
@@ -182,7 +182,7 @@ describe('ChatSidebar', () => {
       conversations: fakeConversations
     });
 
-    render(ChatSidebar, { isSideNavOpen: true });
+    render(ChatSidebar);
 
     const conversationsSection = screen.getByTestId('conversations');
 
@@ -200,7 +200,7 @@ describe('ChatSidebar', () => {
       conversations: fakeConversations
     });
 
-    render(ChatSidebar, { isSideNavOpen: true });
+    render(ChatSidebar);
 
     const conversationsSection = screen.getByTestId('conversations');
 
@@ -218,7 +218,7 @@ describe('ChatSidebar', () => {
       conversations: fakeConversations
     });
 
-    render(ChatSidebar, { isSideNavOpen: true });
+    render(ChatSidebar);
 
     const conversationsSection = screen.getByTestId('conversations');
 
@@ -247,7 +247,7 @@ describe('ChatSidebar', () => {
       conversations: fakeConversations
     });
 
-    render(ChatSidebar, { isSideNavOpen: true });
+    render(ChatSidebar);
 
     const conversationsSection = screen.getByTestId('conversations');
 
@@ -265,7 +265,7 @@ describe('ChatSidebar', () => {
       conversations: fakeConversations
     });
 
-    render(ChatSidebar, { isSideNavOpen: true });
+    render(ChatSidebar);
 
     const conversationsSection = screen.getByTestId('conversations');
 
@@ -285,7 +285,7 @@ describe('ChatSidebar', () => {
       conversations: fakeConversations
     });
 
-    render(ChatSidebar, { isSideNavOpen: true });
+    render(ChatSidebar);
 
     // Not using the helper function b/c we need to reference the editInput at the end
     const overflowMenu = screen.getAllByLabelText('menu')[0];
@@ -307,7 +307,7 @@ describe('ChatSidebar', () => {
       conversations: fakeConversations
     });
 
-    render(ChatSidebar, { isSideNavOpen: true });
+    render(ChatSidebar);
 
     await editConversationLabel(fakeConversations[0].label, newLabelText, '{tab}');
     const editInput = screen.queryByText('edit conversation');
@@ -322,7 +322,7 @@ describe('ChatSidebar', () => {
       conversations: [fakeConversation]
     });
 
-    render(ChatSidebar, { isSideNavOpen: true });
+    render(ChatSidebar);
 
     expect(screen.queryByText(fakeConversation.messages[0].content)).not.toBeInTheDocument();
 
@@ -340,7 +340,7 @@ describe('ChatSidebar', () => {
       conversations: [fakeConversation1, fakeConversation2, fakeConversation3]
     });
 
-    render(ChatSidebar, { isSideNavOpen: true });
+    render(ChatSidebar);
 
     expect(screen.queryByText(fakeConversation1.label)).toBeInTheDocument();
     expect(screen.queryByText(fakeConversation2.label)).toBeInTheDocument();
@@ -363,7 +363,7 @@ describe('ChatSidebar', () => {
       conversations: [fakeConversation1, fakeConversation2, fakeConversation3]
     });
 
-    render(ChatSidebar, { isSideNavOpen: true });
+    render(ChatSidebar);
 
     expect(screen.queryByText(fakeConversation1.label)).toBeInTheDocument();
     expect(screen.queryByText(fakeConversation2.label)).toBeInTheDocument();

diff --git a/src/leapfrogai_ui/src/lib/components/ImportExport.test.ts b/src/leapfrogai_ui/src/lib/components/ImportExport.test.ts
@@ -3,7 +3,7 @@ import { render, screen, waitFor } from '@testing-library/svelte';
 import ImportExport from '$components/ImportExport.svelte';
 import { afterEach, vi } from 'vitest';
 import { toastStore } from '$stores';
-import { getFakeConversation } from '../../testUtils/fakeData';
+import { getFakeConversation } from '../../../testUtils/fakeData';
 import { mockNewConversationError } from '$lib/mocks/chat-mocks';
 
 const uploadJSONFile = async (obj: object) => {

diff --git a/src/leapfrogai_ui/src/lib/components/InputTooltip.svelte b/src/leapfrogai_ui/src/lib/components/InputTooltip.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { Tooltip } from 'carbon-components-svelte';
+
+  export let name: string = '';
+  export let labelText: string;
+  export let tooltipText: string;
+  export let direction: 'top' | 'bottom' | 'left' | 'right' = 'right';
+</script>
+
+<div class="label-and-tooltip">
+  <label for={name} class="bx--label" style="margin-bottom: 0">{labelText}</label>
+  <Tooltip {direction}>
+    <p>{tooltipText}</p>
+  </Tooltip>
+</div>
+
+<style lang="scss">
+  .label-and-tooltip {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+  }
+</style>
diff --git a/src/leapfrogai_ui/src/lib/components/InputTooltip.test.ts b/src/leapfrogai_ui/src/lib/components/InputTooltip.test.ts
@@ -0,0 +1,23 @@
+import { render, screen } from '@testing-library/svelte';
+import InputTooltip from '$components/InputTooltip.svelte';
+import userEvent from '@testing-library/user-event';
+
+describe('Input Tooltip', () => {
+  it('has a label and tooltip', async () => {
+    const labelText = 'Test Label Text';
+    const tooltipText = 'Test label tooltip test';
+    render(InputTooltip, {
+      name: 'test',
+      labelText,
+      tooltipText
+    });
+
+    screen.getByText(labelText);
+    const tooltip = screen.getByRole('button');
+    expect(screen.queryByText(tooltipText)).not.toBeInTheDocument();
+
+    await userEvent.click(tooltip);
+
+    screen.getByText(tooltipText);
+  });
+});
diff --git a/src/leapfrogai_ui/src/lib/components/LFContent.svelte b/src/leapfrogai_ui/src/lib/components/LFContent.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { Content } from 'carbon-components-svelte';
+  import { PoweredByDU } from '$components/index.js';
+</script>
+
+<Content>
+  <div class="lf-content-container">
+    <div class="slot-wrapper">
+      <slot />
+    </div>
+
+    <PoweredByDU />
+  </div>
+</Content>
+
+<style lang="scss">
+  .slot-wrapper {
+    height: 100%;
+  }
+  .lf-content-container {
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+</style>