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

package/dist/views/Tools.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tools.js","sourceRoot":"","sources":["../../src/views/Tools.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Tools.js","sourceRoot":"","sources":["../../src/views/Tools.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stack-spot/ai-chat-widget",
-  "version": "2.12.2",
+  "version": "2.13.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -16,7 +16,7 @@
     "@citric/core": "^6.4.0",
     "@stack-spot/portal-components": "^2.27.3",
     "@citric/icons": "^5.13.0",
-    "@stack-spot/portal-network": "0.218.1",
+    "@stack-spot/portal-network": "0.219.0",
     "@citric/ui": "^6.10.2",
     "@stack-spot/portal-translate": "^2.1.0",
     "lodash": "^4.17.0",

package/src/app-metadata.json

@@ -1,7 +1,7 @@
 {
   "name": "@stack-spot/ai-chat-widget",
-  "version": "2.12.2",
-  "date": "Wed Feb 04 2026 13:13:16 GMT+0000 (Coordinated Universal Time)",
+  "version": "2.13.0",
+  "date": "Mon Feb 09 2026 20:24:04 GMT+0000 (Coordinated Universal Time)",
   "dependencies": [
     {
       "name": "@stack-spot/app-metadata",
@@ -125,7 +125,7 @@
     },
     {
       "name": "@stack-spot/portal-network",
-      "version": "0.218.1(@stack-spot/auth@6.1.0)(@stack-spot/opa@2.5.0(@stack-spot/auth@6.1.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@stack-spot/portal-translate@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@tanstack/react-query@5.59.16(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)"
+      "version": "0.219.0(@stack-spot/auth@6.1.0)(@stack-spot/opa@2.5.0(@stack-spot/auth@6.1.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@stack-spot/portal-translate@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@tanstack/react-query@5.59.16(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)"
     },
     {
       "name": "@stack-spot/portal-theme",

package/src/components/Selector/SelectVersion.tsx

@@ -0,0 +1,55 @@
+
+import { Select } from '@stack-spot/citric-react'
+import { useTranslate } from '@stack-spot/portal-translate'
+import { Dispatch, MouseEvent, SetStateAction, useEffect, useState } from 'react'
+import { isEqual } from 'lodash'
+import { VersionSelector } from './styled'
+
+interface Props {
+  value?: number,
+  onChange: Dispatch<SetStateAction<number | undefined>>,
+  options?: number[],
+  lazyLoadOptions?: boolean,
+  useVersions?: (id: string, enabled: boolean) => number[] | undefined,
+  id: string,
+}
+
+export const SelectVersion = ({ useVersions, value, onChange, options: initialOptions, id, lazyLoadOptions=false }: Props) => {
+  const t = useTranslate(dictionary)
+  const [options, setOptions] = useState(initialOptions)
+  const [enabled, setEnabled] = useState(!lazyLoadOptions)
+  const versions = useVersions?.(id, enabled)
+
+  const onClick = (e?:  MouseEvent<HTMLDivElement>) => {
+    e?.stopPropagation()
+    if (lazyLoadOptions) {
+      setEnabled(true)
+    }
+  }
+
+  useEffect(() => {
+    if (lazyLoadOptions && !isEqual(versions, options)){
+      setOptions(versions)
+    }
+  }, [versions])
+
+  return (
+    <VersionSelector>
+      <Select className="version-selector" 
+        options={options || []} 
+        value={value} 
+        onChange={onChange} 
+        onClick={onClick}
+        renderLabel={(item) =>`${t.version} ${item}`} />
+    </VersionSelector>
+  )  
+}
+
+const dictionary = {
+  en: {
+    version: 'Version',
+  },
+  pt: {
+    version: 'Versão',
+  },
+}

package/src/components/Selector/index.tsx

@@ -10,6 +10,7 @@ import { useCurrentChatState, useWidgetState } from '../../context/hooks'
 import { getUrlToStackSpotAI } from '../../utils/url'
 import { ButtonFavorite } from '../ButtonFavorite'
 import { Fading } from '../Fading'
+import { SelectVersion } from './SelectVersion'
 import { SelectorBox } from './styled'
 
 type SectionVisibility =  AgentVisibilityLevel | VisibilityLevelEnum
@@ -20,6 +21,7 @@ interface Item {
   slug: string,
   description: string,
   visibility_level: SectionVisibility,
+  version_number?: number,
 }
 
 interface Favorite<T> {
@@ -40,7 +42,7 @@ interface ListProps<T> {
   filter?: string,
   visibility?: SectionVisibility,
   selectorConfig: SelectorConfig<T>,
-  onSelect: (item: T) => void,
+  onSelect: (item: T, selectedVersion?: number) => void,
   favorite?: Favorite<T>,
 }
 
@@ -69,10 +71,12 @@ interface SelectorConfig<T> {
   regex: RegExp,
   urlBuilder: (item: T) => string,
   searchProp: keyof T,
+  isEnabledVersionContent?: boolean,
+  useVersions?: (id: string, enabled: boolean) => number[] | undefined,
   isEnabled: boolean,
   sections: SectionVisibility[],
   renderComponentItem: FC<T>,
-  onSelect: (item: T) => void,
+  onSelect: (item: T, selectedVersion?: number) => void,
   /**
    * A react hook or a simple function that returns the selectable items.
    * 
@@ -91,21 +95,26 @@ interface SelectorProps<T> {
 
 const ListItem = <T extends Item>({ item, selectorConfig, onSelect, favorite }: ListItemProps<T>) => {
   const t = useTranslate(dictionary)
-  const { urlBuilder, renderComponentItem } = selectorConfig
+  const { urlBuilder, renderComponentItem, useVersions, isEnabledVersionContent } = selectorConfig
   const linkTitle = interpolate(t.open, item.slug)
   const listFavorites = favorite?.useFavorites?.()
-  
+  const [selectedVersion, setSelectedVersion] = useState(item.version_number)
+
   return (
     <li>
       <button
         className="selector"
-        onClick={() => onSelect(item)}
+        onClick={() => onSelect(item, selectedVersion)}
         onKeyDown={(e) => e.key === 'Enter' && e.preventDefault()}
         onFocus={(e) => e.target.closest('li')?.classList.add('focus')}
         onBlur={(e) => e.target.closest('li')?.classList.remove('focus')}
       >
         {renderComponentItem(item)}
       </button>
+      {isEnabledVersionContent && 
+        <SelectVersion options={item.version_number ? [item.version_number] : []}  id={item.id}
+          value={selectedVersion} onChange={setSelectedVersion} lazyLoadOptions={true} useVersions={useVersions}
+        /> }
       <IconLink
         icon="ExternalLink"
         title={linkTitle}
@@ -148,14 +157,14 @@ const List = <T extends Item>({ selectorConfig, filter, visibility, onSelect, fa
   )
 }
 
-const SelectorContent = ({ filter, onClose, selectorConfig, favorite }: ContentProps<any>) => {
+const SelectorContent = <T, > ({ filter, onClose, selectorConfig, favorite }: ContentProps<T>) => {
   const t = useTranslate(dictionary)
   const ref = useRef<HTMLDivElement>(null)
-  const [visibility, setVisibility] = useState<SectionVisibility | undefined>()
-  const isGroupResourcesByScope = useWidgetState('features')?.groupResourcesByScope
   const { resourceName, icon, onSelect, sections } = selectorConfig
-  const onSelectItem = useCallback((slug: string) => {
-    onSelect(slug)
+  const [visibility, setVisibility] = useState<SectionVisibility | undefined>(sections[0])
+  const isGroupResourcesByScope = useWidgetState('features')?.groupResourcesByScope
+  const onSelectItem = useCallback((item: any, selectedVersion?: number) => {
+    onSelect(item, selectedVersion)
     onClose()
   }, [])
 
@@ -187,8 +196,8 @@ const SelectorContent = ({ filter, onClose, selectorConfig, favorite }: ContentP
       <div className="body">
         {isGroupResourcesByScope && (
           <ul className="tabs">
-            {createSectionItem()}
             {sections.map(createSectionItem)}
+            {createSectionItem()}
           </ul>
         )}
         <FallbackBoundary message={interpolate(t.error, selectorConfig.resourceName)}>

package/src/components/Selector/styled.ts

@@ -156,3 +156,50 @@ export const SelectorBox = styled.div<{ $tabsCount: number }>`
     }
   }
 `
+
+export const VersionSelector = styled.div`
+  position: relative;
+  min-width: 100px;
+
+  .version-selector {
+    height: 28px;
+    position: absolute;
+    top: -18px;
+    left: -12px;
+
+    header {
+      height: 20px;
+      background-color: ${theme.color.light[300]};
+      border: none;
+      margin-bottom: 0;
+      gap: 0;
+      padding: 0;
+      
+    }
+    .selection-panel .options{
+      overflow: hidden;
+    }
+    li {
+      gap: 5px;
+      padding: 0 8px 0 !important;
+      padding-left: 5px;
+    }
+  }
+
+`
+
+export const VersionSelectorBox = styled.div`
+  border: 1px solid ${theme.color.light[500]};
+  border-radius: 4px;
+  .version-selector {
+    position: relative;
+    top: 0;
+    left: 0;
+  }
+  > div {
+    position: relative;
+    .options {
+      overflow: hidden;
+    }
+  }
+`

package/src/hooks/enabled-feature-flags.ts

@@ -0,0 +1,31 @@
+import { accountClient } from '@stack-spot/portal-network'
+
+const useEnabledFeatureFlags = (resourceType?: string, resourceSlug?: string) => {
+  const queryParams = resourceType && resourceSlug ? { [resourceType]: resourceSlug } : {}
+  const [featureFlags, , error, { isLoading }] = accountClient.getEnabledFeatureFlagsForAccount.useStatefulQuery({
+    queryParams,
+  })
+  return { featureFlags, isLoading, error }
+}
+
+export const useIsFeatureFlagEnabled = (
+  flagSlug: string,
+  resourceType?: string,
+  resourceSlug?: string,
+) => {
+  const { featureFlags, isLoading } = useEnabledFeatureFlags(resourceType, resourceSlug)
+  if (resourceType && resourceSlug) {
+    const featureFlag = featureFlags?.find((flag) => flag.slug === flagSlug)
+    const resourcesByType = featureFlag?.resources?.[resourceType]
+    if (!!featureFlag && !!resourcesByType) {
+      if (resourcesByType.mode === 'ALL') {
+        return { flagEnabled: true, isLoading }
+      } else {
+        return { flagEnabled: !!featureFlag.resources?.[resourceType].slugs.some((slug) => slug === resourceSlug), isLoading }
+      }
+    }
+    return { flagEnabled: false, isLoading }
+  } else {
+    return { flagEnabled: !!featureFlags?.some((flag) => flag.slug === flagSlug), isLoading }
+  }
+}

package/src/state/types.ts

@@ -11,6 +11,7 @@ export interface LabeledAgent extends LabeledWithImage {
   builtIn?: boolean,
   slug?: string,
   visibility_level?: string,
+  agent_version_number?: number,
 }
 
 export interface FileSize {

package/src/utils/chat.ts

@@ -19,6 +19,7 @@ export function buildConversationContext(state: ChatState, message?: ChatEntry |
     knowledge_sources: state.get('knowledgeSources')?.map(ks => ks.id),
     upload_ids: message?.getValue().upload?.map(f => f.id),
     selected_model: state.get('selected_model_id') ?? null,
+    agent_version_number: state.get('agent')?.agent_version_number,
     context: {
       os: navigator.userAgent,
       platform: 'web-widget',

package/src/utils/tools.ts

@@ -1,9 +1,9 @@
 
-export type ToolWithImage = { id?: string, image?: string, name: string, description?: string }
+export type ToolWithImage = { id?: string | null, image?: string, name?: string, description?: string }
 
 interface Toolkit {
   id?: string | null,
-  tools?: { id?: string, name?: string, description?: string, function?: { name: string, description?: string } }[] | null,
+  tools?: { id?: string | null, name?: string, description?: string, function?: { name: string, description: string } | null }[] | null,
   image_url?: string | null,
   avatar?: string | null,
 }
@@ -22,8 +22,8 @@ export function toolById(id: string, toolkits: Toolkit[] | undefined): ToolWithI
   if (mcp) {
     const [, toolkitId, toolName] = mcp
     const toolkit = toolkits?.find(tk => tk.id === toolkitId)
-    const tool = toolkit?.tools?.find(t => t.name === toolName)
-    return { id, image: toolkit?.avatar ?? undefined, name: toolName, description: tool?.function?.description }
+    const tool = toolkit?.tools?.find(t => t.name === toolName || t.function?.name === toolName)
+    return { id, image: toolkit?.avatar ?? undefined, name: tool?.function?.name, description: tool?.function?.description }
   }
   const { tool, toolkit } = findToolById(id, toolkits ?? []) ?? {}
   return (tool && toolkit)

package/src/views/Agents/AgentDescription.tsx

@@ -1,17 +1,31 @@
 import { Icon } from '@stack-spot/citric-icons'
-import { AsyncContent, Badge, Card, IconBox, ImageBox, ImageWithFallback, Text } from '@stack-spot/citric-react'
+import { AsyncContent, Badge, Card, IconBox, ImageBox, ImageWithFallback, Row, Text } from '@stack-spot/citric-react'
 import { agentToolsClient } from '@stack-spot/portal-network'
-import { useMemo } from 'react'
+import { useEffect, useMemo, useState } from 'react'
+import { SelectVersion } from '../../components/Selector/SelectVersion'
+import { VersionSelectorBox } from '../../components/Selector/styled'
 import { useAgentsDictionary } from './dictionary'
 import { AgentDescriptionBox } from './styled'
 
-export const AgentDescription = ({ agentId }: { agentId?: string }) => {
+interface Props { 
+  agentId?: string, 
+  enableVersionSelect?: boolean,
+  onVersionChange?: (version?: number) => void,
+}
+
+export const AgentDescription = ({ agentId, enableVersionSelect, onVersionChange }:Props) => {
   const t = useAgentsDictionary()
-  const [agent,, error, { isLoading }] = agentToolsClient.agent.useStatefulQuery({ agentId: agentId! }, { enabled: !!agentId })
-  const numberOfKnowledgeSources = agent?.knowledge_sources_config?.knowledge_sources.length ?? 0
+  const [selectedVersion, setSelectedVersion] = useState<number | undefined>(undefined)
+  const [agent,, error, { isLoading }] = agentToolsClient.agentV2.useStatefulQuery({ agentCoreId: agentId!, 
+    versionNumber: selectedVersion }, { enabled: !!agentId })
+  const [listVersions, , errorAgentWithVersion, { isLoading: isLoadingAgentWithVersions }] = 
+    agentToolsClient.listAgentVersions.useStatefulQuery({ agentCoreId: agentId! }, 
+      { enabled: enableVersionSelect && !!agentId })
+  const optionsVersions = listVersions?.map((version) => version.version_number)
+  const numberOfKnowledgeSources = agent?.version.knowledge_sources_config?.knowledge_sources.length ?? 0
   
   const knowledgeSources = useMemo(
-    () => agent?.knowledge_sources_config?.knowledge_sources_details?.map((ks, index) => (
+    () => agent?.version.knowledge_sources_config?.knowledge_sources_details?.map((ks, index) => (
       <li key={index}>
         <Card gap="10px" direction="row" flex={1} size="xxs" bgLevel={500} justifyContent="space-between">
           <Text color="light.contrastText">{ks.name}</Text>
@@ -21,12 +35,12 @@ export const AgentDescription = ({ agentId }: { agentId?: string }) => {
     )),
     [agent],
   )
-  
+
   const { tools, multiAgents } = useMemo(() => {
     const tools: React.ReactElement[] = [] 
     const multiAgents: React.ReactElement[] = [] 
-    const builtInTools = agent?.toolkits?.builtin_toolkits ?? []
-    const customToolkits = agent?.toolkits?.custom_toolkits ?? []
+    const builtInTools = agent?.version.toolkits?.builtin_toolkits ?? []
+    const customToolkits = agent?.version.toolkits?.custom_toolkits ?? []
     for (const toolkit of builtInTools) {
       for (const tool of toolkit.tools ?? []) {
         if (toolkit.id == 'UTILITIES'){ 
@@ -66,22 +80,42 @@ export const AgentDescription = ({ agentId }: { agentId?: string }) => {
     return { tools, multiAgents }
   }, [agent])
 
-  const mcpToolkits = useMemo(() => agent?.toolkits?.mcp_toolkits?.map(t => (
+  const mcpToolkits = useMemo(() => agent?.version.toolkits?.mcp_toolkits?.map(t => (
     <li key={`mcp-${t.id}`}>
       <Card gap="10px" direction="row" flex={1} size="xxs" bgLevel={500}>
         <ImageBox><ImageWithFallback src={t.avatar ?? undefined} fallback={<Icon icon="Cog" />} /></ImageBox>
         <Text color="light.contrastText">{t.name}</Text>
       </Card>
     </li>
-  )), [agent?.toolkits?.mcp_toolkits])
+  )), [agent?.version.toolkits?.mcp_toolkits])
+
+  useEffect(() => {
+    if (!selectedVersion && agent?.version.version_number !== selectedVersion){
+      setSelectedVersion(agent?.version.version_number)
+    }
+  }, [agent?.version.version_number])
+  
+  const onChangeVersion = (version?: number) => {
+    setSelectedVersion(version)
+    onVersionChange?.(version)
+  }
 
   return (
-    <AsyncContent loading={isLoading} error={error}>
+    <AsyncContent loading={isLoading || isLoadingAgentWithVersions} error={error || errorAgentWithVersion}>
       <AgentDescriptionBox>
         {agent?.description && <section>
           <Text appearance="microtext1" className="title">{t.description}</Text>
           <Text>{agent?.description}</Text>
         </section>}
+        {enableVersionSelect && optionsVersions && optionsVersions?.length > 0 && <section>
+          <VersionSelectorBox>
+            <Row justifyContent="space-between" p={4}>
+              <Text>{t.version}</Text>
+              <SelectVersion options={optionsVersions} value={selectedVersion} 
+                onChange={(value?: any) => onChangeVersion(value)} id={agent?.id ?? ''} />
+            </Row>
+          </VersionSelectorBox>
+        </section>}
         {(!!numberOfKnowledgeSources || !!knowledgeSources?.length) && <section>
           <Text appearance="microtext1" className="title">Knowledge sources</Text>
           <ul>{knowledgeSources}</ul>
@@ -97,9 +131,9 @@ export const AgentDescription = ({ agentId }: { agentId?: string }) => {
           <Text appearance="microtext1" className="title">{t.multiAgent}</Text>
           <ul>{multiAgents}</ul>
         </section>}
-        {agent?.model_name && <section>
+        {agent?.version.model_name && <section>
           <Text appearance="microtext1" className="title">LLM</Text>
-          <Badge colorPalette="orange" appearance="square">{agent?.model_name}</Badge>
+          <Badge colorPalette="orange" appearance="square">{agent?.version.model_name}</Badge>
         </section>}
       </AgentDescriptionBox>
     </AsyncContent>

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