feat(assistants): Add "Discover Assistant" Page (#222)

* feat(assistant): DiscoverAgents UI

* merge main

* improve animation for agents side panel

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

@@ -22,7 +22,7 @@ export const AgentsList: React.FC = () => {
         enterFrom="opacity-0"
         enterTo="opacity-100"
       >
-        <Text styleAs="label" className="text-green-800">
+        <Text styleAs="label" className="truncate text-green-800">
           Most recent
         </Text>
       </Transition>

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

@@ -2,7 +2,7 @@ import { Transition } from '@headlessui/react';
 import Link from 'next/link';
 
 import IconButton from '@/components/IconButton';
-import { Button, Icon, IconProps, Logo, Tooltip } from '@/components/Shared';
+import { Button, Icon, IconProps, Logo, Text, Tooltip } from '@/components/Shared';
 import { env } from '@/env.mjs';
 import { useSettingsStore } from '@/stores';
 import { cn } from '@/utils';
@@ -25,6 +25,7 @@ export const AgentsSidePanel: React.FC<React.PropsWithChildren> = ({ children })
     onClick?: () => void;
   }[] = [
     { label: 'Create Assistant ', icon: 'add', href: '/agents/new' },
+    { label: 'Discover', icon: 'flask', href: '/agents/discover' },
     { label: 'Sign Out', icon: 'profile', onClick: () => void 0 },
   ];
 
@@ -63,47 +64,36 @@ export const AgentsSidePanel: React.FC<React.PropsWithChildren> = ({ children })
         />
       </div>
       <div className="flex-grow overflow-y-auto">{children}</div>
-      <Transition
-        show={!isAgentsSidePanelOpen}
-        as="div"
-        className="flex flex-shrink-0 flex-col gap-y-4"
-        enter="transition-opacity duration-100 ease-in-out delay-300"
-        enterFrom="opacity-0"
-        enterTo="opacity-100"
-      >
-        {navigationItems.map(({ label, icon, href, onClick }) => (
-          <Tooltip key={label} label={label} hover placement="right">
-            <IconButton
-              iconName={icon}
-              iconClassName="text-secondary-900"
-              shallow
-              onClick={onClick}
+      {isAgentsSidePanelOpen ? (
+        <div className="flex flex-shrink-0 flex-col gap-y-4">
+          {navigationItems.map(({ label, icon, href, onClick }) => (
+            <Button
+              key={label}
+              kind="secondary"
+              className="truncate text-secondary-900"
+              startIcon={<Icon name={icon} className="text-secondary-900" />}
+              label={label}
               href={href}
-              className="w-full text-secondary-900"
+              onClick={onClick}
             />
-          </Tooltip>
-        ))}
-      </Transition>
-      <Transition
-        show={isAgentsSidePanelOpen}
-        as="div"
-        className="flex flex-shrink-0 flex-col gap-y-4"
-        enter="transition-opacity duration-100 ease-in-out delay-300"
-        enterFrom="opacity-0"
-        enterTo="opacity-100"
-      >
-        {navigationItems.map(({ label, icon, href, onClick }) => (
-          <Button
-            key={label}
-            kind="secondary"
-            className="text-secondary-900"
-            startIcon={<Icon name={icon} className="text-secondary-900" />}
-            label={label}
-            href={href}
-            onClick={onClick}
-          />
-        ))}
-      </Transition>
+          ))}
+        </div>
+      ) : (
+        <div className="flex flex-shrink-0 flex-col gap-y-4">
+          {navigationItems.map(({ label, icon, href, onClick }) => (
+            <Tooltip key={label} label={label} hover placement="right">
+              <IconButton
+                iconName={icon}
+                iconClassName="text-secondary-900"
+                shallow
+                onClick={onClick}
+                href={href}
+                className="w-full text-secondary-900"
+              />
+            </Tooltip>
+          ))}
+        </div>
+      )}
     </div>
   );
 };

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

@@ -0,0 +1,59 @@
+import Link from 'next/link';
+
+import { Button, CoralLogo, Icon, Text } from '@/components/Shared';
+import { cn } from '@/utils';
+import { getCohereColor } from '@/utils/getCohereColor';
+
+type Props = {
+  name: string;
+  description: string;
+  isBaseAgent?: boolean;
+  id?: string;
+};
+
+/**
+ * @description renders a card for an agent with the agent's name, description
+ */
+export const DiscoverAgentCard: React.FC<Props> = ({ id, name, description, isBaseAgent }) => {
+  return (
+    <article className="flex overflow-x-hidden rounded-lg border border-marble-400 bg-marble-200 p-4  hover:bg-marble-300">
+      <Link
+        href={isBaseAgent ? '/agents' : `/agents?id=${id}`}
+        className="flex-grow overflow-x-hidden"
+      >
+        <div className="flex h-full flex-col items-start gap-y-2">
+          <div className="flex w-full items-center gap-x-2">
+            <div
+              className={cn(
+                'flex h-8 w-8 flex-shrink-0 items-center justify-center rounded duration-300',
+                'truncate',
+                id && getCohereColor(id),
+                {
+                  'bg-secondary-400': isBaseAgent,
+                }
+              )}
+            >
+              {isBaseAgent ? (
+                <CoralLogo style="secondary" />
+              ) : (
+                <Text className="uppercase text-white" styleAs="p-lg">
+                  {name[0]}
+                </Text>
+              )}
+            </div>
+            <Text as="h5" className="truncate">
+              {name}
+            </Text>
+          </div>
+          <Text className="line-clamp-2 flex-grow break-all text-left">{description}</Text>
+          <Button
+            className="ml-auto"
+            label={<Text className="text-green-700">Try now</Text>}
+            kind="secondary"
+            endIcon={<Icon name="arrow-up-right" className="text-green-700" />}
+          />
+        </div>
+      </Link>
+    </article>
+  );
+};