@stack-spot/ai-chat-widget 3.6.2-beta.5 → 3.7.0-beta.5

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

@@ -1,15 +1,19 @@
 import { FallbackBoundary, IconLink, Text } from '@stack-spot/citric-react'
 import { useKeyboardControls } from '@stack-spot/portal-components'
+import { InfiniteScroll } from '@stack-spot/portal-components/InfiniteScroll'
 import { AgentVisibilityLevel } from '@stack-spot/portal-network'
+import { VisibilityLevelEnum } from '@stack-spot/portal-network/api/ai'
 import { Dictionary, interpolate, useTranslate } from '@stack-spot/portal-translate'
 import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { debounce } from 'lodash'
 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
+type SectionVisibility =  AgentVisibilityLevel | VisibilityLevelEnum
 type SelectorShortcut = '/' | '@'
 
 interface Item {
@@ -17,6 +21,7 @@ interface Item {
   slug: string,
   description: string,
   visibility_level: SectionVisibility,
+  version_number?: number,
 }
 
 interface Favorite<T> {
@@ -53,6 +58,12 @@ interface ContentProps<T> {
   favorite?: Favorite<T>,
 }
 
+interface PropsUseData<T> { 
+  data: T[],
+  fetchNextPage?: () => void,
+  hasNextPage?: boolean,
+}
+
 interface SelectorConfig<T> {
   resourceName: string,
   shortcut: SelectorShortcut,
@@ -60,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>,
@@ -71,7 +84,7 @@ interface SelectorConfig<T> {
    * 
    * @returns the data to render in the selector.
    */
-  useData: () => T[],
+  useData: (props: {filter?: string, visibility?: SectionVisibility[]}) => PropsUseData<T>,
 }
 
 interface SelectorProps<T> {
@@ -82,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
@@ -97,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}
@@ -114,39 +132,27 @@ const ListItem = <T extends Item>({ item, selectorConfig, onSelect, favorite }:
 
 const List = <T extends Item>({ selectorConfig, filter, visibility, onSelect, favorite }: ListProps<T>) => {
   const t = useTranslate(dictionary)
-  const items = selectorConfig.useData()
-  const favorites = favorite?.useFavorites?.()
-  const filtered = useMemo(() => {
-    if (!filter && !visibility) return [...items]
-    const lowerFilter = filter?.toLowerCase() ?? ''
-
-    if (visibility?.toLowerCase() === 'favorite'){
-      return favorites?.filter(item =>
-        (item[selectorConfig.searchProp] as string).toLocaleLowerCase().includes(lowerFilter))
-    }
-
-    return items.filter(item =>
-      (item[selectorConfig.searchProp] as string).toLocaleLowerCase().includes(lowerFilter) &&
-      (!visibility || item?.visibility_level?.toLowerCase() === visibility.toLowerCase()),
-    )
-  }, [filter, items, visibility, favorites])
+  const { data: items, fetchNextPage, hasNextPage } = selectorConfig.useData({ filter, visibility: visibility ? [visibility] : undefined })
 
-
-  if (!items.length) return <Text className="empty" color="light.700">{interpolate(t.noData, selectorConfig.resourceName)}</Text>
-  if (!filtered?.length)
-    <Text className="empty" color="light.700">{interpolate(t.noResults, selectorConfig.resourceName)}</Text>
+  if (!items.length && !filter) return <Text className="empty" color="light.700">{interpolate(t.noData, selectorConfig.resourceName)}</Text>
+  if (!items?.length) return <Text className="empty" color="light.700">{interpolate(t.noResults, selectorConfig.resourceName)}</Text>
 
   return (
-    <ul className="selector-list">
-      {filtered?.map((item, i) => (
-        <ListItem 
-          key={`${item.id}${item.visibility_level}${i}`} 
-          item={item} 
-          selectorConfig={selectorConfig} 
-          onSelect={onSelect} 
-          favorite={favorite} 
-        />
-      ))}
+    <ul className="selector-list" id="selector-list">
+      <InfiniteScroll scrollableTarget="selector-list"
+        dataLength={items?.length ?? 0}
+        next={fetchNextPage as any ?? undefined}
+        hasMore={hasNextPage ?? false}>
+        {items?.map((item, i) => (
+          <ListItem 
+            key={`${item.id}${item.visibility_level}${i}`} 
+            item={item} 
+            selectorConfig={selectorConfig} 
+            onSelect={onSelect} 
+            favorite={favorite} 
+          />
+        ))}
+      </InfiniteScroll>
     </ul>
   )
 }
@@ -206,9 +212,25 @@ export const Selector = <T, >({ inputRef, selectorConfig, favorite }: SelectorPr
   const { shortcut, regex, isEnabled } = selectorConfig
   const [isClosed, setClosed] = useState(false)
   const selectorRef = useRef<HTMLDivElement>(null)
+  const [debouncedFilter, setDebouncedFilter] = useState<string | undefined>(undefined)
   const value = useCurrentChatState('nextMessage') ?? ''
   const filter = useMemo(() => value === shortcut || regex.test(value) ? value.substring(1) : undefined, [value])
   const shouldRender = isEnabled && filter !== undefined && !isClosed
+ 
+  const debouncedSetFilter = useCallback(
+    debounce((filterValue: string | undefined) => {
+      setDebouncedFilter(filterValue)
+    }, 300),
+    [],
+  )
+  
+  useEffect(() => {
+    debouncedSetFilter(filter)
+    return () => {
+      debouncedSetFilter.cancel()
+    }
+  }, [filter, debouncedSetFilter])
+
 
   // Resets the closed state whenever the message input is cleared
   useEffect(() => {
@@ -258,7 +280,7 @@ export const Selector = <T, >({ inputRef, selectorConfig, favorite }: SelectorPr
         <SelectorContent
           favorite={favorite}
           selectorConfig={selectorConfig}
-          filter={filter}
+          filter={debouncedFilter}
           onClose={() => setClosed(true)}
           inputRef={inputRef}
         />

package/src/components/Selector/styled.ts

@@ -156,3 +156,51 @@ export const SelectorBox = styled.div<{ $tabsCount: number }>`
     }
   }
 `
+
+export const VersionSelector = styled.div`
+  position: relative;
+  min-width: 100px;
+
+  .version-selector {
+    height: 32px;
+    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 {
+    /* top: -16px; */
+    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/types.ts

@@ -7,7 +7,6 @@ export interface WithChildren<T = React.ReactNode> {
 }
 
 export type PropsOf<T extends React.FunctionComponent> = T extends React.FunctionComponent<infer P> ? P : never
-
 export type ButtonAction = {
   color?: string,
   label?: string,

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,25 @@
 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 }) => {
+export const AgentDescription = ({ agentId, enableVersionSelect }: { agentId?: string, enableVersionSelect?: boolean }) => {
   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>()
+  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 +29,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 +74,36 @@ 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])
+  
   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={setSelectedVersion} id={agent?.id ?? ''} />
+            </Row>
+          </VersionSelectorBox>
+        </section>}
         {(!!numberOfKnowledgeSources || !!knowledgeSources?.length) && <section>
           <Text appearance="microtext1" className="title">Knowledge sources</Text>
           <ul>{knowledgeSources}</ul>
@@ -97,9 +119,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,6 +29,7 @@ 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()
 
@@ -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() {
@@ -80,7 +82,7 @@ export const AgentsTab = ({ visibility, workspaceId, agent, showSubmitButton = t
       <DescribedRadioGroup
         fetchNextPage={fetchNextPage}
         hasNextPage={hasNextPage && !workspaceId}
-        options={agents}
+        options={agents || []}
         initialValue={initialValue}
         filter={workspaceId ? undefined : filter}
         setFilter={workspaceId ? undefined : (value?: string) => {
@@ -98,7 +100,7 @@ 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} />,
           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/ButtonExecutionDetail.tsx

@@ -1,7 +1,7 @@
 import { LoadingCircular } from '@citric/ui'
 import { Button, Icon, Row } from '@stack-spot/citric-react'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
-import { useEffect } from 'react'
+import { useEffect, useMemo } from 'react'
 import { useChatMessages, useWidget } from '../../context/hooks'
 
 export const ButtonExecutionDetail = ({ chatId, messageId }: { chatId: string, messageId: number }) => {
@@ -9,10 +9,10 @@ export const ButtonExecutionDetail = ({ chatId, messageId }: { chatId: string, m
   const messages = useChatMessages(chatId)
   const widget = useWidget()
 
-  const isRunning = () => {
-    const messageEntry = messages.find((message) => message.id === messageId)
+  const isRunning = useMemo(() => {
+    const messageEntry = messages?.find((message) => message.id === messageId)
     return !messageEntry?.getValue().steps?.find((step) => step.type === 'answer' && step.status !== 'running')
-  }
+  }, [messageId, messages])
 
   function openToolsPanel() {
     if (messageId) {
@@ -22,12 +22,12 @@ export const ButtonExecutionDetail = ({ chatId, messageId }: { chatId: string, m
   }
 
   useEffect(() => {
-    isRunning() && openToolsPanel()
+    isRunning && openToolsPanel()
   }, [isRunning])
 
   return <>
     <Row className="step-actions">
-      {isRunning() && <LoadingCircular colorScheme="inverse" size="xs" />}
+      {isRunning && <LoadingCircular colorScheme="inverse" size="xs" />}
       <Button colorScheme="light" size="sm" appearance="none" className="icon-button details" onClick={openToolsPanel}>
         <Icon group="outline" icon="Expand" size="xs" />
         {t.detailed}

package/src/views/Chat/ChatMessage.tsx

@@ -227,8 +227,7 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage, cust
   const [showUserButtonCopy, setShowUserButtonCopy] = useState(false)
   const isPlanning = useCurrentChatState('isPlaning') ?? false
 
-  // Dynamic tool steps are identified by the "dynamic" id.
-  // We're temporarily hiding the toolbox for these dynamic tools while we finalize their UI.
+  // Dynamic steps are identified by the "dynamic" id.
   const isDynamicSteps = !!entry?.steps?.some((s) => s.id?.toLowerCase() === 'dynamic')
   const hasTools = ((agentsTools?.length ?? 0) > 0) || ((entry.tools?.length ?? 0) > 0)
   const showToolBox = hasTools && !isDynamicSteps

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,