🚧 chore: merge latest dev build to main repo (#3844)

* agents - phase 1 (#30)

* chore: copy assistant files

* feat: frontend and data-provider

* feat: backend get endpoint test

* fix(MessageEndpointIcon): switched to AgentName and AgentAvatar

* fix: small fixes

* fix: agent endpoint config

* fix: show Agent Builder

* chore: install agentus

* chore: initial scaffolding for agents

* fix: updated Assistant logic to Agent Logic for some Agent components

* WIP first pass, demo of agent package

* WIP: initial backend infra for agents

* fix: agent list error

* wip: agents routing

* chore: Refactor useSSE hook to handle different data events

* wip: correctly emit events

* chore: Update @librechat/agentus npm dependency to version 1.0.9

* remove comment

* first pass: streaming agent text

* chore: Remove @librechat/agentus root-level workspace npm dependency

* feat: Agent Schema and Model

* fix: content handling fixes

* fix: content message save

* WIP: new content data

* fix: run step issue with tool calls

* chore: Update @librechat/agentus npm dependency to version 1.1.5

* feat: update controller and agent routes

* wip: initial backend tool and tool error handling support

* wip: tool chunks

* chore: Update @librechat/agentus npm dependency to version 1.1.7

* chore: update tool_call typing, add test conditions and logs

* fix: create agent

* fix: create agent

* first pass: render completed content parts

* fix: remove logging, fix step handler typing

* chore: Update @librechat/agentus npm dependency to version 1.1.9

* refactor: cleanup maps on unmount

* chore: Update BaseClient.js to safely count tokens for string, number, and boolean values

* fix: support subsequent messages with tool_calls

* chore: export order

* fix: select agent

* fix: tool call types and handling

* chore: switch to anthropic for testing

* fix: AgentSelect

* refactor: experimental: OpenAIClient to use array for intermediateReply

* fix(useSSE): revert old condition for streaming legacy client tokens

* fix: lint

* revert `agent_id` to `id`

* chore: update localization keys for agent-related components

* feat: zod schema handling for actions

* refactor(actions): if no params, no zodSchema

* chore: Update @librechat/agentus npm dependency to version 1.2.1

* feat: first pass, actions

* refactor: empty schema for actions without params

* feat: Update createRun function to accept additional options

* fix: message payload formatting; feat: add more client options

* fix: ToolCall component rendering when action has no args but has output

* refactor(ToolCall): allow non-stringy args

* WIP: first pass, correctly formatted tool_calls between providers

* refactor: Remove duplicate import of 'roles' module

* refactor: Exclude 'vite.config.ts' from TypeScript compilation

* refactor: fix agent related types
> - no need to use endpoint/model fields for identifying agent metadata
> - add `provider` distinction for agent-configured 'endpoint'
- no need for agent-endpoint map
- reduce complexity of tools as functions into tools as string[]
- fix types related to above changes
- reduce unnecessary variables for queries/mutations and corresponding react-query keys

* refactor: Add tools and tool_kwargs fields to agent schema

* refactor: Remove unused code and update dependencies

* refactor: Update updateAgentHandler to use req.body directly

* refactor: Update AgentSelect component to use localized hooks

* refactor: Update agent schema to include tools and provider fields

* refactor(AgentPanel): add scrollbar gutter, add provider field to form, fix agent schema required values

* refactor: Update AgentSwitcher component to use selectedAgentId instead of selectedAgent

* refactor: Update AgentPanel component to include alternateName import and defaultAgentFormValues

* refactor(SelectDropDown): allow setting value as option while still supporting legacy usage (string values only)

* refactor: SelectDropdown changes - Only necessary when the available values are objects with label/value fields and the selected value is expected to be a string.

* refactor: TypeError issues and handle provider as option

* feat: Add placeholder for provider selection in AgentPanel component

* refactor: Update agent schema to include author and provider fields

* fix: show expected 'create agent' placeholder when creating agent

* chore: fix localization strings, hide capabilities form for now

* chore: typing

* refactor: import order and use compact agents schema for now

* chore: typing

* refactor: Update AgentForm type to use AgentCapabilities

* fix agent form agent selection issues

* feat: responsive agent selection

* fix: Handle cancelled fetch in useSelectAgent hook

* fix: reset agent form on accordion close/open

* feat: Add agent_id to default conversation for agents endpoint

* feat: agents endpoint request handling

* refactor: reset conversation model on agent select

* refactor: add `additional_instructions` to conversation schema, organize other fields

* chore: casing

* chore: types

* refactor(loadAgentTools): explicitly pass agent_id, do not pass `model` to loadAgentTools for now, load action sets by agent_id

* WIP: initial draft of real agent client initialization

* WIP: first pass, anthropic agent requests

* feat: remember last selected agent

* feat: openai and azure connected

* fix: prioritize agent model for runs unless an explicit override model is passed from client

* feat: Agent Actions

* fix: save agent id to convo

* feat: model panel (#29)

* feat: model panel

* bring back comments

* fix: method still null

* fix: AgentPanel FormContext

* feat: add more parameters

* fix: style issues; refactor: Agent Controller

* fix: cherry-pick

* fix: Update AgentAvatar component to use AssistantIcon instead of BrainCircuit

* feat: OGDialog for delete agent; feat(assistant): update Agent types, introduced `model_parameters`

* feat: icon and general `model_parameters` update

* feat: use react-hook-form better

* fix: agent builder form reset issue when switching panels

* refactor: modularize agent builder form

---------

Co-authored-by: Danny Avila <danny@librechat.ai>

* fix: AgentPanel and ModelPanel type issues and use `useFormContext` and `watch` instead of `methods` directly and `useWatch`.

* fix: tool call issues due to invalid input (anthropic) of empty string

* fix: handle empty text in Part component

---------

Co-authored-by: Marco Beretta <81851188+berry-13@users.noreply.github.com>

* refactor: remove form ModelPanel and fixed nested ternary expressions in AgentConfig

* fix: Model Parameters not saved correctly

* refactor: remove console log

* feat: avatar upload and get for Agents (#36)

Co-authored-by: Marco Beretta <81851188+berry-13@users.noreply.github.com>

* chore: update to public package

* fix: typing, optional chaining

* fix: cursor not showing for content parts

* chore: conditionally enable agents

* ci: fix azure test

* ci: fix frontend tests, fix eslint api

* refactor: Remove unused errorContentPart variable

* continue of the agent message PR (#40)

* last fixes

* fix: agentMap

* pr merge test  (#41)

* fix: model icon not fetching correctly

* remove console logs

* feat: agent name

* refactor: pass documentsMap as a prop to allow re-render of assistant form

* refactor: pass documentsMap as a prop to allow re-render of assistant form

* chore: Bump version to 0.7.419

* fix: TypeError: Cannot read properties of undefined (reading 'id')

* refactor: update AgentSwitcher component to use ControlCombobox instead of Combobox

---------

Co-authored-by: Marco Beretta <81851188+berry-13@users.noreply.github.com>

client/src/hooks/Agents/index.ts

@@ -0,0 +1,2 @@
+export { default as useAgentsMap } from './useAgentsMap';
+export { default as useSelectAgent } from './useSelectAgent';

client/src/hooks/Agents/useAgentsMap.ts

@@ -0,0 +1,21 @@
+import { TAgentsMap } from 'librechat-data-provider';
+import { useMemo } from 'react';
+import { useListAgentsQuery } from '~/data-provider';
+import { mapAgents } from '~/utils';
+
+export default function useAgentsMap({
+  isAuthenticated,
+}: {
+  isAuthenticated: boolean;
+}): TAgentsMap | undefined {
+  const { data: agentsList = null } = useListAgentsQuery(undefined, {
+    select: (res) => mapAgents(res.data),
+    enabled: isAuthenticated,
+  });
+
+  const agents = useMemo<TAgentsMap | undefined>(() => {
+    return agentsList !== null ? agentsList : undefined;
+  }, [agentsList]);
+
+  return agents;
+}

client/src/hooks/Agents/useSelectAgent.ts

@@ -0,0 +1,90 @@
+import { useCallback, useState } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { EModelEndpoint, isAgentsEndpoint, Constants, QueryKeys } from 'librechat-data-provider';
+import type { TConversation, TPreset, Agent } from 'librechat-data-provider';
+import useDefaultConvo from '~/hooks/Conversations/useDefaultConvo';
+import { useAgentsMapContext } from '~/Providers/AgentsMapContext';
+import { useGetAgentByIdQuery } from '~/data-provider';
+import { useChatContext } from '~/Providers/ChatContext';
+
+export default function useSelectAgent() {
+  const queryClient = useQueryClient();
+  const getDefaultConversation = useDefaultConvo();
+  const { conversation, newConversation } = useChatContext();
+  const agentsMap = useAgentsMapContext();
+  const [selectedAgentId, setSelectedAgentId] = useState<string | null>(
+    conversation?.agent_id ?? null,
+  );
+
+  const agentQuery = useGetAgentByIdQuery(selectedAgentId ?? '', {
+    enabled: !!selectedAgentId,
+  });
+
+  const updateConversation = useCallback(
+    (agent: Partial<Agent>, template: Partial<TPreset | TConversation>) => {
+      if (isAgentsEndpoint(conversation?.endpoint)) {
+        const currentConvo = getDefaultConversation({
+          conversation: { ...(conversation ?? {}), agent_id: agent.id },
+          preset: template,
+        });
+        newConversation({
+          template: currentConvo,
+          preset: template as Partial<TPreset>,
+          keepLatestMessage: true,
+        });
+      } else {
+        newConversation({
+          template: { ...(template as Partial<TConversation>) },
+          preset: template as Partial<TPreset>,
+        });
+      }
+    },
+    [conversation, getDefaultConversation, newConversation],
+  );
+
+  const onSelect = useCallback(
+    async (value: string) => {
+      const agent = agentsMap?.[value];
+      if (!agent) {
+        return;
+      }
+
+      setSelectedAgentId(agent.id);
+
+      const template: Partial<TPreset | TConversation> = {
+        endpoint: EModelEndpoint.agents,
+        agent_id: agent.id,
+        conversationId: Constants.NEW_CONVO as string,
+      };
+
+      updateConversation({ id: agent.id }, template);
+
+      // Fetch full agent data in the background
+      try {
+        await queryClient.invalidateQueries(
+          {
+            queryKey: [QueryKeys.agent, agent.id],
+            exact: true,
+            refetchType: 'active',
+          },
+          { throwOnError: true },
+        );
+
+        const { data: fullAgent } = await agentQuery.refetch();
+        if (fullAgent) {
+          updateConversation(fullAgent, { ...template, agent_id: fullAgent.id });
+        }
+      } catch (error) {
+        if ((error as { silent: boolean } | undefined)?.silent) {
+          console.warn('Current fetch was cancelled');
+          return;
+        }
+        console.error('Error fetching full agent data:', error);
+        updateConversation({}, { ...template, agent_id: undefined });
+      }
+    },
+    [agentsMap, updateConversation, queryClient, agentQuery],
+  );
+
+  return { onSelect };
+}

client/src/hooks/Chat/useChatFunctions.ts

@@ -6,6 +6,7 @@ import {
   ContentTypes,
   parseCompactConvo,
   isAssistantsEndpoint,
+  EModelEndpoint,
 } from 'librechat-data-provider';
 import { useSetRecoilState, useResetRecoilState, useRecoilValue } from 'recoil';
 import type {
@@ -24,6 +25,12 @@ import { getEndpointField, logger } from '~/utils';
 import useUserKey from '~/hooks/Input/useUserKey';
 import store from '~/store';
 
+const logChatRequest = (request: Record<string, unknown>) => {
+  logger.log('=====================================\nAsk function called with:');
+  logger.dir(request);
+  logger.log('=====================================');
+};
+
 export default function useChatFunctions({
   index = 0,
   files,
@@ -109,17 +116,17 @@ export default function useChatFunctions({
     // this is not a real messageId, it is used as placeholder before real messageId returned
     text = text.trim();
     const intermediateId = overrideUserMessageId ?? v4();
-    parentMessageId = parentMessageId || latestMessage?.messageId || Constants.NO_PARENT;
+    parentMessageId = parentMessageId ?? latestMessage?.messageId ?? Constants.NO_PARENT;
 
-    logger.dir('Ask function called with:', {
+    logChatRequest({
       index,
+      conversation,
       latestMessage,
       conversationId,
       intermediateId,
       parentMessageId,
       currentMessages,
     });
-    logger.log('=====================================');
 
     if (conversationId == Constants.NEW_CONVO) {
       parentMessageId = Constants.NO_PARENT;
@@ -147,17 +154,21 @@ export default function useChatFunctions({
     });
 
     const { modelDisplayLabel } = endpointsConfig?.[endpoint ?? ''] ?? {};
-    const endpointOption = {
-      ...convo,
-      endpoint,
-      thread_id,
-      endpointType,
-      overrideConvoId,
-      key: getExpiry(),
-      modelDisplayLabel,
-      overrideUserMessageId,
-      artifacts: getArtifactsMode({ codeArtifacts, includeShadcnui, customPromptMode }),
-    } as TEndpointOption;
+    const endpointOption = Object.assign(
+      {
+        endpoint,
+        endpointType,
+        overrideConvoId,
+        overrideUserMessageId,
+        artifacts: getArtifactsMode({ codeArtifacts, includeShadcnui, customPromptMode }),
+      },
+      convo,
+    ) as TEndpointOption;
+    if (endpoint !== EModelEndpoint.agents) {
+      endpointOption.key = getExpiry();
+      endpointOption.thread_id = thread_id;
+      endpointOption.modelDisplayLabel = modelDisplayLabel;
+    }
     const responseSender = getSender({ model: conversation?.model, ...endpointOption });
 
     const currentMsg: TMessage = {
@@ -180,7 +191,7 @@ export default function useChatFunctions({
       currentMsg.files = Array.from(files.values()).map((file) => ({
         file_id: file.file_id,
         filepath: file.filepath,
-        type: file.type || '', // Ensure type is not undefined
+        type: file.type ?? '', // Ensure type is not undefined
         height: file.height,
         width: file.width,
       }));
@@ -219,6 +230,17 @@ export default function useChatFunctions({
           },
         },
       ];
+    } else if (endpoint === EModelEndpoint.agents) {
+      initialResponse.model = conversation?.agent_id ?? '';
+      initialResponse.text = '';
+      initialResponse.content = [
+        {
+          type: ContentTypes.TEXT,
+          [ContentTypes.TEXT]: {
+            value: responseText,
+          },
+        },
+      ];
     } else {
       setShowStopButton(true);
     }

client/src/hooks/Input/useTextarea.ts

@@ -52,7 +52,7 @@ export default function useTextarea({
 
   const assistant =
     isAssistantsEndpoint(endpoint) && assistantMap?.[endpoint ?? '']?.[assistant_id ?? ''];
-  const assistantName = (assistant && assistant?.name) || '';
+  const assistantName = (assistant && assistant.name) || '';
 
   useEffect(() => {
     if (activePrompt && textAreaRef.current) {
@@ -172,7 +172,7 @@ export default function useTextarea({
         !enterToSend &&
         !isCtrlEnter &&
         textAreaRef.current &&
-        !isComposing?.current
+        !isComposing.current
       ) {
         e.preventDefault();
         insertTextAtCursor(textAreaRef.current, '\n');
@@ -180,7 +180,7 @@ export default function useTextarea({
         return;
       }
 
-      if ((isNonShiftEnter || isCtrlEnter) && !isComposing?.current) {
+      if ((isNonShiftEnter || isCtrlEnter) && !isComposing.current) {
         const globalAudio = document.getElementById(globalAudioId) as HTMLAudioElement;
         if (globalAudio) {
           console.log('Unmuting global audio');

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,

client/src/hooks/Nav/useSideNavLinks.ts

@@ -8,6 +8,7 @@ import {
 import {
   EModelEndpoint,
   isAssistantsEndpoint,
+  isAgentsEndpoint,
   PermissionTypes,
   Permissions,
 } from 'librechat-data-provider';
@@ -15,6 +16,7 @@ import type { TConfig, TInterfaceConfig } from 'librechat-data-provider';
 import type { NavLink } from '~/common';
 import BookmarkPanel from '~/components/SidePanel/Bookmarks/BookmarkPanel';
 import PanelSwitch from '~/components/SidePanel/Builder/PanelSwitch';
+import AgentPanelSwitch from '~/components/SidePanel/Agents/AgentPanelSwitch';
 import PromptsAccordion from '~/components/Prompts/PromptsAccordion';
 // import Parameters from '~/components/SidePanel/Parameters/Panel';
 import FilesPanel from '~/components/SidePanel/Files/Panel';
@@ -24,12 +26,14 @@ import { useHasAccess } from '~/hooks';
 export default function useSideNavLinks({
   hidePanel,
   assistants,
+  agents,
   keyProvided,
   endpoint,
   interfaceConfig,
 }: {
   hidePanel: () => void;
   assistants?: TConfig | null;
+  agents?: TConfig | null;
   keyProvided: boolean;
   endpoint?: EModelEndpoint | null;
   interfaceConfig: Partial<TInterfaceConfig>;
@@ -61,6 +65,22 @@ export default function useSideNavLinks({
       });
     }
 
+    if (
+      isAgentsEndpoint(endpoint) &&
+      agents &&
+      // agents.disableBuilder !== true &&
+      keyProvided &&
+      interfaceConfig.parameters
+    ) {
+      links.push({
+        title: 'com_sidepanel_agent_builder',
+        label: '',
+        icon: Blocks,
+        id: 'agents',
+        Component: AgentPanelSwitch,
+      });
+    }
+
     if (hasAccessToPrompts) {
       links.push({
         title: 'com_ui_prompts',
@@ -100,6 +120,7 @@ export default function useSideNavLinks({
     return links;
   }, [
     assistants,
+    agents,
     keyProvided,
     hidePanel,
     endpoint,

client/src/hooks/SSE/index.ts

@@ -1,2 +1,3 @@
 export { default as useSSE } from './useSSE';
+export { default as useStepHandler } from './useStepHandler';
 export { default as useContentHandler } from './useContentHandler';

client/src/hooks/SSE/useEventHandlers.ts

@@ -19,6 +19,7 @@ import type {
 } from 'librechat-data-provider';
 import type { SetterOrUpdater, Resetter } from 'recoil';
 import type { TResData, TFinalResData, ConvoGenerator } from '~/common';
+import type { TGenTitleMutation } from '~/data-provider';
 import {
   scrollToEnd,
   addConversation,
@@ -27,7 +28,7 @@ import {
   getConversationById,
 } from '~/utils';
 import useContentHandler from '~/hooks/SSE/useContentHandler';
-import type { TGenTitleMutation } from '~/data-provider';
+import useStepHandler from '~/hooks/SSE/useStepHandler';
 import { useAuthContext } from '~/hooks/AuthContext';
 import { useLiveAnnouncer } from '~/Providers';
 import store from '~/store';
@@ -77,6 +78,7 @@ export default function useEventHandlers({
   const { token } = useAuthContext();
 
   const contentHandler = useContentHandler({ setMessages, getMessages });
+  const stepHandler = useStepHandler({ setMessages, getMessages });
 
   const messageHandler = useCallback(
     (data: string | undefined, submission: EventSubmission) => {
@@ -586,6 +588,7 @@ export default function useEventHandlers({
   );
 
   return {
+    stepHandler,
     syncHandler,
     finalHandler,
     errorHandler,

client/src/hooks/SSE/useSSE.ts

@@ -5,6 +5,7 @@ import {
   /* @ts-ignore */
   SSE,
   createPayload,
+  isAgentsEndpoint,
   removeNullishValues,
   isAssistantsEndpoint,
 } from 'librechat-data-provider';
@@ -51,6 +52,7 @@ export default function useSSE(
   } = chatHelpers;
 
   const {
+    stepHandler,
     syncHandler,
     finalHandler,
     errorHandler,
@@ -85,7 +87,7 @@ export default function useSSE(
 
     const payloadData = createPayload(submission);
     let { payload } = payloadData;
-    if (isAssistantsEndpoint(payload.endpoint)) {
+    if (isAssistantsEndpoint(payload.endpoint) || isAgentsEndpoint(payload.endpoint)) {
       payload = removeNullishValues(payload);
     }
 
@@ -104,8 +106,8 @@ export default function useSSE(
         finalHandler(data, { ...submission, plugins } as EventSubmission);
         (startupConfig?.checkBalance ?? false) && balanceQuery.refetch();
         console.log('final', data);
-      }
-      if (data.created != null) {
+        return;
+      } else if (data.created != null) {
         const runId = v4();
         setActiveRunId(runId);
         userMessage = {
@@ -115,6 +117,8 @@ export default function useSSE(
         };
 
         createdHandler(data, { ...submission, userMessage } as EventSubmission);
+      } else if (data.event) {
+        stepHandler(data);
       } else if (data.sync != null) {
         const runId = v4();
         setActiveRunId(runId);

client/src/hooks/SSE/useStepHandler.ts

@@ -0,0 +1,220 @@
+import { useCallback, useRef } from 'react';
+import { StepTypes, ContentTypes, ToolCallTypes } from 'librechat-data-provider';
+import type { Agents, PartMetadata, TMessage } from 'librechat-data-provider';
+import { getNonEmptyValue } from 'librechat-data-provider';
+
+type TUseStepHandler = {
+  setMessages: (messages: TMessage[]) => void;
+  getMessages: () => TMessage[] | undefined;
+};
+
+type TStepEvent = {
+  event: string;
+  data: Agents.MessageDeltaEvent | Agents.RunStep | Agents.ToolEndEvent;
+};
+
+export default function useStepHandler({ setMessages, getMessages }: TUseStepHandler) {
+  const toolCallIdMap = useRef(new Map<string, string>());
+  const messageMap = useRef(new Map<string, TMessage>());
+  const stepMap = useRef(new Map<string, Agents.RunStep>());
+
+  const updateContent = (
+    message: TMessage,
+    index: number,
+    contentPart: Agents.MessageContentComplex,
+    finalUpdate = false,
+  ) => {
+    if (!contentPart.type) {
+      console.warn('No content type found in content part');
+      return message;
+    }
+
+    const updatedContent = [...(message.content || [])];
+    if (!updatedContent[index]) {
+      updatedContent[index] = { type: contentPart.type };
+    }
+
+    if (
+      contentPart.type.startsWith(ContentTypes.TEXT) &&
+      ContentTypes.TEXT in contentPart &&
+      typeof contentPart.text === 'string'
+    ) {
+      const currentContent = updatedContent[index] as { type: ContentTypes.TEXT; text: string };
+      updatedContent[index] = {
+        type: ContentTypes.TEXT,
+        text: (currentContent.text || '') + contentPart.text,
+      };
+    } else if (contentPart.type === 'image_url' && 'image_url' in contentPart) {
+      const currentContent = updatedContent[index] as { type: 'image_url'; image_url: string };
+      updatedContent[index] = {
+        ...currentContent,
+      };
+    } else if (contentPart.type === ContentTypes.TOOL_CALL && 'tool_call' in contentPart) {
+      const existingContent = updatedContent[index] as Agents.ToolCallContent;
+
+      const args = finalUpdate
+        ? contentPart.tool_call.args
+        : (existingContent?.tool_call?.args || '') + (contentPart.tool_call.args || '');
+
+      const id = getNonEmptyValue([contentPart.tool_call.id, existingContent?.tool_call?.id]) ?? '';
+      const name =
+        getNonEmptyValue([contentPart.tool_call.name, existingContent?.tool_call?.name]) ?? '';
+
+      const newToolCall: Agents.ToolCall & PartMetadata = {
+        id,
+        name,
+        args,
+        type: ToolCallTypes.TOOL_CALL,
+      };
+
+      if (finalUpdate) {
+        newToolCall.progress = 1;
+        newToolCall.output = contentPart.tool_call.output;
+      }
+
+      updatedContent[index] = {
+        type: ContentTypes.TOOL_CALL,
+        tool_call: newToolCall,
+      };
+    }
+
+    return { ...message, content: updatedContent };
+  };
+
+  return useCallback(
+    ({ event, data }: TStepEvent) => {
+      const messages = getMessages() || [];
+
+      if (event === 'on_run_step') {
+        const runStep = data as Agents.RunStep;
+        const responseMessageId = runStep.runId;
+        if (!responseMessageId) {
+          console.warn('No message id found in run step event');
+          return;
+        }
+
+        stepMap.current.set(runStep.id, runStep);
+        let response = messageMap.current.get(responseMessageId);
+
+        if (!response) {
+          const responseMessage = messages[messages.length - 1] as TMessage;
+          const userMessage = messages[messages.length - 2];
+
+          response = {
+            ...responseMessage,
+            parentMessageId: userMessage?.messageId,
+            conversationId: userMessage?.conversationId,
+            messageId: responseMessageId,
+            content: [],
+          };
+
+          messageMap.current.set(responseMessageId, response);
+          setMessages([...messages.slice(0, -1), response]);
+        }
+
+        // Store tool call IDs if present
+        if (runStep.stepDetails.type === StepTypes.TOOL_CALLS) {
+          runStep.stepDetails.tool_calls.forEach((toolCall) => {
+            if ('id' in toolCall && toolCall.id) {
+              toolCallIdMap.current.set(runStep.id, toolCall.id);
+            }
+          });
+        }
+      } else if (event === 'on_message_delta') {
+        const messageDelta = data as Agents.MessageDeltaEvent;
+        const runStep = stepMap.current.get(messageDelta.id);
+        if (!runStep || !runStep.runId) {
+          console.warn('No run step or runId found for message delta event');
+          return;
+        }
+
+        const response = messageMap.current.get(runStep.runId);
+        if (response && messageDelta.delta.content) {
+          const contentPart = Array.isArray(messageDelta.delta.content)
+            ? messageDelta.delta.content[0]
+            : messageDelta.delta.content;
+
+          const updatedResponse = updateContent(response, runStep.index, contentPart);
+
+          messageMap.current.set(runStep.runId, updatedResponse);
+          const currentMessages = getMessages() || [];
+          setMessages([...currentMessages.slice(0, -1), updatedResponse]);
+        }
+      } else if (event === 'on_run_step_delta') {
+        const runStepDelta = data as Agents.RunStepDeltaEvent;
+        const runStep = stepMap.current.get(runStepDelta.id);
+        if (!runStep || !runStep.runId) {
+          console.warn('No run step or runId found for run step delta event');
+          return;
+        }
+
+        const response = messageMap.current.get(runStep.runId);
+        if (
+          response &&
+          runStepDelta.delta.type === StepTypes.TOOL_CALLS &&
+          runStepDelta.delta.tool_calls
+        ) {
+          let updatedResponse = { ...response };
+
+          runStepDelta.delta.tool_calls.forEach((toolCallDelta) => {
+            const toolCallId = toolCallIdMap.current.get(runStepDelta.id) || '';
+
+            const contentPart: Agents.MessageContentComplex = {
+              type: ContentTypes.TOOL_CALL,
+              tool_call: {
+                name: toolCallDelta.name ?? '',
+                args: toolCallDelta.args || '',
+                id: toolCallId,
+              },
+            };
+
+            updatedResponse = updateContent(updatedResponse, runStep.index, contentPart);
+          });
+
+          messageMap.current.set(runStep.runId, updatedResponse);
+          const updatedMessages = messages.map((msg) =>
+            msg.messageId === runStep.runId ? updatedResponse : msg,
+          );
+
+          setMessages(updatedMessages);
+        }
+      } else if (event === 'on_run_step_completed') {
+        const { result } = data as unknown as { result: Agents.ToolEndEvent };
+
+        const { id: stepId } = result;
+
+        const runStep = stepMap.current.get(stepId);
+        if (!runStep || !runStep.runId) {
+          console.warn('No run step or runId found for completed tool call event');
+          return;
+        }
+
+        const response = messageMap.current.get(runStep.runId);
+        if (response) {
+          let updatedResponse = { ...response };
+
+          const contentPart: Agents.MessageContentComplex = {
+            type: ContentTypes.TOOL_CALL,
+            tool_call: result.tool_call,
+          };
+
+          updatedResponse = updateContent(updatedResponse, runStep.index, contentPart, true);
+
+          messageMap.current.set(runStep.runId, updatedResponse);
+          const updatedMessages = messages.map((msg) =>
+            msg.messageId === runStep.runId ? updatedResponse : msg,
+          );
+
+          setMessages(updatedMessages);
+        }
+      }
+
+      return () => {
+        toolCallIdMap.current.clear();
+        messageMap.current.clear();
+        stepMap.current.clear();
+      };
+    },
+    [getMessages, stepMap, messageMap, setMessages, toolCallIdMap],
+  );
+}

client/src/hooks/index.ts

@@ -1,5 +1,6 @@
 export * from './Audio';
 export * from './Assistants';
+export * from './Agents';
 export * from './Chat';
 export * from './Config';
 export * from './Conversations';