feat: agent message (#39)

* fix: model icon not fetching correctly * remove console logs * feat: agent name
danny-avila · Aug 29, 2024 · b93fd2f · b93fd2f
1 parent 43066e3
commit b93fd2f
Show file tree

Hide file tree

Showing 8 changed files with 75 additions and 25 deletions.
diff --git a/client/src/components/Chat/Messages/MessageIcon.tsx b/client/src/components/Chat/Messages/MessageIcon.tsx
@@ -1,6 +1,6 @@
 import React, { useMemo, memo } from 'react';
 import { useGetEndpointsQuery } from 'librechat-data-provider/react-query';
-import type { TMessage, TPreset, Assistant } from 'librechat-data-provider';
+import type { TMessage, TPreset, Assistant, Agent } from 'librechat-data-provider';
 import type { TMessageProps } from '~/common';
 import ConvoIconURL from '~/components/Endpoints/ConvoIconURL';
 import { getEndpointField, getIconEndpoint } from '~/utils';
@@ -10,15 +10,26 @@ const MessageIcon = memo(
   (
     props: Pick<TMessageProps, 'message' | 'conversation'> & {
       assistant?: Assistant;
+      agent?: Agent;
     },
   ) => {
     const { data: endpointsConfig } = useGetEndpointsQuery();
-    const { message, conversation, assistant } = props;
+    const { message, conversation, assistant, agent } = props;
 
     const assistantName = useMemo(() => assistant?.name ?? '', [assistant]);
     const assistantAvatar = useMemo(() => assistant?.metadata?.avatar ?? '', [assistant]);
+    const agentName = useMemo(() => props.agent?.name ?? '', [props.agent]);
+    const agentAvatar = useMemo(() => props.agent?.avatar?.filepath ?? '', [props.agent]);
     const isCreatedByUser = useMemo(() => message?.isCreatedByUser ?? false, [message]);
 
+    let avatarURL = '';
+
+    if (assistant) {
+      avatarURL = assistantAvatar;
+    } else if (agent) {
+      avatarURL = agentAvatar;
+    }
+
     const messageSettings = useMemo(
       () => ({
         ...(conversation ?? {}),
@@ -47,8 +58,10 @@ const MessageIcon = memo(
           preset={messageSettings as typeof messageSettings & TPreset}
           context="message"
           assistantAvatar={assistantAvatar}
+          agentAvatar={agentAvatar}
           endpointIconURL={endpointIconURL}
           assistantName={assistantName}
+          agentName={agentName}
         />
       );
     }
@@ -57,9 +70,10 @@ const MessageIcon = memo(
       <Icon
         isCreatedByUser={isCreatedByUser}
         endpoint={endpoint}
-        iconURL={!assistant ? endpointIconURL : assistantAvatar}
+        iconURL={avatarURL || endpointIconURL}
         model={message?.model ?? conversation?.model}
         assistantName={assistantName}
+        agentName={agentName}
         size={28.8}
       />
     );

diff --git a/client/src/components/Chat/Messages/MessageParts.tsx b/client/src/components/Chat/Messages/MessageParts.tsx
@@ -20,6 +20,7 @@ export default function Message(props: TMessageProps) {
     ask,
     edit,
     index,
+    agent,
     isLast,
     enterEdit,
     assistant,
@@ -38,6 +39,18 @@ export default function Message(props: TMessageProps) {
     return null;
   }
 
+  console.log({ agent, assistant });
+
+  let name = '';
+
+  if (isCreatedByUser === true) {
+    name = localize('com_user_message');
+  } else if (assistant) {
+    name = assistant.name ?? localize('com_ui_assistant');
+  } else if (agent) {
+    name = agent.name ?? localize('com_ui_agent');
+  }
+
   return (
     <>
       <div
@@ -51,7 +64,12 @@ export default function Message(props: TMessageProps) {
               <div>
                 <div className="pt-0.5">
                   <div className="shadow-stroke flex h-6 w-6 items-center justify-center overflow-hidden rounded-full">
-                    <Icon message={message} conversation={conversation} assistant={assistant} />
+                    <Icon
+                      message={message}
+                      conversation={conversation}
+                      assistant={assistant}
+                      agent={agent}
+                    />
                   </div>
                 </div>
               </div>
@@ -62,11 +80,7 @@ export default function Message(props: TMessageProps) {
                 isCreatedByUser === true ? '' : 'agent-turn',
               )}
             >
-              <div className={cn('select-none font-semibold', fontSize)}>
-                {isCreatedByUser === true
-                  ? localize('com_user_message')
-                  : (assistant && assistant.name) ?? localize('com_ui_assistant')}
-              </div>
+              <div className={cn('select-none font-semibold', fontSize)}>{name}</div>
               <div className="flex-col gap-1 md:gap-3">
                 <div className="flex max-w-full flex-grow flex-col gap-0">
                   <ContentParts

diff --git a/client/src/components/SidePanel/Agents/AgentConfig.tsx b/client/src/components/SidePanel/Agents/AgentConfig.tsx
@@ -119,7 +119,7 @@ export default function AgentConfig({
 
   // Provider Icon logic
 
-  const providerValue = typeof provider === 'string' ? undefined : provider?.value;
+  const providerValue = typeof provider === 'string' ? provider : provider?.value;
   let endpointType: EModelEndpoint | undefined;
   let endpointIconURL: string | undefined;
   let iconKey: string | undefined;

diff --git a/client/src/components/SidePanel/Agents/Images.tsx b/client/src/components/SidePanel/Agents/Images.tsx
@@ -40,8 +40,6 @@ export const AgentAvatarRender = ({
     transition: 'stroke-dashoffset 0.3s linear',
   };
 
-  console.log(url);
-
   return (
     <div>
       <div className="relative h-20 w-20 overflow-hidden rounded-full">

diff --git a/client/src/hooks/Agents/useAgentsMap.ts b/client/src/hooks/Agents/useAgentsMap.ts
@@ -1,9 +1,16 @@
+import { TAgentsMap } from 'librechat-data-provider';
 import { useListAgentsQuery } from '~/data-provider';
 import { mapAgents } from '~/utils';
 
-export default function useAgentsMap({ isAuthenticated }: { isAuthenticated: boolean }) {
-  return useListAgentsQuery(undefined, {
+export default function useAgentsMap({
+  isAuthenticated,
+}: {
+  isAuthenticated: boolean;
+}): TAgentsMap | undefined {
+  const { data: agents = {} } = useListAgentsQuery(undefined, {
     select: (res) => mapAgents(res.data),
     enabled: isAuthenticated,
   });
+
+  return agents;
 }
diff --git a/client/src/hooks/Chat/useChatFunctions.ts b/client/src/hooks/Chat/useChatFunctions.ts
@@ -231,6 +231,7 @@ export default function useChatFunctions({
         },
       ];
     } else if (endpoint === EModelEndpoint.agents) {
+      initialResponse.model = conversation?.agent_id ?? '';
       initialResponse.text = '';
       initialResponse.content = [
         {

diff --git a/client/src/hooks/Messages/useMessageHelpers.tsx b/client/src/hooks/Messages/useMessageHelpers.tsx
@@ -1,10 +1,11 @@
 import throttle from 'lodash/throttle';
 import { useEffect, useRef, useCallback, useMemo } from 'react';
-import { Constants, isAssistantsEndpoint } from 'librechat-data-provider';
+import { Constants, isAssistantsEndpoint, isAgentsEndpoint } from 'librechat-data-provider';
 import type { TMessageProps } from '~/common';
-import { useChatContext, useAssistantsMapContext } from '~/Providers';
+import { useChatContext, useAssistantsMapContext, useAgentsMapContext } from '~/Providers';
 import useCopyToClipboard from './useCopyToClipboard';
 import { getTextKey, logger } from '~/utils';
+
 export default function useMessageHelpers(props: TMessageProps) {
   const latestText = useRef<string | number>('');
   const { message, currentEditId, setCurrentEditId } = props;
@@ -21,6 +22,7 @@ export default function useMessageHelpers(props: TMessageProps) {
     setLatestMessage,
   } = useChatContext();
   const assistantMap = useAssistantsMapContext();
+  const agentMap = useAgentsMapContext();
 
   const { text, content, children, messageId = null, isCreatedByUser } = message ?? {};
   const edit = messageId === currentEditId;
@@ -93,6 +95,16 @@ export default function useMessageHelpers(props: TMessageProps) {
     return assistantMap?.[endpointKey] ? assistantMap[endpointKey][modelKey] : undefined;
   }, [conversation?.endpoint, message?.model, assistantMap]);
 
+  const agent = useMemo(() => {
+    if (!isAgentsEndpoint(conversation?.endpoint)) {
+      return undefined;
+    }
+
+    const modelKey = message?.model ?? '';
+
+    return agentMap ? agentMap[modelKey] : undefined;
+  }, [agentMap, conversation?.endpoint]);
+
   const regenerateMessage = () => {
     if ((isSubmitting && isCreatedByUser === true) || !message) {
       return;
@@ -106,6 +118,7 @@ export default function useMessageHelpers(props: TMessageProps) {
   return {
     ask,
     edit,
+    agent,
     index,
     isLast,
     assistant,

diff --git a/client/src/routes/Root.tsx b/client/src/routes/Root.tsx
@@ -2,8 +2,8 @@ import { useState } from 'react';
 import { Outlet } from 'react-router-dom';
 
 import type { ContextType } from '~/common';
-import { useAuthContext, useAssistantsMap, useFileMap, useSearch } from '~/hooks';
-import { AssistantsMapContext, FileMapContext, SearchContext } from '~/Providers';
+import { AgentsMapContext, AssistantsMapContext, FileMapContext, SearchContext } from '~/Providers';
+import { useAuthContext, useAssistantsMap, useAgentsMap, useFileMap, useSearch } from '~/hooks';
 import { Nav, MobileNav } from '~/components/Nav';
 
 export default function Root() {
@@ -16,6 +16,7 @@ export default function Root() {
   const search = useSearch({ isAuthenticated });
   const fileMap = useFileMap({ isAuthenticated });
   const assistantsMap = useAssistantsMap({ isAuthenticated });
+  const agentsMap = useAgentsMap({ isAuthenticated });
 
   if (!isAuthenticated) {
     return null;
@@ -25,15 +26,17 @@ export default function Root() {
     <SearchContext.Provider value={search}>
       <FileMapContext.Provider value={fileMap}>
         <AssistantsMapContext.Provider value={assistantsMap}>
-          <div className="flex h-dvh">
-            <div className="relative z-0 flex h-full w-full overflow-hidden">
-              <Nav navVisible={navVisible} setNavVisible={setNavVisible} />
-              <div className="relative flex h-full max-w-full flex-1 flex-col overflow-hidden">
-                <MobileNav setNavVisible={setNavVisible} />
-                <Outlet context={{ navVisible, setNavVisible } satisfies ContextType} />
+          <AgentsMapContext.Provider value={agentsMap}>
+            <div className="flex h-dvh">
+              <div className="relative z-0 flex h-full w-full overflow-hidden">
+                <Nav navVisible={navVisible} setNavVisible={setNavVisible} />
+                <div className="relative flex h-full max-w-full flex-1 flex-col overflow-hidden">
+                  <MobileNav setNavVisible={setNavVisible} />
+                  <Outlet context={{ navVisible, setNavVisible } satisfies ContextType} />
+                </div>
               </div>
             </div>
-          </div>
+          </AgentsMapContext.Provider>
         </AssistantsMapContext.Provider>
       </FileMapContext.Provider>
     </SearchContext.Provider>