@stack-spot/ai-chat-widget 1.27.0-beta.0 → 1.27.0-beta.2

package/package.json

@@ -1,14 +1,19 @@
 {
   "name": "@stack-spot/ai-chat-widget",
-  "version": "1.27.0-beta.0",
+  "version": "1.27.0-beta.2",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "rimraf dist && pnpm generate:metadata && tsc && tsc-esm-fix --target='dist' && cpy src/layout.css dist --flat && cpy src/assets/**/*.png dist/assets",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "generate:metadata": "pnpm app-metadata --lockfile ../../pnpm-lock.yaml --path packages/widget"
+  },
   "peerDependencies": {
     "@citric/core": "^6.4.0",
     "@stack-spot/portal-components": "^2.22.1",
     "@citric/icons": "^5.13.0",
-    "@stack-spot/portal-network": "139.1-beta.0",
+    "@stack-spot/portal-network": "^0.143.3",
     "@citric/ui": "^6.10.2",
     "@stack-spot/portal-theme": "^1.0.0",
     "@stack-spot/portal-translate": "^1.1.0",
@@ -51,10 +56,5 @@
     "ulid": "^2.3.0",
     "@xyflow/react": "^12.3.2",
     "@dagrejs/dagre": "^1.1.4"
-  },
-  "scripts": {
-    "build": "rimraf dist && pnpm generate:metadata && tsc && tsc-esm-fix --target='dist' && cpy src/layout.css dist --flat && cpy src/assets/**/*.png dist/assets",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "generate:metadata": "pnpm app-metadata --lockfile ../../pnpm-lock.yaml --path packages/widget"
   }
-}
+}

package/src/app-metadata.json

