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

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/Editor.tsx

@@ -21,6 +21,7 @@ const EditorBox = styled.div`
     --vscode-editor-background: transparent !important;
     --vscode-editorGutter-background: transparent !important;
   }
+
 `
 
 const TitleBox = styled.div`
@@ -69,7 +70,7 @@ const Title = () => {
 
   return (
     <TitleBox>
-      <Text appearance="h5">Editor</Text>
+      <Text appearance="h5" tag="h2" >Editor</Text>
       <Select
         options={languages}
         renderLabel={l => l?.label ?? defaultLanguage}
@@ -91,6 +92,22 @@ const EditorPanel = () => {
   const selectionObserver = useRef<IDisposable | undefined>()
 
   const setup: OnMount = useCallback(async (editor) => {
+    const container = editor.getContainerDomNode()
+    const el = container.querySelector('.native-edit-context')
+    if (el && el.hasAttribute('aria-label')) {
+      el.removeAttribute('aria-label')
+    }
+
+    const observer = new MutationObserver(() => {
+      const el = container.querySelector('.native-edit-context')
+      if (el && el.hasAttribute('aria-label')) {
+        el.removeAttribute('aria-label')
+      }
+    })
+    observer.observe(container, { subtree: true, attributes: true, childList: true })
+
+    editor.onDidDispose(() => observer.disconnect())
+
     selectionObserver.current = editor.onDidChangeCursorSelection(debounce((e) => {
       const selectedText = editor.getModel()?.getValueInRange(e.selection)
       chat.set('codeSelection', selectedText?.trim() ? selectedText : undefined)
@@ -110,14 +127,14 @@ const EditorPanel = () => {
       selectionObserver.current?.dispose()
     }
   }, [])
-  
+
   return (
     <EditorBox>
       <MonacoEditor
         height="100%"
         language={language}
         theme={themeKind === 'dark' ? 'vs-dark' : 'light'}
-        options={{ minimap: { enabled: false } }}
+        options={{ minimap: { enabled: false }, accessibilitySupport: 'off' }}
         value={value}
         onChange={v => chat.set('code', v)}
         loading={<ProgressCircular />}

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

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(