@stack-spot/ai-chat-widget 1.0.0-dev.1768326007410 → 1.0.0-dev.1768329683444

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/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 { FindByIdAgentResponse } from '@stack-spot/portal-network/api/agent-tools'
 import { last } from 'lodash'
 import { ChatEntry } from '../../state/ChatEntry'
 import { ChatProperties, ChatState } from '../../state/ChatState'
@@ -56,7 +56,7 @@ function toJSONString(data: any) {
   return `${data}`
 }
 
-function findTool(agent: AgentModel | undefined, id: string) {
+function findTool(agent: FindByIdAgentResponse | undefined, id: string) {
   const allToolkits = [
     ...agent?.toolkits?.builtin_toolkits ?? [],
     ...agent?.toolkits?.custom_toolkits ?? [],
@@ -75,7 +75,7 @@ async function stepsFromAgentInfo(
 ): Promise<ChatStep[] | undefined> {
   const planningInfo = agentInfo?.find(i => i.type === 'planning' && !!i.data)
   if (planningInfo) {
-    let agent: AgentModel | undefined
+    let agent: FindByIdAgentResponse | undefined
     try {
       agent = agentId ? await agentToolsClient.agent.query({ agentId }) : undefined
     } catch { /* empty */ }
@@ -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,

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/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 { FindByIdAgentResponse } 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,7 +27,7 @@ export const providerIcon: Record<string, CitricIconSocial | CitricIconOutline>
 export function getListModelsData(
   chat: ChatState, 
   setVisibleMenu: Dispatch<React.SetStateAction<boolean>>, 
-  agent?: AgentModel,
+  agent?: FindByIdAgentResponse,
   models?: PaginatedResponseLlmModelsResponse) {
 
   const chatSelectedModelId = chat.get('selected_model_id')