Chat UI

.env.example

@@ -51,6 +51,7 @@ TERMINUS_PROXY_HOST_URL=
 TERMINUS_ADMIN_ROOT_TOKEN=
 # Set this env to enable vault audit logs in the sidebar
 TERMINUS_RETRACED_PROJECT_ID=
+TERMINUS_LLM_RETRACED_PROJECT_ID=
 
 # OpenTelemetry
 OTEL_EXPORTER_OTLP_METRICS_ENDPOINT=
@@ -115,4 +116,15 @@ ENTERPRISE_ORY_PROJECT_ID=
 #OPENID_REQUEST_PROFILE_SCOPE=false
 
 # Uncomment below if you wish to forward the OpenID params (https://openid.net/specs/openid-connect-core-1_0-errata2.html#AuthRequest) to the OpenID IdP
-#OPENID_REQUEST_FORWARD_PARAMS=true
+#OPENID_REQUEST_FORWARD_PARAMS=true
+FEATURE_LLM_VAULT=
+LLM_PDF_CHAT_BASE_URL=
+LLM_PDF_CHAT_ROLE_MAPPING=
+LLM_PDF_CHAT_SIGNING_KEY=
+LLM_PDF_CHAT_JWS_ALG=
+LLM_PDF_CHAT_JWT_AUDIENCE=
+LLM_PDF_CHAT_JWT_ISSUER=
+TERMINUS_LLM_TENANT=
+TERMINUS_LLM_PRODUCT=
+TERMINUS_WRITE_API_KEY=
+TERMINUS_READ_API_KEY=

components/Sidebar.tsx

@@ -11,6 +11,8 @@ import DSyncLogo from '@components/logo/DSync';
 import AuditLogsLogo from '@components/logo/AuditLogs';
 import Vault from '@components/logo/Vault';
 import Cog8ToothIcon from '@heroicons/react/24/outline/Cog8ToothIcon';
