feat: List Assistants returned from API (#242)

* feat: list agents from BE

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

Co-authored-by: misspia-cohere <[email protected]>

---------

Co-authored-by: misspia-cohere <[email protected]>

Author: knajjars

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

@@ -30,16 +30,6 @@ export const AgentsList: React.FC = () => {
       </Transition>
 
       <AgentCard isExpanded={isAgentsSidePanelOpen} name="Command R+" isBaseAgent />
-      <AgentCard
-        isExpanded={isAgentsSidePanelOpen}
-        name="HR Policy Advisor"
-        id="hr-policy-advisor-01"
-      />
-      <AgentCard
-        isExpanded={isAgentsSidePanelOpen}
-        name="Financial Advisor"
-        id="financial-advisor-01"
-      />
       {agents?.map((agent) => (
         <AgentCard
           key={agent.id}

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

@@ -6,7 +6,7 @@ import { getCohereColor } from '@/utils/getCohereColor';
 
 type Props = {
   name: string;
-  description: string;
+  description?: string;
   isBaseAgent?: boolean;
   id?: string;
 };

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

@@ -164,12 +164,9 @@ const Messages = forwardRef<HTMLDivElement, MessagesProps>(function MessagesInte
   ref
 ) {
   const isChatEmpty = messages.length === 0;
+
   if (isChatEmpty) {
-    return (
-      <div className="m-auto p-4">
-        <Welcome show={isChatEmpty} />
-      </div>
-    );
+    return <div className="m-auto p-4"><Welcome show={isChatEmpty} isBaseAgent /></div>;
   }
 
   return (

src/interfaces/coral_web/src/components/Welcome.tsx

@@ -4,18 +4,37 @@ import React from 'react';
 import { BotAvatar } from '@/components/Avatar';
 import { Text } from '@/components/Shared';
 import { BotState } from '@/types/message';
+import { cn } from '@/utils';
+import { getCohereColor } from '@/utils/getCohereColor';
 
-type Props = {
+type BaseAgentProps = {
   show: boolean;
+  isBaseAgent: true;
+};
+
+type AgentProps = {
+  show: boolean;
+  isBaseAgent?: false;
+  id: string;
+  name: string;
+  description?: string;
+};
+
+type Props = BaseAgentProps | AgentProps;
+
+const isBaseAgent = (props: AgentProps | BaseAgentProps): props is BaseAgentProps => {
+  return Boolean(props.isBaseAgent);
 };
 
 /**
  * @description Welcome message shown to the user when they first open the chat.
  */
-export const Welcome: React.FC<Props> = ({ show }) => {
+export const Welcome: React.FC<Props> = (props) => {
+  const isBaseAgentProps = isBaseAgent(props);
+
   return (
     <Transition
-      show={show}
+      show={props.show}
       appear
       className="flex flex-col items-center gap-y-4"
       enter="transition-all duration-300 ease-out delay-300"
@@ -26,12 +45,38 @@ export const Welcome: React.FC<Props> = ({ show }) => {
       leaveTo="opacity-0"
       as="div"
     >
-      <div className="flex h-7 w-7 items-center justify-center rounded bg-secondary-400 md:h-9 md:w-9">
-        <BotAvatar state={BotState.FULFILLED} style="secondary" />
+      <div
+        className={cn(
+          'flex h-7 w-7 items-center justify-center rounded md:h-9 md:w-9',
+          !isBaseAgentProps && getCohereColor(props.id),
+          {
+            'bg-secondary-400': isBaseAgentProps,
+          }
+        )}
+      >
+        {isBaseAgentProps ? (
+          <BotAvatar state={BotState.FULFILLED} style="secondary" />
+        ) : (
+          <Text className="uppercase text-white" styleAs="p-lg">
+            {props.name[0]}
+          </Text>
+        )}
       </div>
-      <Text styleAs="p-lg" className="text-center text-secondary-800 md:!text-h4">
-        Need help? Your wish is my command.
+
+      <Text
+        styleAs="p-lg"
+        className={cn(
+          'text-center text-secondary-800 md:!text-h4',
+          !isBaseAgentProps && getCohereColor(props.id, { background: false })
+        )}
+      >
+        {isBaseAgentProps ? 'Need help? Your wish is my command.' : props.name}
       </Text>
+      {!isBaseAgentProps && (
+        <Text className="!text-p-md text-center text-volcanic-900 md:!text-p-lg">
+          {props.description}
+        </Text>
+      )}
     </Transition>
   );
 };

src/interfaces/coral_web/src/pages/agents/discover/index.tsx

@@ -1,79 +1,41 @@
+import { useDebouncedState } from '@react-hookz/web';
 import { QueryClient, dehydrate } from '@tanstack/react-query';
 import { GetServerSideProps, NextPage } from 'next';
+import { useEffect, useState } from 'react';
 
 import { CohereClient } from '@/cohere-client';
 import { AgentsList } from '@/components/Agents/AgentsList';
 import { DiscoverAgentCard } from '@/components/Agents/DiscoverAgentCard';
 import { Layout, LeftSection, MainSection } from '@/components/Agents/Layout';
 import { Input, Text } from '@/components/Shared';
+import { useListAgents } from '@/hooks/agents';
 import { appSSR } from '@/pages/_app';
 import { cn } from '@/utils';
 
+const MAX_DEBOUNCE_TIME = 300;
+
 type Props = {};
 
 const AgentsNewPage: NextPage<Props> = () => {
-  const agents = [
-    {
-      id: '1',
-      name: 'Agent 1',
-      description: 'This is the first agent',
-    },
-    {
-      id: '2',
-      name: 'Agent 2',
-      description: 'This is the second agent',
-    },
-    {
-      id: '3',
-      name: 'Agent 3',
-      description: 'This is the third agent',
-    },
-    {
-      id: '4',
-      name: 'Agent 4',
-      description: 'This is the fourth agent',
-    },
-    {
-      id: '5',
-      name: 'Agent 5',
-      description: 'This is the fifth agent',
-    },
-    {
-      id: '6',
-      name: 'Agent 6',
-      description: 'This is the sixth agent',
-    },
-    {
-      id: '7',
-      name: 'Agent 7',
-      description: 'This is the seventh agent',
-    },
-    {
-      id: '8',
-      name: 'Agent 8',
-      description: 'This is the eighth agent',
-    },
-    {
-      id: '9',
-      name: 'Agent 9',
-      description: 'This is the ninth agent',
-    },
-    {
-      id: '10',
-      name: 'Agent 10',
-      description: 'This is the tenth agent',
-    },
-    {
-      id: '11',
-      name: 'Agent 11',
-      description: 'This is the eleventh agent',
-    },
-    {
-      id: '12',
-      name: 'Agent 12',
-      description: 'This is the twelfth agent',
-    },
-  ];
+  const { data: agents = [] } = useListAgents();
+
+  const [filterText, setFilterText] = useState('');
+  const [filteredAgents, setFilteredAgents] = useDebouncedState(
+    agents,
+    MAX_DEBOUNCE_TIME,
+    MAX_DEBOUNCE_TIME
+  );
+
+  useEffect(() => {
+    if (!filterText) {
+      setFilteredAgents(agents);
+      return;
+    }
+
+    setFilteredAgents(
+      agents.filter((agent) => agent.name.toLowerCase().includes(filterText.toLowerCase()))
+    );
+  }, [filterText]);
 
   return (
     <Layout>
@@ -99,19 +61,33 @@ const AgentsNewPage: NextPage<Props> = () => {
           </div>
           <div className="max-w-screen-xl flex-grow overflow-y-auto px-4 py-10 md:px-9 lg:px-10">
             <div className="grid grid-cols-1 gap-x-4 gap-y-5 md:grid-cols-2 xl:grid-cols-3">
-              {agents.length >= 10 && (
+              {agents.length >= 1 && (
                 <>
-                  <Input size="sm" kind="default" actionType="search" placeholder="Search" />
+                  <Input
+                    size="sm"
+                    kind="default"
+                    actionType="search"
+                    placeholder="Search"
+                    value={filterText}
+                    onChange={(e) => setFilterText(e.target.value)}
+                  />
                   <div className="col-span-2 hidden md:flex" />
                 </>
               )}
-              <DiscoverAgentCard
-                isBaseAgent
-                name="Command R+"
-                description="Review, understand and ask questions about  internal financial documents."
-              />
-              {agents.map((agent) => (
-                <DiscoverAgentCard key={agent.name} {...agent} />
+              {'command r+'.includes(filterText.toLowerCase()) && (
+                <DiscoverAgentCard
+                  isBaseAgent
+                  name="Command R+"
+                  description="Review, understand and ask questions about  internal financial documents."
+                />
+              )}
+              {filteredAgents?.map((agent) => (
+                <DiscoverAgentCard
+                  key={agent.name}
+                  description={agent.description ?? undefined}
+                  name={agent.name}
+                  id={agent.id}
+                />
               ))}
             </div>
           </div>

src/interfaces/coral_web/src/utils/getCohereColor.ts

@@ -1,4 +1,4 @@
-export const COLOR_LIST = [
+const BG_COLOR_LIST = [
   'bg-quartz-500',
   'bg-green-400',
   'bg-primary-400',
@@ -7,12 +7,26 @@ export const COLOR_LIST = [
   'bg-primary-500',
 ];
 
+const TEXT_COLOR_LIST = [
+  'text-quartz-500',
+  'text-green-400',
+  'text-primary-400',
+  'text-quartz-700',
+  'text-green-700',
+  'text-primary-500',
+];
+
 /**
  * @description Get a color from the Cohere color palette, when no index is provided, a random color is returned
  * @param id - id for generating a constant color in the palette
+ * @param background - if true, returns a background color, otherwise returns a text color
  * @returns color from the Cohere color palette
  */
-export const getCohereColor = (id?: string) => {
+export const getCohereColor = (
+  id?: string,
+  options: { background?: boolean } = { background: true }
+) => {
+  const COLOR_LIST = options?.background ? BG_COLOR_LIST : TEXT_COLOR_LIST;
   if (id === undefined) {
     const randomIndex = Math.floor(Math.random() * COLOR_LIST.length);