@stack-spot/ai-chat-widget 2.12.2 → 2.13.1

package/src/views/Agents/AgentsTab.tsx

@@ -9,6 +9,7 @@ import { NavigationComponent } from '../../components/ComponentNavigator'
 import { DescribedRadioGroup } from '../../components/form/DescribedRadioGroup'
 import { WorkspaceTabNavigator } from '../../components/WorkspaceTabNavigator'
 import { useCurrentChat } from '../../context/hooks'
+import { useIsFeatureFlagEnabled } from '../../hooks/enabled-feature-flags'
 import { useRightPanel } from '../../right-panel/hooks'
 import { ChatProperties } from '../../state/ChatState'
 import { AgentDescription } from './AgentDescription'
@@ -28,9 +29,10 @@ export const AgentsTab = ({ visibility, workspaceId, agent, showSubmitButton = t
   const chat = useCurrentChat()
   const { useFavorites, onAddFavorite, onRemoveFavorite } = useAgentFavorites()
   const [submitEnabled, setSubmitEnabled] = useState(false)
+  const featureFlag = useIsFeatureFlagEnabled('ENABLE_VERSION_CONTENT_AI')
   const listFavorites = useFavorites()
   const agentDefault = agentToolsClient.agentDefault.useQuery()
-
+  const [agentVersions, setAgentVersions] = useState<Record<string, number | undefined>>({})
   const [filter, setFilter] = useState<string | undefined>()
   const [apiFilter, setApiFilter] = useState<string | undefined>()
   const [isPending, startTransition] = useTransition()
@@ -59,15 +61,15 @@ export const AgentsTab = ({ visibility, workspaceId, agent, showSubmitButton = t
 
   const agents = workspaceId ? workspaceAgents : agentsData
 
-  const initialValue = useMemo<AgentResponseWithBuiltIn | undefined>(
-    () => {
-      const initial = agent.current
-        ? agents?.find(a => a.id === agent.current?.id)
-        : chat.get('agent') ? agents?.find(a => a.id === chat.get('agent')?.id) : agentDefault as unknown as AgentResponseWithBuiltIn
-      if (initial && !submitEnabled) setSubmitEnabled(true)
-      return initial
-    },
-    [agents],
+  const initialValue = useMemo<AgentResponseWithBuiltIn | undefined>(() => {
+    const initial = agent.current
+      ? agents?.find(a => a.id === agent.current?.id)
+      : chat.get('agent') ? 
+        agents?.find(a => a.id === chat.get('agent')?.id) : { ...agentDefault, suggested_prompts: null } as AgentResponseWithBuiltIn
+    if (initial && !submitEnabled) setSubmitEnabled(true)
+    return initial
+  },
+  [agents],
   )
 
   function submit() {
@@ -75,12 +77,26 @@ export const AgentsTab = ({ visibility, workspaceId, agent, showSubmitButton = t
     close()
   }
 
+  const onVersionChange = (ag: AgentResponseWithBuiltIn, version?: number) => {
+    setAgentVersions(prev => ({
+      ...prev,
+      [ag.id]: version,
+    }))
+              
+    if (agent.current?.id === ag.id) {
+      agent.current = {
+        ...agent.current,
+        agent_version_number: version,
+      }
+    }
+  }
+
   return <>
     <div className="content">
       <DescribedRadioGroup
         fetchNextPage={fetchNextPage}
         hasNextPage={hasNextPage && !workspaceId}
-        options={agents}
+        options={agents || []}
         initialValue={initialValue}
         filter={workspaceId ? undefined : filter}
         setFilter={workspaceId ? undefined : (value?: string) => {
@@ -89,7 +105,8 @@ export const AgentsTab = ({ visibility, workspaceId, agent, showSubmitButton = t
         }}
         onChange={(ag) => {
           agent.current = ag
-            ? { ...ag, label: ag.name, image: ag.avatar!, slug: ag.slug, builtIn: ag.visibility_level === 'built_in' }
+            ? { ...ag, label: ag.name, image: ag.avatar!, slug: ag.slug, builtIn: ag.visibility_level === 'built_in', 
+              agent_version_number: agentVersions[ag.id] ?? ag.version_number }
             : undefined
           setSubmitEnabled(true)
         }}
@@ -98,7 +115,8 @@ export const AgentsTab = ({ visibility, workspaceId, agent, showSubmitButton = t
           idOrSlug: ag.id,
           // below, "key" is important. I don't know why exactly, but sometimes the avatar doesn't update if we don't do this.
           image: <ImageWithFallback key={ag.id} src={ag.avatar ?? undefined} fallback={<Icon icon="Agent" />} />,
-          description: <AgentDescription agentId={ag.id} />,
+          description: <AgentDescription agentId={ag.id} enableVersionSelect={featureFlag.flagEnabled} 
+            onVersionChange={(version?: number) => onVersionChange(ag, version)} />,
           name: ag.name,
           listFavorites,
           onAddFavorite,

package/src/views/Agents/dictionary.ts

@@ -19,6 +19,7 @@ const dictionary = {
     tools: 'Tools',
     spots: 'Spots',
     multiAgent: 'Multi-agents',
+    version: 'Version',
   },
   pt: {
     title: 'Agentes',
@@ -38,7 +39,7 @@ const dictionary = {
     tools: 'Ferramentas',
     spots: 'Spots',
     multiAgent: 'Multi-agents',
-
+    version: 'Versão',
   },
 } satisfies Dictionary
 

package/src/views/Chat/ChatMessage.tsx

@@ -215,14 +215,16 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage, cust
   const chat = useCurrentChat()
   const agentId = entry.agent?.id ?? ''
   // enabled: we don't want to make any request if there is no agent
-  const [agent] = agentToolsClient.agent.useStatefulQuery({ agentId }, { enabled: !!agentId })
+  const [agent] = agentToolsClient.agentV2.useStatefulQuery({ agentCoreId: agentId, versionNumber: entry.agent?.agent_version_number }, 
+    { enabled: !!agentId })
   const toolkits = useMemo(() => [
-    ...agent?.toolkits?.builtin_toolkits ?? [],
-    ...agent?.toolkits?.custom_toolkits ?? [],
-    ...agent?.toolkits?.mcp_toolkits ?? [],
+    ...agent?.version?.toolkits?.builtin_toolkits ?? [],
+    ...agent?.version?.toolkits?.custom_toolkits ?? [],
+    ...agent?.version?.toolkits?.mcp_toolkits ?? [],
   ], [agent])
-  const [agentsTools] = agentToolsClient.agentsByIds.useStatefulQuery(
-    { searchAgentsRequest: { ids: entry.tools || [''] } }, { enabled: !!entry.tools?.length })
+  const agentsSearch = entry.tools?.map((id) => ({ agent_core_id: id })) ?? []
+  const [agentsTools] = agentToolsClient.agentsByIdsV2.useStatefulQuery(
+    { searchAgentsRequestV2: { agents:  agentsSearch } }, { enabled: !!entry.tools?.length })
   const [copied, setCopied] = useState(false)
   const [showUserButtonCopy, setShowUserButtonCopy] = useState(false)
   const isPlanning = useCurrentChatState('isPlaning') ?? false

package/src/views/Chat/events.ts

@@ -12,12 +12,13 @@ import { getSizeOfString } from '../../utils/string'
  * @param chat the chat state.
  */
 export async function onCopyCode(code: string, messageId: string, chat: ChatState) {
+  const { context, ...rest } = buildConversationContext(chat)
   try {
     await aiClient.createEvent.mutate({
       body: [{
         type: 'code_copied',
         code,
-        context: buildConversationContext(chat),
+        context: { ...context, ...rest },
         size: getSizeOfString(code),
         generated_at: new Date().getTime(),
         message_id: messageId,
@@ -37,6 +38,7 @@ export async function onCopyCode(code: string, messageId: string, chat: ChatStat
  */
 export function onCopyAll(entry: TextChatEntry, chat: ChatState) {
   copyTextToClipboardWithFallback(entry.content)
+  const { context, ...rest } = buildConversationContext(chat)
   return aiClient.createEvent.mutate({
     body: [
       {
@@ -45,7 +47,7 @@ export function onCopyAll(entry: TextChatEntry, chat: ChatState) {
         generated_at: new Date().getTime(),
         type: 'copied_all',
         knowledge_sources: entry.knowledgeSources?.map(ks => ({ slug: ks.slug, type: 'knowledge_source', name: ks.name })),
-        context: buildConversationContext(chat),
+        context: { ...context, ...rest },
         message_id: entry.messageId,
       },
     ],

package/src/views/ChatHistory/utils.ts

@@ -1,5 +1,5 @@
 import { agentToolsClient, aiClient, AnswerChatStep, ChatAgentTool, ChatStep, PlanningChatStep, workspaceClient } from '@stack-spot/portal-network'
-import { AgentModel } from '@stack-spot/portal-network/api/agent-tools'
+import { AgentCoreWithSingleVersionResponse2 } from '@stack-spot/portal-network/api/agent-tools'
 import { last } from 'lodash'
 import { ChatEntry } from '../../state/ChatEntry'
 import { ChatProperties, ChatState } from '../../state/ChatState'
@@ -56,11 +56,11 @@ function toJSONString(data: any) {
   return `${data}`
 }
 
-function findTool(agent: AgentModel | undefined, id: string) {
+function findTool(agent: AgentCoreWithSingleVersionResponse2 | undefined, id: string) {
   const allToolkits = [
-    ...agent?.toolkits?.builtin_toolkits ?? [],
-    ...agent?.toolkits?.custom_toolkits ?? [],
-    ...agent?.toolkits?.mcp_toolkits ?? [],
+    ...agent?.version?.toolkits?.builtin_toolkits ?? [],
+    ...agent?.version?.toolkits?.custom_toolkits ?? [],
+    ...agent?.version?.toolkits?.mcp_toolkits ?? [],
   ]
   for (const toolkit of allToolkits) {
     for (const tool of toolkit.tools ?? []) {
@@ -75,9 +75,9 @@ async function stepsFromAgentInfo(
 ): Promise<ChatStep[] | undefined> {
   const planningInfo = agentInfo?.find(i => i.type === 'planning' && !!i.data)
   if (planningInfo) {
-    let agent: AgentModel | undefined
+    let agent: AgentCoreWithSingleVersionResponse2 | undefined
     try {
-      agent = agentId ? await agentToolsClient.agent.query({ agentId }) : undefined
+      agent = agentId ? await agentToolsClient.agentV2.query({ agentCoreId: agentId }) : undefined
     } catch { /* empty */ }
     const planning: PlanningChatStep = {
       type: 'planning',
@@ -105,7 +105,7 @@ async function stepsFromAgentInfo(
             return {
               id: t.tool_id,
               executionId: t.tool_execution_id,
-              name: tool?.name,
+              name: ('name' in tool ? tool.name : ('function' in tool ? tool?.function?.name : undefined) ?? ''),
               description: 'description' in tool ? tool.description : undefined,
               image: toolkit ? (('image_url' in toolkit ? toolkit?.image_url : toolkit?.avatar) ?? undefined) : undefined,
               goal: t.goal,
@@ -139,21 +139,33 @@ function toolsFromAgentInfo(agentInfo: any[] | null | undefined): string[] {
  */
 export async function loadChat(widget: WidgetState, conversationId: string) {
   const chat = await aiClient.chat.query({ conversationId })
-  const historyAgentIds = chat.history?.map(item => item.custom_agent?.id).filter(Boolean) as string[] ?? []
+  const addedIds: Record<string, boolean> = {}
+  const historyAgents = chat.history?.reduce<{ agent_core_id: string, version_number?: number }[]>((accumulator, item) => {
+    const agentId = item.custom_agent?.id
+    if (agentId !== undefined && !addedIds[agentId]) {
+      addedIds[agentId] = true
+      accumulator.push({ agent_core_id: agentId, version_number: item.custom_agent?.version_number })
+    }
+    return accumulator
+  }, []) ?? []
+
   const [stack, workspace, agents] = await Promise.all([
     findStack(chat.ai_stack_id),
     findWorkspace(chat.workspace_id),
-    agentToolsClient.agentsByIds.query({ searchAgentsRequest: { ids: historyAgentIds } }),
+    agentToolsClient.agentsByIdsV2.query({ searchAgentsRequestV2: { agents: historyAgents } }),
   ])
   const agentsAsLabeledAgents: LabeledAgent[] = agents
     .map((a) => ({ ...a, label: a.name, image: a.avatar ?? '', builtIn: a.visibility_level === 'built_in' }))
-  
+
   const agent = agentsAsLabeledAgents.find(a => a.id === last(chat.history)?.custom_agent?.id)
   const builtIn = !!last(chat.history ?? [])?.custom_agent?.built_in
   widget.chatTabs.add(new ChatState({
     id: chat.id,
-    initial: { features: widget.chatFeatures, label: chat.title, stack, workspace, agent: agent ? { 
-      ...agent, builtIn } : undefined },
+    initial: {
+      features: widget.chatFeatures, label: chat.title, stack, workspace, agent: agent ? {
+        ...agent, builtIn,
+      } : undefined,
+    },
     interceptors: widget.interceptors,
     entries: await Promise.all(chat.history?.map(async (item, index) => new ChatEntry({
       agentType: item.agent === 'USER' ? 'user' : 'bot',

package/src/views/Home/CustomAgent.tsx

@@ -11,16 +11,16 @@ import { HomeBox } from './styled'
  * This is the home rendered when the agent is custom.
  */
 export const CustomAgent = () => {
-  const { id, label, image } = useCurrentChatState('agent') ?? {}
-  const [agent] = agentToolsClient.agent.useStatefulQuery({ agentId: id! })
+  const { id, label, image, agent_version_number } = useCurrentChatState('agent') ?? {}
+  const [agent] = agentToolsClient.agentV2.useStatefulQuery({ agentCoreId: id!, versionNumber: agent_version_number })
   const chat = useCurrentChat()
-  const suggestions = useMemo(() => agent?.conversation_starter?.map((prompt, index) => (
+  const suggestions = useMemo(() => agent?.version?.conversation_starter?.map((prompt, index) => (
     <QuickStartButton
       key={index}
       label={prompt}
       onClick={() => send(prompt)}
     />
-  )), [agent?.conversation_starter])
+  )), [agent?.version?.conversation_starter])
 
   function send(message: string) {
     chat.pushMessage(ChatEntry.createUserEntry(message))

package/src/views/MessageInput/AgentSelector.tsx

@@ -5,16 +5,16 @@ import { VisibilityLevelEnum } from '@stack-spot/portal-network/api/agent-tools'
 import { useCallback } from 'react'
 import { Selector } from '../../components/Selector'
 import { useCurrentChat, useCurrentChatState, useWidgetState } from '../../context/hooks'
+import { useIsFeatureFlagEnabled } from '../../hooks/enabled-feature-flags'
 import { agentRegex } from '../../regex'
 import { useAgentFavorites } from '../Agents/useAgentFavorites'
 
-type AgentWithSpaceName = AgentResponseWithBuiltIn
-
-const AgentItem = ({ avatar, name, spaceName }: AgentWithSpaceName) => {
+const AgentItem = ({ avatar, name, spaceName }: AgentResponseWithBuiltIn) => {
   const avatarComponent = avatar
     ? <img style={{ width: '32px', height: '32px', borderRadius: '50%' }} src={avatar} />
     : <IconBox size="md" icon="Agent" style={{ backgroundColor: 'transparent' }} />
 
+
   return <Row gap="8px" style={{ flexWrap: 'nowrap' }}>
     {avatarComponent}
     <div>
@@ -31,10 +31,11 @@ export const AgentSelector = ({ inputRef, isTrial }: {
   const chat = useCurrentChat()
   const isAgentEnabled = useCurrentChatState('features').agent
   const spotId = useWidgetState('features')?.workspaceId
+  const featureFlag = useIsFeatureFlagEnabled('ENABLE_VERSION_CONTENT_AI')
 
   const { useFavorites, onAddFavorite, onRemoveFavorite } = useAgentFavorites()
 
-  const onSelectItem = useCallback(async (agent: AgentResponseWithBuiltIn) => {
+  const onSelectItem = useCallback(async (agent: AgentResponseWithBuiltIn, selectedVersion?: number) => {
     const newValue = `@${agent.slug}`
     chat.set('nextMessage', undefined)
     chat.set(
@@ -42,10 +43,11 @@ export const AgentSelector = ({ inputRef, isTrial }: {
       {
         id: agent.id,
         label: agent.name,
-        image: agent.avatar, 
+        image: agent.avatar,
         slug: agent.slug, 
         builtIn: agent.builtIn,
         visibility_level: agent.visibility_level,
+        agent_version_number: selectedVersion || agent.version_number,
       },
     )
 
@@ -70,6 +72,12 @@ export const AgentSelector = ({ inputRef, isTrial }: {
     }) }
   }
 
+  const getAgentVersions = (id: string, enabled: boolean) => {
+    const [listVersions] = agentToolsClient.listAgentVersions.useStatefulQuery({ agentCoreId: id }, { enabled })
+    const optionsVersions = listVersions?.map((version) => version.version_number)
+    return optionsVersions
+  }
+
   return <Selector
     inputRef={inputRef}
     favorite={{ useFavorites, onAddFavorite, onRemoveFavorite }}
@@ -81,12 +89,14 @@ export const AgentSelector = ({ inputRef, isTrial }: {
       urlBuilder: (agent) => `/agents/${agent?.id}`,
       searchProp: 'name',
       sections: isTrial ?
-        ['favorite', 'personal', 'built_in', 'recently_used'] :
-        ['favorite', 'personal', 'workspace', 'account', 'shared', 'built_in', 'recently_used'],
+        ['recently_used', 'favorite', 'personal', 'built_in'] :
+        ['recently_used', 'favorite', 'personal', 'workspace', 'account', 'shared', 'built_in'],
       renderComponentItem: AgentItem,
       isEnabled: isAgentEnabled,
+      isEnabledVersionContent: featureFlag.flagEnabled,
       onSelect: onSelectItem,
       useData: getAgents,
+      useVersions: getAgentVersions,
     }}
   />
 }

package/src/views/MessageInput/ModelSwitcher/index.tsx

@@ -15,8 +15,9 @@ export const ModelSwitcher = () => {
   const chat = useCurrentChat()
   const [filter, setFilter] = useState('')
   const [visibleMenu, setVisibleMenu] = useState(false)
-  const [agentData, isLoadingAgentData] = agentToolsClient.agent.useStatefulQuery({ agentId: agentCurrentChat?.id || '' }, 
-    { enabled: !!agentCurrentChat?.id })
+  const [agentData, isLoadingAgentData] = agentToolsClient.agentV2.useStatefulQuery({ 
+    agentCoreId: agentCurrentChat?.id || '', versionNumber: agentCurrentChat?.agent_version_number }, 
+  { enabled: !!agentCurrentChat?.id })
   const [models, isLoadingModels] = 
     genAiInferenceClient.listModels.useStatefulQuery({ pageSize: 999, active: true })
 

package/src/views/MessageInput/ModelSwitcher/utils.tsx

@@ -1,6 +1,6 @@
 import { CitricIconOutline, CitricIconSocial } from '@stack-spot/citric-icons'
 import { IconBox } from '@stack-spot/citric-react'
-import { AgentModel } from '@stack-spot/portal-network/api/agent-tools'
+import { AgentCoreWithSingleVersionResponse2 } from '@stack-spot/portal-network/api/agent-tools'
 import { LlmModelsResponse, PaginatedResponseLlmModelsResponse } from '@stack-spot/portal-network/api/genAiInference'
 import { theme } from '@stack-spot/portal-theme'
 import { Dispatch, ReactElement } from 'react'
@@ -27,19 +27,20 @@ export const providerIcon: Record<string, CitricIconSocial | CitricIconOutline>
 export function getListModelsData(
   chat: ChatState, 
   setVisibleMenu: Dispatch<React.SetStateAction<boolean>>, 
-  agent?: AgentModel,
+  agent?: AgentCoreWithSingleVersionResponse2,
   models?: PaginatedResponseLlmModelsResponse) {
 
   const chatSelectedModelId = chat.get('selected_model_id')
   
-  const listModelsToShow = agent?.visibility_level !== 'built_in' && !!agent?.model_id ? 
-    models?.items.filter((model) => agent?.available_llm_models?.find((modelAvailable) => modelAvailable.model_id === model.id)) : 
+  const listModelsToShow = agent?.visibility_level !== 'built_in' && !!agent?.version?.model_id ? 
+    models?.items.filter((model) => agent?.version?.available_llm_models?.find((modelAvailable) => modelAvailable.model_id === model.id)) : 
     models?.items
 
-  const modelAvailableDefault = agent?.available_llm_models?.find((model) => (model.is_default || model.model_id === agent.model_id))
+  const modelAvailableDefault = agent?.version?.available_llm_models?.find((model) => 
+    (model.is_default || model.model_id === agent.version?.model_id))
   const modelListData = parseModelList(chat, setVisibleMenu, listModelsToShow, modelAvailableDefault?.model_id)
   
-  if (agent?.visibility_level === 'built_in' || !agent?.model_id) {
+  if (agent?.visibility_level === 'built_in' || !agent?.version?.model_id) {
     
     const modelDefaultProviderType = models?.items.find((modelAccount) => 
       chatSelectedModelId ? modelAccount.id === chatSelectedModelId : 
@@ -50,9 +51,9 @@ export function getListModelsData(
     return { modelName: modelDefaultActive?.label, modelProviderType: modelDefaultProviderType, listItemsData: modelListData }
   }
 
-  const modelAccount = models?.items.find((modelAccount) => modelAccount.id === (chatSelectedModelId || agent.model_id))
+  const modelAccount = models?.items.find((modelAccount) => modelAccount.id === (chatSelectedModelId || agent.version?.model_id))
   const modelProviderType = modelAccount?.model_configuration.provider.provider_type
-  const modelSelectedName = modelAccount?.display_name || modelAvailableDefault?.model_name || agent?.model_name
+  const modelSelectedName = modelAccount?.display_name || modelAvailableDefault?.model_name || agent?.version?.model_name
 
   const listItemsData = 
     modelListData && modelListData?.length > 0 ? modelListData : 

package/src/views/Resources.tsx

@@ -46,15 +46,19 @@ const ResourcesPanel = () => {
     const chat = widget.chatTabs.getAll().find(c => c.id === chatId)
     return chat?.getMessages().find(m => m.id === messageId)?.getValue()
   }, [messageId])
-  const [agent] = agentToolsClient.agent.useStatefulQuery({ agentId: message?.agent?.id || '' },
-    { enabled: !!message?.agent?.id })
+  
+  const [agent] = agentToolsClient.agentV2.useStatefulQuery({ 
+    agentCoreId: message?.agent?.id || '', versionNumber: message?.agent?.agent_version_number },
+  { enabled: !!message?.agent?.id })
   const toolkits = useMemo(() => [
-    ...agent?.toolkits?.builtin_toolkits ?? [],
-    ...agent?.toolkits?.custom_toolkits ?? [],
-    ...agent?.toolkits?.mcp_toolkits ?? [],
+    ...agent?.version?.toolkits?.builtin_toolkits ?? [],
+    ...agent?.version?.toolkits?.custom_toolkits ?? [],
+    ...agent?.version?.toolkits?.mcp_toolkits ?? [],
   ], [agent])
   const tools = useMemo(() => message?.tools?.map(id => toolById(id, toolkits)), [messageId, toolkits])
-  const [agentsTools] = agentToolsClient.agentsByIds.useStatefulQuery({ searchAgentsRequest:{ ids: message?.tools || [] } })
+  const agentsSearch = message?.tools?.map((id) => ({ agent_core_id: id })) ?? []
+  const [agentsTools] = agentToolsClient.agentsByIdsV2.useStatefulQuery(
+    { searchAgentsRequestV2: { agents:  agentsSearch } })
   const hasAgentTool = useMemo(() => message?.tools?.some(id => agentsTools?.find((agent) => agent.id === id)), [messageId])
 
   const header = (image?: string, label?: string) => (

package/src/views/Tools.tsx

@@ -42,11 +42,12 @@ const ToolsPanel = () => {
   }, [messageId])
 
   const [toolKits] = agentToolsClient.tools.useStatefulQuery({}, { enabled: !!message?.agent?.id })
-  const [agent] = agentToolsClient.agent.useStatefulQuery({ agentId: message?.agent?.id || '' },
-    { enabled: !!message?.agent?.id })
+  const [agent] = agentToolsClient.agentV2.useStatefulQuery({ agentCoreId: message?.agent?.id || '', 
+    versionNumber: message?.agent?.agent_version_number },
+  { enabled: !!message?.agent?.id })
   const tools = useMemo(() => message?.tools?.map(id => toolById(id, toolKits)), [messageId, toolKits])
-  const customTools = useMemo(() => message?.tools?.map(id => toolById(id, agent?.toolkits?.custom_toolkits)),
-    [messageId, agent?.toolkits?.custom_toolkits])
+  const customTools = useMemo(() => message?.tools?.map(id => toolById(id, agent?.version?.toolkits?.custom_toolkits)),
+    [messageId, agent?.version?.toolkits?.custom_toolkits])
   return !!(tools?.length || customTools?.length) && (
     <ToolList>
       {[...(tools || []), ...(customTools || [])].map(