@stack-spot/ai-chat-widget 1.0.0-dev.1769003016623 → 1.0.0-dev.1769120820021

package/src/app-metadata.json

@@ -1,7 +1,7 @@
 {
   "name": "@stack-spot/ai-chat-widget",
-  "version": "1.0.0-dev.1769003016623",
-  "date": "Wed Jan 21 2026 13:43:43 GMT+0000 (Coordinated Universal Time)",
+  "version": "1.0.0-dev.1769120820021",
+  "date": "Thu Jan 22 2026 22:27:05 GMT+0000 (Coordinated Universal Time)",
   "dependencies": [
     {
       "name": "@stack-spot/app-metadata",
@@ -125,7 +125,7 @@
     },
     {
       "name": "@stack-spot/portal-network",
-      "version": "1.0.0-dev.1768944806600(@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": "1.0.0-dev.1769117840606(@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/chat-interceptors/send-message.ts

@@ -202,8 +202,12 @@ export async function sendMessageInterceptor(entry: ChatEntry, chat: ChatState,
     chat.set('label', content || entry.getValue().upload?.[0]?.name || 'Chat')
     chat.untitled = false
   }
-
-  const stream = aiClient.sendChatMessage({ context, user_prompt: buildPrompt(content, data) })
+  
+  const stream = aiClient.sendChatMessage({ 
+    context, 
+    user_prompt: buildPrompt(content, data), 
+    agent_version_number: chat.get('agent')?.agent_version_number,
+  })
   signal.addEventListener('abort', () => stream.cancel())
   const botEntry = ChatEntry.createStreamedBotEntry()
   // we add the chat entry and show the streaming if the streaming feature is enabled

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> {
@@ -69,6 +71,8 @@ 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>,
@@ -91,10 +95,11 @@ 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
@@ -106,6 +111,10 @@ const ListItem = <T extends Item>({ item, selectorConfig, onSelect, favorite }:
       >
         {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}

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/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

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,10 @@ 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
+      //TODO: avaliar se vamos precisar da versao aqui
+      agent = agentId ? await agentToolsClient.agentV2.query({ agentCoreId: agentId }) : undefined
     } catch { /* empty */ }
     const planning: PlanningChatStep = {
       type: 'planning',
@@ -105,7 +106,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,11 +140,18 @@ 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 historyAgents = chat.history?.reduce<{ agent_core_id: string }[]>((accumulator, item) => {
+    const agentId = item.custom_agent?.id
+    if (agentId !== undefined) {
+      accumulator.push({ agent_core_id: agentId })
+    }
+    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' }))

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 }}
@@ -85,8 +93,10 @@ export const AgentSelector = ({ inputRef, isTrial }: {
         ['favorite', 'personal', 'workspace', 'account', 'shared', 'built_in', 'recently_used'],
       renderComponentItem: AgentItem,
       isEnabled: isAgentEnabled,
+      isEnabledVersionContent: featureFlag.flagEnabled,
       onSelect: onSelectItem,
       useData: getAgents,
+      useVersions: getAgentVersions,
     }}
   />
 }