@@ -1,7 +1,7 @@
 {
   "name": "@stack-spot/ai-chat-widget",
-  "version": "1.27.0-beta.0",
-  "date": "Wed Jun 11 2025 16:46:22 GMT-0300 (Horário Padrão de Brasília)",
+  "version": "1.27.0-beta.2",
+  "date": "Fri Jun 20 2025 13:47:36 GMT-0300 (Horário Padrão de Brasília)",
   "dependencies": [
     {
       "name": "@stack-spot/app-metadata",
@@ -113,7 +113,7 @@
     },
     {
       "name": "@stack-spot/portal-network",
-      "version": "0.139.1-beta.0(@stack-spot/auth@5.3.2)(@stack-spot/opa@2.5.0(@stack-spot/auth@5.3.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@stack-spot/portal-translate@1.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": "0.143.3(@stack-spot/auth@5.3.2)(@stack-spot/opa@2.5.0(@stack-spot/auth@5.3.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@stack-spot/portal-translate@1.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/quick-commands.ts

@@ -1,5 +1,5 @@
 import { aiClient, CancelledError, FixedChatRequest, StackspotAPIError } from '@stack-spot/portal-network'
-import { QuickCommandFetchResponseResult, QuickCommandPromptResponse2, QuickCommandResponse } from '@stack-spot/portal-network/api/ai'
+import { QuickCommandFetchResponseResult, QuickCommandPromptResponse2, QuickCommandResponse, QuickCommandStepFetchResponse } from '@stack-spot/portal-network/api/ai'
 import { Dictionary, interpolate, translate } from '@stack-spot/portal-translate'
 import type { editor } from 'monaco-editor'
 import { ulid } from 'ulid'
@@ -71,7 +71,20 @@ export function createQuickCommandInterceptor(widget: WidgetState, getEditor: ()
    */
   async function runFetchStep(ctx: QCContext, stepIndex: number) {
     const { qc: { slug, steps }, code, context, resultMap, executionId, signal } = ctx
-    const step = steps![stepIndex]
+    const step = steps![stepIndex] as QuickCommandStepFetchResponse
+    if (step.is_remote) {
+      const { data } = await aiClient.fetchStepOfQuickCommandRemotely.mutate({
+        slug, stepSlug: step.slug,
+        quickCommandsExecutionRequest: { code_selection: code, context, slugs_executions: resultMap, qc_execution_id: executionId },
+      })
+      resultMap[step.slug] = {
+        status: 200,
+        //@ts-ignore
+        data: data,
+      }
+      return
+    }
+
     const { headers, data, method, url } = await aiClient.fetchStepOfQuickCommand.mutate({
       slug,
       stepSlug: step.slug,

package/src/components/AgentCard/dictionary.ts

@@ -2,8 +2,7 @@ import { Dictionary } from '@stack-spot/portal-translate'
 
 export const dictionary = {
   en: {
-    'built_in': 'Embutido',
-    workspace: 'Spot',
+    builtin: 'Built-in',
     personal: 'Personal',
     account: 'Account',
     shared: 'Shared',
@@ -11,8 +10,7 @@ export const dictionary = {
     create: 'Create',
   },
   pt: {
-    'built_in': 'Embutido',
-    workspace: 'Spot',
+    builtin: 'Embutido',
     personal: 'Personal',
     account: 'Conta',
     shared: 'Compartilhado',

package/src/components/Selector/index.tsx

@@ -2,7 +2,7 @@ import { IconBox, Text } from '@citric/core'
 import { ExternalLink } from '@citric/icons'
 import { IconButton } from '@citric/ui'
 import { useKeyboardControls } from '@stack-spot/portal-components'
-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 { useCurrentChatState } from '../../context/hooks'
@@ -12,7 +12,8 @@ import { Fading } from '../Fading'
 import { FallbackBoundary } from '../FallbackBoundary'
 import { SelectorBox } from './styled'
 
-type SectionVisibility =  AgentVisibilityLevel
+type SectionVisibility = VisibilityLevelEnum | 'built-in'
+
 type SelectorShortcut = '/' | '@'
 
 interface Item {
@@ -267,7 +268,7 @@ const dictionary = {
     personal: 'Personal',
     account: 'Account',
     shared: 'Shared',
-    'built_in': 'Built-in',
+    'built-in': 'Built-in',
     workspace: 'Spot',
     error: 'Could not load the $0s.',
     noData: 'You don\'t have any $0 yet.',
@@ -281,7 +282,7 @@ const dictionary = {
     account: 'Conta',
     shared: 'Compartilhado',
     workspace: 'Spot',
-    'built_in': 'Embutido',
+    'built-in': 'Embutido',
     error: 'Não foi possível carregar os $0s.',
     noData: 'Você ainda não possui $0s.',
     noResults: 'Não $0s para mostrar aqui.',

package/src/state/constants.ts

@@ -1,8 +1,8 @@
 import { FileSize } from './types'
 
 export const acceptedFileTypes = [
-  'json', 'yaml', 'txt', 'md', 'json', 'yaml', 'pdf', 'xls', 'xlsx', 'csv', 'cbl', 'cpp', 'cxx', 'cc', 'c', 'hpp', 'hxx', 'hh', 'h', 'cs',
-  'go', 'html', 'htm', 'kt', 'kts', 'md', 'php', 'proto', 'py', 'java', 'js', 'jsx', 'ts', 'tsx', 'rst', 'rb', 'rs', 'scala', 'swift',
+  'json', 'yaml', 'txt', 'md', 'json', 'yaml', 'pdf', /*'xls', 'xlsx', 'csv',*/ 'cbl', 'cpp', 'cxx', 'cc', 'c', 'hpp', 'hxx', 'hh', 'h',
+  'cs', 'go', 'html', 'htm', 'kt', 'kts', 'md', 'php', 'proto', 'py', 'java', 'js', 'jsx', 'ts', 'tsx', 'rst', 'rb', 'rs', 'scala', 'swift',
   'sql', 'yaml', 'yml', 'tf', 'sh', 'ps1', 'psd1', 'psm1', 'bat', 'cmd', 'rego', 'f', 'for', 'r', 'pl', 'vb', 'dart', 'hs', 'lua',
   'asm', 'groovy', 'gvy', 'gy', 'mat', 'clj', 'lisp', 'm', 'cls', 'css', 'scss', 'json', 'jpg', 'jpeg', 'png',
 ]

package/src/state/types.ts

@@ -4,7 +4,7 @@ export interface Labeled {
 }
 
 export interface LabeledWithImage extends Labeled {
-  image?: string | undefined | null,
+  image?: string,
 }
 
 export interface LabeledAgent extends LabeledWithImage {

package/src/utils/tools.ts

@@ -1,9 +1,11 @@
-import { BuiltinToolkitResponse, BuiltinToolResponse } from '@stack-spot/portal-network/api/agent'
-import { keyBy } from 'lodash'
+import { BuiltinToolResponse, ToolkitsInAgentResponse } from '@stack-spot/portal-network/api/agent'
 
 export type ToolWithImage = BuiltinToolResponse & { id: string, image?: string }
 
-export function toolById(id: string, toolkits: BuiltinToolkitResponse[] | undefined): ToolWithImage | undefined {
-  const tools = toolkits?.map(({ image_url, tools }) => tools?.map((tool) => ({ ...tool, id: tool.id!, image: image_url! }))).flat()
-  return keyBy(tools, 'id')[id]
+export function toolById(id: string, toolkits: ToolkitsInAgentResponse | undefined): ToolWithImage | undefined {
+  for (const toolkit of toolkits?.builtins ?? []) {
+    for (const tool of toolkit.tools ?? []) {
+      if (tool.id === id) return { ...tool, id, image: toolkit.image_url }
+    }
+  }
 }

package/src/views/Agents/AgentDescription.tsx

@@ -1,21 +1,29 @@
 import { Text } from '@citric/core'
 import { Badge, Skeleton } from '@citric/ui'
-import { agentToolsClient } from '@stack-spot/portal-network'
+import { agentClient, AgentVisibilityLevel } from '@stack-spot/portal-network'
 import { useMemo } from 'react'
 import { ToolBadge } from '../../components/ToolBadge'
-import { toolById } from '../../utils/tools'
 import { useAgentsDictionary } from './dictionary'
 import { AgentDescriptionBox } from './styled'
 
-export const AgentDescription = ({ agentId }: { agentId?: string }) => {
+interface Props {
+  agentId?: string,
+  llm?: string,
+  description?: string,
+  numberOfKnowledgeSources: number,
+  visibility: AgentVisibilityLevel,
+}
+
+export const AgentDescription = ({ agentId, llm, description, numberOfKnowledgeSources, visibility }: Props) => {
   const t = useAgentsDictionary()
-  const [agent, , , { isLoading }] = agentToolsClient.agent.useStatefulQuery({ agentId: agentId! }, { enabled: !!agentId })
-  const [toolKits, , , { isLoading: isLoadingToolKit }] = agentToolsClient.tools.useStatefulQuery()
-  const numberOfKnowledgeSources = agent?.knowledge_source_config?.knowledge_sources.length ?? 0
+  const [agent, , , { isLoading }] = agentClient.agentById.useStatefulQuery(
+    { agentId: agentId!, builtIn: visibility === 'BUILT-IN' },
+    { enabled: !!agentId },
+  )
   
   const knowledgeSources = useMemo(
-    () => agent?.knowledge_source_config?.knowledge_sources?.map((ks, index) => (
-      <li key={index}><Badge palette="teal" appearance="square">{ks}</Badge></li>
+    () => agent?.knowledge_sources_config?.knowledge_sources_details?.map((ks, index) => (
+      <li key={index}><Badge palette="teal" appearance="square">{ks.name}</Badge></li>
     )),
     [agent],
   )
@@ -28,32 +36,31 @@ export const AgentDescription = ({ agentId }: { agentId?: string }) => {
   }, [numberOfKnowledgeSources])
   const tools = useMemo(() => {
     const result: React.ReactElement[] = []
-    for (const tool of agent?.tools ?? []) {
-      const toolWithImage = toolById(tool.builtin_tool_id, toolKits)
-      result.push(<li key={tool.builtin_tool_id}>
-        <ToolBadge name={toolWithImage?.name || toolWithImage?.id || 'unknown'} image={toolWithImage?.image} />
-      </li>)
+    for (const kit of agent?.toolkits?.builtins ?? []) {
+      for (const tool of kit.tools ?? []) {
+        result.push(<li key={tool.id}><ToolBadge name={tool.name || tool.id || 'unknown'} image={kit.image_url} /></li>)
+      }
     }
     return result
   }, [agent])
 
   return (
     <AgentDescriptionBox>
-      {agent?.description && <section>
+      {description && <section>
         <Text appearance="microtext1" className="title">{t.description}</Text>
-        <Text>{agent?.description}</Text>
+        <Text>{description}</Text>
       </section>}
       {(!!numberOfKnowledgeSources || !!knowledgeSources?.length) && <section>
         <Text appearance="microtext1" className="title">Knowledge sources</Text>
-        <ul>{isLoading || isLoadingToolKit ? skeleton : knowledgeSources}</ul>
+        <ul>{isLoading ? skeleton : knowledgeSources}</ul>
       </section>}
       {!!tools.length && <section>
         <Text appearance="microtext1" className="title">{t.tools}</Text>
         <ul>{tools}</ul>
       </section>}
-      {agent?.model_name && <section>
+      {llm && <section>
         <Text appearance="microtext1" className="title">LLM</Text>
-        <Badge palette="orange" appearance="square">{agent?.model_name}</Badge>
+        <Badge palette="orange" appearance="square">{llm}</Badge>
       </section>}
     </AgentDescriptionBox>
   )

package/src/views/Agents/AgentsPanel.tsx

@@ -1,4 +1,3 @@
-import { agentToolsClient } from '@stack-spot/portal-network'
 import { useEffect, useMemo, useRef } from 'react'
 import { RightPanelTabs } from '../../components/RightPanelTabs'
 import { useCurrentChat } from '../../context/hooks'
@@ -6,6 +5,8 @@ import { checkIsTrial } from '../../utils/check-is-trial'
 import { AgentsTab, AgentsTabWorkspace } from './AgentsTab'
 import { useAgentsDictionary } from './dictionary'
 
+const agentDefaultSlug = 'stk_code_buddy'
+
 /**
  * Renders the Agent selection form in the Right Panel if this is the panel that is currently opened.
  */
@@ -16,22 +17,22 @@ export const AgentsPanel = () => {
   const agent = useRef(chat.get('agent'))
 
   useEffect(() => {
-    if (agentToolsClient.agentDefaultSlug !== chat.get('agent')?.slug) {
+    if (agentDefaultSlug !== chat.get('agent')?.slug) {
       agent.current = chat.get('agent')
     }
   }, [chat])
 
   const tabs= useMemo(() => isTrial ? [
-    { title: t.favorites, content: <AgentsTab key="favorite" visibility="favorite" agent={agent} /> },
-    { title: t.builtin, content: <AgentsTab key="builtin" visibility="built_in" agent={agent} /> },
-    { title: t.personal, content: <AgentsTab key="personal" visibility="personal" agent={agent} /> },
+    { title: t.favorites, content: <AgentsTab key="favorite" visibility="FAVORITE" agent={agent} /> },
+    { title: t.builtin, content: <AgentsTab key="builtin" visibility="BUILT-IN" agent={agent} /> },
+    { title: t.personal, content: <AgentsTab key="personal" visibility="PERSONAL" agent={agent} /> },
   ]: [
-    { title: t.favorites, content: <AgentsTab key="favorite" visibility="favorite" agent={agent} /> },
-    { title: t.builtin, content: <AgentsTab key="builtin" visibility="built_in" agent={agent} /> },
-    { title: t.personal, content: <AgentsTab key="personal" visibility="personal" agent={agent} /> },
-    { title: t.shared, content: <AgentsTab key="shared" visibility="shared" agent={agent} /> },
-    { title: t.spots, content: <AgentsTabWorkspace key="workspace"  visibility="workspace" agent={agent} /> },
-    { title: t.account, content: <AgentsTab key="account" visibility="account" agent={agent} /> },
+    { title: t.favorites, content: <AgentsTab key="favorite" visibility="FAVORITE" agent={agent} /> },
+    { title: t.builtin, content: <AgentsTab key="builtin" visibility="BUILT-IN" agent={agent} /> },
+    { title: t.personal, content: <AgentsTab key="personal" visibility="PERSONAL" agent={agent} /> },
+    { title: t.shared, content: <AgentsTab key="shared" visibility="SHARED" agent={agent} /> },
+    { title: t.spots, content: <AgentsTabWorkspace key="workspace"  visibility="WORKSPACE" agent={agent} /> },
+    { title: t.account, content: <AgentsTab key="account" visibility="ACCOUNT" agent={agent} /> },
  
   ], [t, isTrial, agent])
   

package/src/views/Agents/AgentsTab.tsx

@@ -2,7 +2,8 @@ import { Button, IconBox, Text } from '@citric/core'
 import { Agent, Search } from '@citric/icons'
 import { Placeholder } from '@stack-spot/portal-components/Placeholder'
 import { MiniLogo } from '@stack-spot/portal-components/svg'
-import { AgentResponseWithBuiltIn, agentToolsClient, AgentVisibilityLevel, workspaceAiClient } from '@stack-spot/portal-network'
+import { agentClient, AgentResponseWithBuiltIn, workspaceAiClient } from '@stack-spot/portal-network'
+import { VisibilityLevel } from '@stack-spot/portal-network/api/agent'
 import { WorkspaceResponse } from '@stack-spot/portal-network/api/workspace-ai'
 import { useCallback, useMemo, useState } from 'react'
 import { ButtonFavorite } from '../../components/ButtonFavorite'
@@ -19,7 +20,7 @@ import { AgentLabel } from './styled'
 import { useAgentFavorites } from './useAgentFavorites'
 
 export interface AgentTabProps {
-  visibility: AgentVisibilityLevel,
+  visibility: VisibilityLevel | 'BUILT-IN',
   workspaceId?: string,
   agent: React.MutableRefObject<ChatProperties['agent']>,
   showSubmitButton?: boolean,
@@ -32,15 +33,16 @@ export const AgentsTab = ({ visibility, workspaceId, agent, showSubmitButton = t
   const [filter, setFilter] = useState('')
   const { useFavorites, onAddFavorite, onRemoveFavorite } = useAgentFavorites()
   const listFavorites = useFavorites()
-  const agentDefault = agentToolsClient.agentDefault.useQuery()
+  const agentDefault = agentClient.agentDefault.useQuery({})
   const agents = workspaceId
-    ? workspaceAiClient.getAgentFromWorkspaceAi.useQuery({ workspaceId })  as AgentResponseWithBuiltIn[]
-    : agentToolsClient.agents.useQuery({ visibility })
+    ? workspaceAiClient.getAgentFromWorkspaceAi.useQuery({ workspaceId })
+    : agentClient.allAgents.useQuery({ visibilities: [visibility] })
+
 
   const [value, setValue] = useState<AgentResponseWithBuiltIn | undefined>(
     agent.current
       ? agents.find(a => a.id === agent.current?.id)
-      : chat.get('agent') ? agents.find(a => a.id === chat.get('agent')?.id) : agentDefault as AgentResponseWithBuiltIn,
+      : chat.get('agent') ? agents.find(a => a.id === chat.get('agent')?.id) : agentDefault,
   )
 
   const filtered = useMemo(
@@ -51,17 +53,14 @@ export const AgentsTab = ({ visibility, workspaceId, agent, showSubmitButton = t
 
   function submit() {
     if (value) {
-      chat.set(
-        'agent', 
-        { id: value.id, label: value.name, image: value.avatar!, builtIn: value.visibility_level === 'built_in', slug: value.slug },
-      )
+      chat.set('agent', { id: value.id, label: value.name, image: value.avatar, builtIn: !!value.builtIn, slug: value.slug })
     }
     close()
   }
 
   const onChange = useCallback((newValue: AgentResponseWithBuiltIn) => {
     setValue(newValue)
-    agent.current = { ...newValue, label: newValue.name, builtIn: newValue.visibility_level === 'built_in' }
+    agent.current = { ...newValue, label: newValue.name, builtIn: !!newValue.builtIn }
   }, [])
 
   return (
@@ -84,7 +83,13 @@ export const AgentsTab = ({ visibility, workspaceId, agent, showSubmitButton = t
               <Text>{name}</Text>
             </AgentLabel>
           )}
-          renderDescription={a => <AgentDescription agentId={a.id} />}
+          renderDescription={a => <AgentDescription
+            agentId={a.id}
+            visibility={visibility}
+            description={a.description}
+            llm={a.llm_config?.model_slug}
+            numberOfKnowledgeSources={a.knowledge_sources_config?.knowledge_sources?.length ?? 0}
+          />}
           optionClassName={a => (a === value && filter && !a.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase()))
             ? 'filtered-out'
             : ''

package/src/views/Agents/useAgentFavorites.ts

@@ -1,15 +1,15 @@
 /* eslint-disable filenames/match-regex */
-import { agentClient, agentToolsClient } from '@stack-spot/portal-network'
+import { agentClient } from '@stack-spot/portal-network'
 
 export function useAgentFavorites() {
-  const useFavorites = () => agentToolsClient.agents.useQuery({ visibility: 'favorite' })
+  const useFavorites = () => agentClient.allAgents.useQuery({ visibilities: ['FAVORITE'] })
   const [addFavorite, pendingAddFav] = agentClient.addFavoriteAgent.useMutation()
   const [removeFavorite, pendingRemoveFav] = agentClient.removeFavoriteAgent.useMutation()
 
   const removeFavoriteAgent = async (idOrSlug?: string) => {
     try {
       await removeFavorite({ agentId: idOrSlug || '' })
-      await agentToolsClient.agents.invalidate({ visibility: 'favorite' })
+      await agentClient.allAgents.invalidate({ visibilities: ['FAVORITE'] })
     } catch (error) {
       // eslint-disable-next-line no-console
       console.error(error)
@@ -19,7 +19,7 @@ export function useAgentFavorites() {
   const addFavoriteAgent = async (idOrSlug?: string) => {
     try {
       await addFavorite({ agentId: idOrSlug || '' })
-      await agentToolsClient.agents.invalidate({ visibility: 'favorite' })
+      await agentClient.allAgents.invalidate({ visibilities: ['FAVORITE'] })
     } catch (error) {
       // eslint-disable-next-line no-console
       console.error(error)

package/src/views/Chat/ChatMessage.tsx

@@ -1,7 +1,7 @@
 import { Box, Button, Checkbox, Flex, IconBox, Input, Label, Radio, Text } from '@citric/core'
 import { Check, Cog, Copy, Dislike, DislikeFill, Like, LikeFill, TimesCircle } from '@citric/icons'
 import { Badge, IconButton, Tooltip } from '@citric/ui'
-import { agentToolsClient } from '@stack-spot/portal-network'
+import { agentClient } from '@stack-spot/portal-network'
 import { listToClass } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { groupBy } from 'lodash'
@@ -193,11 +193,10 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage }: Pr
   const widget = useWidget()
   const chat = useCurrentChat()
   const agentId = entry.agent?.id ?? ''
-  const [toolKits] = agentToolsClient.tools.useStatefulQuery({ enabled: !!agentId })
+  const [agent] = agentClient.agentById.useStatefulQuery({ agentId, builtIn: !!entry?.agent?.builtIn }, { enabled: !!agentId  })
   const [copied, setCopied] = useState(false)
   const [showUserButtonCopy, setShowUserButtonCopy] = useState(false)
 
-  
   useChatScrollToBottomEffect(ref, [entry])
 
   const detailKS = useCallback(({ name, slug, documentScore, documentId }: Required<TextChatEntry>['knowledgeSources'][number]) => {
@@ -349,7 +348,7 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage }: Pr
           className="tools-badge"
           label={t.tools}
           images={entry.tools.slice(0, 3).map((id) => {
-            const tool = toolById(id, toolKits)
+            const tool = toolById(id, agent?.toolkits)
             return { key: id, name: tool?.name || id, icon: <Cog />, url: tool?.image }
           })}
           onClick={openToolsPanel}

package/src/views/ChatHistory/HistoryItem.tsx

@@ -2,7 +2,7 @@ import { IconBox, Input } from '@citric/core'
 import { Check, Download, EllipsisHorizontal, Pencil, Trash } from '@citric/icons'
 import { IconButton, LoadingCircular } from '@citric/ui'
 import { focusNextIgnoringChildren } from '@stack-spot/portal-components'
-import { agentToolsClient, aiClient } from '@stack-spot/portal-network'
+import { aiClient } from '@stack-spot/portal-network'
 import { ConversationResponse } from '@stack-spot/portal-network/api/ai'
 import { theme } from '@stack-spot/portal-theme'
 import { last } from 'lodash'
@@ -11,13 +11,12 @@ import { OverlayMenu } from '../../components/OverlayMenu'
 import { useWidget } from '../../context/hooks'
 import { ChatEntry } from '../../state/ChatEntry'
 import { ChatState } from '../../state/ChatState'
-import { LabeledAgent } from '../../state/types'
 import { ButtonAction } from '../../types'
 import { download } from '../../utils/download'
 import { genericSourcesToKnowledgeSources } from '../../utils/knowledge-source'
 import { useHistoryDictionary } from './dictionary'
 import { HistoryItemBox } from './styled'
-import { findStack, findWorkspace } from './utils'
+import { findStack, findWorkspace, getAllAgents } from './utils'
 
 /**
  * Renders an item of the list of conversations (history).
@@ -89,16 +88,12 @@ export const HistoryItem = ({ item }: { item: ConversationResponse }) => {
     setLoading(true)
     try {
       const chat = await aiClient.chat.query({ conversationId: item.id })
-      const historyAgentIds = chat.history?.map(item => item.custom_agent?.id).filter(Boolean) as string[] ?? []
       const [stack, workspace, agents] = await Promise.all([
         findStack(chat.ai_stack_id),
         findWorkspace(chat.workspace_id),
-        agentToolsClient.agentsByIds.query({ searchAgentsRequest: { ids: historyAgentIds } }),
+        getAllAgents(),
       ])
-      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 agent = agents.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,
@@ -108,7 +103,7 @@ export const HistoryItem = ({ item }: { item: ConversationResponse }) => {
           agentType: item.agent === 'USER' ? 'user' : 'bot',
           content: item.content,
           type: 'md',
-          agent: agentsAsLabeledAgents.find(a => a.id === item.custom_agent?.id),
+          agent: agents.find(a => a.id === item.custom_agent?.id),
           messageId: item.message_id,
           knowledgeSources: item.agent === 'USER' ? undefined : genericSourcesToKnowledgeSources(item.sources),
           updated: item.updated,

package/src/views/ChatHistory/utils.ts

@@ -1,5 +1,6 @@
-import { aiClient, workspaceClient } from '@stack-spot/portal-network'
+import { agentClient, aiClient, workspaceClient } from '@stack-spot/portal-network'
 import { ChatProperties } from '../../state/ChatState'
+import { LabeledWithImage } from '../../state/types'
 
 /**
  * Finds a stack by its id.
@@ -35,3 +36,19 @@ export async function findWorkspace(id: string | null): Promise<ChatProperties['
     return { id, label: id }
   }
 }
+
+
+/**
+ * Finds all the agents, including common agents and public agents.
+ * @returns an array with every agent.
+ */
+export async function getAllAgents(): Promise<LabeledWithImage[]> {
+  try {
+    const agents = await agentClient.allAgents.query({ visibilities: ['ALL'] })
+    return agents.map(a => ({ id: a.id, label: a.name, image: a.avatar, slug: a.slug, builtIn: a.builtIn }))
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error(error)
+    return []
+  }
+}

package/src/views/Home/BuiltInAgent.tsx

@@ -59,7 +59,7 @@ const dictionary = {
   },
   pt: {
     hello: 'Olá',
-    subtitle: 'O que realmente importa leva tempo, deixe que a gente cuide do resto.',
+    subtitle: 'Foque no que realmente importa. Deixe o resto com a gente.',
     'question.meta': 'O que é a StackSpot AI?',
     'question.ks': 'O que são Knowledge Sources?',
     'question.agents': 'Como funcionam os agentes?',

package/src/views/Home/CustomAgent.tsx

@@ -1,6 +1,6 @@
 import { IconBox, Text } from '@citric/core'
 import { Agent } from '@citric/icons'
-import { agentToolsClient } from '@stack-spot/portal-network'
+import { agentClient } from '@stack-spot/portal-network'
 import { useMemo } from 'react'
 import { QuickStartButton } from '../../components/QuickStartButton'
 import { useCurrentChat, useCurrentChatState } from '../../context/hooks'
@@ -12,15 +12,15 @@ import { HomeBox } from './styled'
  */
 export const CustomAgent = () => {
   const { id, label, image } = useCurrentChatState('agent') ?? {}
-  const [agent] = agentToolsClient.agent.useStatefulQuery({ agentId: id! })
+  const [agent] = agentClient.agent.useStatefulQuery({ agentId: id! })
   const chat = useCurrentChat()
-  const suggestions = useMemo(() => agent?.conversation_starter?.map((prompt, index) => (
+  const suggestions = useMemo(() => agent?.suggested_prompts?.map((prompt, index) => (
     <QuickStartButton
       key={index}
       label={prompt}
       onClick={() => send(prompt)}
     />
-  )), [agent?.conversation_starter])
+  )), [agent?.suggested_prompts])
 
   function send(message: string) {
     chat.pushMessage(ChatEntry.createUserEntry(message))

package/src/views/MessageInput/AgentSelector.tsx

@@ -1,6 +1,6 @@
 import { Flex, IconBox, Image } from '@citric/core'
 import { Agent } from '@citric/icons'
-import { AgentResponseWithBuiltIn, agentToolsClient } from '@stack-spot/portal-network'
+import { agentClient, AgentResponseWithBuiltIn } from '@stack-spot/portal-network'
 import { useCallback } from 'react'
 import { Selector } from '../../components/Selector'
 import { useCurrentChat, useCurrentChatState } from '../../context/hooks'
@@ -53,9 +53,9 @@ export const AgentSelector = ({ inputRef, isTrial }: {
 
   const getAgents = () => {
     if (isTrial) {
-      return agentToolsClient.allAgents.useQuery({ visibilities: ['personal', 'built_in'] })
+      return agentClient.allAgents.useQuery({ visibilities: ['PERSONAL', 'BUILT-IN'] }) 
     }
-    return agentToolsClient.allAgents.useQuery({ visibilities: ['account', 'shared', 'personal', 'built_in', 'workspace'] })
+    return agentClient.allAgents.useQuery({ visibilities: ['ACCOUNT', 'SHARED', 'PERSONAL', 'BUILT-IN', 'WORKSPACE'] })
   }
 
   return <Selector
@@ -68,7 +68,7 @@ export const AgentSelector = ({ inputRef, isTrial }: {
       regex: agentRegex,
       urlBuilder: (agent) => `/agents/${agent?.id}`,
       searchProp: 'name',
-      sections: isTrial ? ['favorite', 'personal', 'built_in'] : ['favorite', 'personal', 'workspace', 'account', 'shared', 'built_in'],
+      sections: isTrial ? ['favorite', 'personal', 'built-in'] : ['favorite', 'personal', 'workspace', 'account', 'shared', 'built-in'],
       renderComponentItem: AgentItem,
       isEnabled: isAgentEnabled,
       onSelect: onSelectItem,

package/src/views/MessageInput/ButtonAgent.tsx

@@ -2,14 +2,14 @@ import { Flex, IconBox } from '@citric/core'
 import { Agent, TimesMini } from '@citric/icons'
 import { IconButton, Tooltip } from '@citric/ui'
 import { MiniLogo } from '@stack-spot/portal-components/svg'
-import { agentToolsClient } from '@stack-spot/portal-network'
+import { agentClient } from '@stack-spot/portal-network'
 import { useEffect } from 'react'
 import { useCurrentChat, useCurrentChatState, useWidget } from '../../context/hooks'
 import { useMessageInputDictionary } from './dictionary'
 
 export const ButtonAgent = () => {
   const t = useMessageInputDictionary()
-  const agentDefault = agentToolsClient.agentDefault.useQuery()
+  const agentDefault = agentClient.agentDefault.useQuery({})
   const widget = useWidget()
   const chat = useCurrentChat()
   const agent = useCurrentChatState('agent')