+import { useCallback, useEffect } from 'react';
+import useFeatures from '@lib/ui/hooks/useFeatures';
 
 type SidebarProps = {
   isOpen: boolean;
@@ -22,15 +24,33 @@ type MenuItem = {
   href: string;
   text: string;
   active: boolean;
+  onClick?: () => void;
   icon?: any;
   items?: MenuItem[];
+  current?: boolean;
 };
 
 export const Sidebar = ({ isOpen, setIsOpen, branding }: SidebarProps) => {
   const { t } = useTranslation('common');
   const { asPath } = useRouter();
 
-  const menus = [
+  const closeSidebar = useCallback(() => setIsOpen(false), [setIsOpen]);
+
+  const features = useFeatures();
+
+  useEffect(() => {
+    function handleEscKey(e) {
+      if ((e as KeyboardEvent).key === 'Escape') {
+        closeSidebar();
+      }
+    }
+    document.addEventListener('keydown', handleEscKey);
+    return () => {
+      document.removeEventListener('keydown', handleEscKey);
+    };
+  }, [closeSidebar]);
+
+  const menuItems = [
     {
       href: '/admin/dashboard',
       text: t('dashboard'),
@@ -126,6 +146,27 @@ export const Sidebar = ({ isOpen, setIsOpen, branding }: SidebarProps) => {
         },
       ],
     },
+    features?.llmVault
+      ? {
+          href: '/admin/llm-vault/chat',
+          text: t('llm_vault'),
+          icon: Vault,
+          current: asPath.includes('llm-vault'),
+          active: asPath.includes('/admin/llm-vault'),
+          items: [
+            {
+              href: '/admin/llm-vault/chat',
+              text: t('bui-chat'),
+              active: asPath.includes('/admin/llm-vault/chat'),
+            },
+            {
+              href: '/admin/llm-vault/audit-logs',
+              text: t('audit_logs'),
+              active: asPath.includes('/admin/llm-vault/audit-logs'),
+            },
+          ],
+        }
+      : null,
     {
       href: '/admin/settings',
       text: t('settings'),
@@ -144,28 +185,30 @@ export const Sidebar = ({ isOpen, setIsOpen, branding }: SidebarProps) => {
         },
       ],
     },
-  ];
+  ].filter((m): m is NonNullable<typeof m> => m !== null);
+
+  const menus: MenuItem[] = menuItems;
 
   return (
     <>
       {/* Sidebar for mobile */}
       <div
-        className={classNames('relative z-40 md:hidden', { hidden: isOpen })}
+        className={classNames('relative z-40 md:hidden', { hidden: !isOpen })}
         role='dialog'
         aria-modal='true'>
         <div className='fixed inset-0 bg-gray-600 bg-opacity-75' />
         <div className='fixed inset-0 z-40 flex'>
           <div className='relative flex w-full max-w-xs flex-1 flex-col bg-white pt-5 pb-4'>
-            <div className='absolute top-0 right-0 -mr-12 pt-2'>
+            <div className='absolute top-0 right-0 -mr-12 pt-2'></div>
+            <div className='flex flex-shrink-0 items-center px-4'>
+              <BrandingLink t={t} branding={branding}></BrandingLink>
               <button
-                onClick={() => {
-                  setIsOpen(!isOpen);
-                }}
+                onClick={closeSidebar}
                 type='button'
                 className='ml-1 flex h-10 w-10 items-center justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white'>
                 <span className='sr-only'>{t('close_sidebar')}</span>
                 <svg
-                  className='h-6 w-6 text-white'
+                  className='h-6 w-6'
                   xmlns='http://www.w3.org/2000/svg'
                   fill='none'
                   viewBox='0 0 24 24'
@@ -176,24 +219,40 @@ export const Sidebar = ({ isOpen, setIsOpen, branding }: SidebarProps) => {
                 </svg>
               </button>
             </div>
-            <div className='flex flex-shrink-0 items-center px-4'>
-              <BrandingLink t={t} branding={branding}></BrandingLink>
-            </div>
             <div className='mt-5 h-0 flex-1 overflow-y-auto'>
               <MenuItems menus={menus} />
             </div>
           </div>
-          <div className='w-14 flex-shrink-0' aria-hidden='true'></div>
+          <div className='w-14 flex-1' aria-hidden='true' onClick={closeSidebar}></div>
         </div>
       </div>
-
       {/* Sidebar for desktop */}
-      <div className='hidden md:fixed md:inset-y-0 md:flex md:w-64 md:flex-col'>
-        <div className='flex flex-grow flex-col overflow-y-auto border-r border-gray-200 bg-white pt-5'>
-          <div className='flex flex-shrink-0 items-center px-4'>
+      <div
+        className={classNames('hidden w-64 flex-col flex-shrink-0 h-full', {
+          hidden: !isOpen,
+          'md:flex': isOpen,
+        })}>
+        <div className='flex flex-grow flex-col overflow-y-hidden border-r border-gray-200 bg-white pt-5 h-full'>
+          <div className='flex flex-shrink-0 items-center pl-4 pr-2'>
             <BrandingLink t={t} branding={branding}></BrandingLink>
+            <button
+              onClick={closeSidebar}
+              type='button'
+              className='ml-1 flex h-10 w-10 items-center justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white'>
+              <span className='sr-only'>{t('close_sidebar')}</span>
+              <svg
+                className='h-6 w-6'
+                xmlns='http://www.w3.org/2000/svg'
+                fill='none'
+                viewBox='0 0 24 24'
+                strokeWidth={2}
+                stroke='currentColor'
+                aria-hidden='true'>
+                <path strokeLinecap='round' strokeLinejoin='round' d='M6 18L18 6M6 6l12 12' />
+              </svg>
+            </button>
           </div>
-          <div className='mt-5 flex flex-1 flex-col'>
+          <div className='my-5 flex flex-1 flex-col h-full overflow-y-auto '>
             <MenuItems menus={menus} />
           </div>
         </div>
@@ -204,11 +263,11 @@ export const Sidebar = ({ isOpen, setIsOpen, branding }: SidebarProps) => {
 
 const MenuItems = ({ menus }: { menus: MenuItem[] }) => {
   return (
-    <nav className='space-y-1'>
+    <nav className='space-y-1 h-full overflow-y-auto'>
       {menus.map((menu, id) => {
         return (
           <div key={id}>
-            <ItemLink key={id} {...menu} />
+            <ItemLink {...menu} />
             {menu.items && <SubMenuItems items={menu.items} />}
           </div>
         );
@@ -230,11 +289,12 @@ const SubMenuItems = ({ items }: { items: MenuItem[] }) => {
 };
 
 const ItemLink = (props: MenuItem) => {
-  const { href, text, active } = props;
+  const { href, text, active, onClick } = props;
 
   return (
     <Link
       href={href}
+      onClick={onClick}
       className={classNames(
         'group mx-2 flex items-center rounded-md py-2 px-2 text-sm text-gray-900',
         active ? 'bg-gray-100 font-bold' : 'font-medium hover:bg-gray-100 hover:text-gray-900'

components/layouts/AccountLayout.tsx

@@ -11,7 +11,7 @@ export const AccountLayout = ({ children }: { children: React.ReactNode }) => {
   const { t } = useTranslation('common');
   const { data: session, status } = useSession({ required: true });
 
-  const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(true);
   const [branding, setBranding] = useState<any>(null);
 
   useEffect(() => {
@@ -39,34 +39,38 @@ export const AccountLayout = ({ children }: { children: React.ReactNode }) => {
         <title>{(branding ? branding.companyName : 'BoxyHQ') + ' ' + t('admin_portal')}</title>
         <link rel='icon' href={branding ? branding.faviconUrl : '/favicon.ico'} />
       </Head>
-      <Sidebar isOpen={isOpen} setIsOpen={setIsOpen} branding={branding} />
-      <div className='flex flex-1 flex-col md:pl-64'>
-        <div className='sticky top-0 z-10 flex h-16 flex-shrink-0 border-b bg-white'>
-          <button
-            onClick={() => {
-              setIsOpen(!isOpen);
-            }}
-            type='button'
-            className='border-r border-gray-200 px-4 text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset md:hidden'>
-            <span className='sr-only'>{t('open_sidebar')}</span>
-            <svg
-              className='h-6 w-6'
-              xmlns='http://www.w3.org/2000/svg'
-              fill='none'
-              viewBox='0 0 24 24'
-              strokeWidth={2}
-              stroke='currentColor'
-              aria-hidden='true'>
-              <path strokeLinecap='round' strokeLinejoin='round' d='M4 6h16M4 12h16M4 18h7' />
-            </svg>
-          </button>
-          <Navbar session={session} />
-        </div>
-        <main>
-          <div className='py-6'>
-            <div className='mx-auto max-w-7xl px-4 sm:px-6 md:px-8'>{children}</div>
+      <div className='flex h-full'>
+        <Sidebar isOpen={isOpen} setIsOpen={setIsOpen} branding={branding} />
+        <div className='flex flex-1 flex-col w-[calc(100%-16rem)]'>
+          <div className='sticky top-0 z-10 flex h-16 flex-shrink-0 border-b bg-white'>
+            {!isOpen && (
+              <button
+                onClick={() => {
+                  setIsOpen(!isOpen);
+                }}
+                type='button'
+                className='border-r border-gray-200 px-4 text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset '>
+                <span className='sr-only'>{t('open_sidebar')}</span>
+                <svg
+                  className='h-6 w-6'
+                  xmlns='http://www.w3.org/2000/svg'
+                  fill='none'
+                  viewBox='0 0 24 24'
+                  strokeWidth={2}
+                  stroke='currentColor'
+                  aria-hidden='true'>
+                  <path strokeLinecap='round' strokeLinejoin='round' d='M4 6h16M4 12h16M4 18h7' />
+                </svg>
+              </button>
+            )}
+            <Navbar session={session} />
           </div>
-        </main>
+          <main className='h-[calc(100vh-4rem)] overflow-auto'>
+            <div className='py-6 h-full'>
+              <div className='mx-auto px-4 h-full'>{children}</div>
+            </div>
+          </main>
+        </div>
       </div>
     </>
   );

components/terminus/Blockly/BlocklyComponent.module.css

@@ -1,7 +1,7 @@
 .blocklyDiv {
   height: calc(100% - 151px);
-  width: calc(100% - 256px);
+  width: calc(100%);
   position: absolute;
   top: 151px;
-  left: 256px;
+  /* left: 256px; */
 }

components/terminus/Blockly/BlocklyComponent.tsx

@@ -6,8 +6,8 @@ import { useTranslation } from 'next-i18next';
 import * as Blockly from 'blockly/core';
 import 'blockly/blocks';
 import { maskSetup } from '@components/terminus/blocks/customblocks';
-import * as locale from 'blockly/msg/en';
-Blockly.setLocale(locale);
+// import * as locale from 'blockly/msg/en';
+// Blockly.setLocale(locale);
 
 import { generateModel } from '@components/terminus/blocks/generator';
 import { errorToast, successToast } from '@components/Toaster';
@@ -84,6 +84,14 @@ function BlocklyComponent(props) {
       const { initialXml, ...rest } = props;
       primaryWorkspace.current = Blockly.inject(blocklyDiv.current as any, {
         toolbox: toolbox.current,
+        zoom: {
+          controls: true,
+          wheel: true,
+          maxScale: 3,
+          minScale: 0.3,
+          scaleSpeed: 1.2,
+          startScale: 0.8,
+        },
         readOnly: false,
         trashcan: true,
         media: '/terminus/',

e2e/support/fixtures/setuplink-ds-page.ts

@@ -68,7 +68,7 @@ export class SetupLinkDSPage {
     await expect(this.page.getByRole('table')).toBeVisible();
 
     // Delete the created setuplink
-    await this.page.getByRole('button').nth(5).click();
+    await this.page.getByRole('button').nth(6).click();
     await this.page.getByRole('button', { name: 'Delete' }).click();
   }
 }

e2e/support/fixtures/setuplink-page.ts

@@ -76,7 +76,7 @@ export class SetupLinkPage {
     await expect(this.page.getByRole('table')).toBeVisible();
 
     // Delete the created setuplink
-    await this.page.getByRole('button').nth(5).click();
+    await this.page.getByRole('button').nth(6).click();
     await this.page.getByRole('button', { name: 'Delete' }).click();
   }
 }

e2e/ui/Directory Sync/setup_link_ds.spec.ts

@@ -43,7 +43,7 @@ async function deleteDirectory(setupLinkPage: Page) {
   await setupLinkPage.getByRole('button', { name: 'Confirm' }).click();
 }
 
-test.describe('Admin Portal Dyrectory Sync SetupLink', () => {
+test.describe('Admin Portal Directory Sync SetupLink', () => {
   test('should be able to create setup link and directories', async ({ page, setuplinkPage }) => {
     // get setuplink url
     const linkContent = await setuplinkPage.getSetupLinkUrl();