Merge branch 'cohere-ai:main' into main

src/interfaces/coral_web/package.json

@@ -17,7 +17,7 @@
   "dependencies": {
     "@babel/core": "^7.23.3",
     "@floating-ui/react": "^0.26.9",
-    "@headlessui/react": "1.7.11",
+    "@headlessui/react": "^2.0.4",
     "@microsoft/fetch-event-source": "^2.0.1",
     "@popperjs/core": "^2.11.8",
     "@react-hookz/web": "^23.1.0",

src/interfaces/coral_web/src/cohere-client/client.ts

@@ -48,6 +48,7 @@ export type Fetch = (input: RequestInfo, init?: RequestInit) => Promise<Response
 
 export type ExperimentalFeatures = {
   USE_EXPERIMENTAL_LANGCHAIN: boolean;
+  USE_AGENTS_VIEW: boolean;
 };
 
 export class CohereClient {

src/interfaces/coral_web/src/components/Agents/AddAgentButton.tsx

@@ -0,0 +1,40 @@
+import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react';
+import Link from 'next/link';
+
+import { Icon, Text } from '@/components/Shared';
+
+/**
+ * @description renders a button to add a new agent.
+ */
+export const AddAgentButton: React.FC = () => {
+  return (
+    <Menu>
+      <MenuButton className="group h-8 w-8 rounded border border-marble-500 p-px">
+        <div className="flex h-full w-full items-center justify-center rounded bg-green-50 transition-colors duration-300 group-hover:bg-green-100/80">
+          <Icon name="add" className="text-volcanic-800" />
+        </div>
+      </MenuButton>
+      <MenuItems
+        anchor="right start"
+        className="z-menu ml-3 rounded bg-white px-2 py-1 shadow-menu"
+      >
+        <MenuItem
+          as={Link}
+          href="/agents/new"
+          className="flex w-full items-center gap-x-2 rounded bg-white p-2 hover:bg-secondary-50"
+        >
+          <Icon name="add" className="text-secondary-700" />
+          <Text>Create new agent</Text>
+        </MenuItem>
+        <div className="my-1 h-px w-full border-t border-marble-400" />
+        <MenuItem
+          as="button"
+          className="flex w-full items-center gap-x-2 rounded bg-white p-2 hover:bg-secondary-50"
+        >
+          <Icon name="circles-four" className="text-secondary-700" />
+          <Text>Add an existing agent</Text>
+        </MenuItem>
+      </MenuItems>
+    </Menu>
+  );
+};

src/interfaces/coral_web/src/components/Agents/BaseAgentButton.tsx

@@ -0,0 +1,16 @@
+import Link from 'next/link';
+
+import { CoralLogo } from '@/components/Shared';
+
+/**
+ * @description renders a button to navigate to the default knowledge agent page.
+ */
+export const BaseAgentButton: React.FC = () => {
+  return (
+    <Link className="group h-8 w-8 rounded border border-marble-500 p-[1px]" href="/agents">
+      <div className="flex h-full w-full items-center justify-center rounded bg-secondary-400 transition-colors duration-300 group-hover:bg-secondary-500">
+        <CoralLogo style="secondary" />
+      </div>
+    </Link>
+  );
+};

src/interfaces/coral_web/src/components/Agents/Layout.tsx

@@ -0,0 +1,102 @@
+import { Transition } from '@headlessui/react';
+import { capitalize } from 'lodash';
+import React, { Children, PropsWithChildren, useContext } from 'react';
+
+import { ConfigurationDrawer } from '@/components/Conversation/ConfigurationDrawer';
+import { DeploymentsDropdown } from '@/components/DeploymentsDropdown';
+import { EditEnvVariablesButton } from '@/components/EditEnvVariablesButton';
+import { Banner } from '@/components/Shared';
+import { NavigationBar } from '@/components/Shared/NavigationBar/NavigationBar';
+import { PageHead } from '@/components/Shared/PageHead';
+import { BannerContext } from '@/context/BannerContext';
+import { useIsDesktop } from '@/hooks/breakpoint';
+import { useSettingsStore } from '@/stores';
+import { cn } from '@/utils/cn';
+
+export const LeftSection: React.FC<React.PropsWithChildren> = ({ children }) => <>{children}</>;
+export const MainSection: React.FC<React.PropsWithChildren> = ({ children }) => <>{children}</>;
+
+type Props = {
+  title?: string;
+} & PropsWithChildren;
+
+/**
+ * This component is in charge of layout out the entire page.
+ * It shows the navigation bar, the left drawer and main content.
+ * On small devices (e.g. mobile), the left drawer and main section are stacked vertically.
+ */
+export const Layout: React.FC<Props> = ({ title = 'Chat', children }) => {
+  const { message: bannerMessage } = useContext(BannerContext);
+  const {
+    settings: { isConvListPanelOpen, isMobileConvListPanelOpen },
+  } = useSettingsStore();
+  const isDesktop = useIsDesktop();
+
+  let leftElement: React.ReactNode = null;
+  let mainElement: React.ReactNode = null;
+
+  Children.toArray(children).forEach((child: React.ReactNode) => {
+    const element = child as React.ReactElement;
+
+    if (element.type === LeftSection) {
+      leftElement = child;
+      return;
+    }
+    if (element.type === MainSection) {
+      mainElement = child;
+      return;
+    }
+  });
+
+  return (
+    <>
+      <PageHead title={capitalize(title)} />
+      <div className="flex h-screen w-full flex-1 flex-col gap-3 bg-secondary-100 p-3">
+        <NavigationBar>
+          <span className="flex items-center gap-x-2">
+            <DeploymentsDropdown />
+            <EditEnvVariablesButton className="py-0" />
+          </span>
+        </NavigationBar>
+        {bannerMessage && <Banner size="sm">{bannerMessage}</Banner>}
+
+        <div className={cn('relative flex h-full flex-grow flex-nowrap gap-3 overflow-hidden')}>
+          <div
+            className={cn(
+              'w-16 px-4 py-6 lg:flex-grow-0',
+              'flex flex-grow flex-col rounded-lg border',
+              'border-marble-400 bg-marble-100'
+            )}
+          >
+            {leftElement}
+          </div>
+          <Transition
+            as="main"
+            show={!isMobileConvListPanelOpen || isDesktop}
+            enterFrom="translate-x-full lg:translate-x-0"
+            enterTo="translate-x-0"
+            leaveFrom="translate-x-0"
+            leaveTo="translate-x-full lg:translate-x-0"
+            className={cn(
+              'z-main-section flex flex-grow lg:min-w-0',
+              'absolute h-full w-full lg:static lg:h-auto',
+              'transition-transform duration-500 ease-in-out lg:transition-none'
+            )}
+          >
+            <section
+              className={cn(
+                'relative flex h-full min-w-0 flex-grow flex-col',
+                'rounded-lg border',
+                'border-marble-400 bg-marble-100',
+                'overflow-hidden'
+              )}
+            >
+              {mainElement}
+            </section>
+          </Transition>
+          <ConfigurationDrawer />
+        </div>
+      </div>
+    </>
+  );
+};

src/interfaces/coral_web/src/components/Agents/LeftPanel.tsx

@@ -0,0 +1,14 @@
+import { AddAgentButton } from '@/components/Agents/AddAgentButton';
+import { BaseAgentButton } from '@/components/Agents/BaseAgentButton';
+
+/**
+ * @description renders the left panel containing the base agent, a list of agents, and an add agent button.
+ */
+export const LeftPanel: React.FC = () => {
+  return (
+    <div className="flex flex-col gap-3">
+      <BaseAgentButton />
+      <AddAgentButton />
+    </div>
+  );
+};

src/interfaces/coral_web/src/components/Citations/Citation.tsx

@@ -95,6 +95,7 @@ export const Citation = React.forwardRef<HTMLDivElement, Props>(function Citatio
 
   return (
     <Transition
+      as="div"
       id={generationId ? `citation-${generationId}` : undefined}
       show={true}
       enter="delay-300 duration-300 ease-out transition-[transform,opacity]" // delay to wait for the citation side panel to open

src/interfaces/coral_web/src/components/Citations/CitationPanel.tsx

@@ -33,6 +33,7 @@ export const CitationPanel: React.FC<Props> = ({
       enter="transition-opacity delay-1000 ease-in-out duration-1000"
       enterFrom="opacity-0"
       enterTo="opacity-100"
+      as="div"
       className={cn('h-auto flex-col gap-y-2 md:items-end lg:items-center', className)}
     >
       <div className="relative flex h-full w-full flex-col gap-y-2 overflow-hidden pb-12 pt-1">

src/interfaces/coral_web/src/components/Conversation/Header.tsx

@@ -112,6 +112,7 @@ export const Header: React.FC<Props> = ({ conversationId, isStreaming }) => {
               leave="delay-300 transition ease-in-out duration-300"
               leaveFrom="translate-x-0"
               leaveTo="-translate-x-full"
+              as="div"
               className={cn({
                 'lg:hidden': isConvListPanelOpen,
               })}

src/interfaces/coral_web/src/components/Conversation/MessagingContainer.tsx

@@ -118,6 +118,7 @@ const Content: React.FC<Props> = (props) => {
             leave="duration-300 ease-in transition-all"
             leaveFrom="translate-y-0 opacity-100"
             leaveTo="translate-y-10 opacity-0"
+            as="div"
             className="absolute bottom-full left-1/2 -z-10 flex h-fit -translate-x-1/2 transform pb-4"
           >
             <Button

src/interfaces/coral_web/src/components/ConversationList/ConversationListPanel.tsx

@@ -140,6 +140,7 @@ export const ConversationListPanel: React.FC<Props> = ({ className }) => {
         enterTo="opacity-100 h-12 mt-5"
         leaveFrom="opacity-100 h-12 mt-5"
         leaveTo="opacity-0 h-0 mt-0"
+        as="div"
         className="z-menu px-4 duration-300 ease-in-out"
       >
         <Input

src/interfaces/coral_web/src/components/GuideTooltip.tsx

@@ -34,6 +34,7 @@ export const GuideTooltip: React.FC<Props> = ({
     <Transition
       show={show}
       appear
+      as="div"
       className={cn(
         'absolute z-guide-tooltip',
         'h-fit w-[260px] sm:w-[305px]',

src/interfaces/coral_web/src/components/Layout.tsx

@@ -70,6 +70,7 @@ export const Layout: React.FC<Props> = ({ title = 'Chat', children }) => {
 
         <div className={cn('relative flex h-full flex-grow flex-nowrap overflow-hidden')}>
           <Transition
+            as="div"
             show={isMobileConvListPanelOpen || (isConvListPanelOpen && isDesktop)}
             enterFrom={cn(
               '-translate-x-full lg:translate-x-0',