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

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(