@stack-spot/ai-chat-widget 3.4.1-beta.5 → 3.6.0-beta.5

package/src/views/Agents/AgentDescription.tsx

@@ -1,15 +1,13 @@
 import { Icon } from '@stack-spot/citric-icons'
-import { Badge, Card, IconBox, ImageBox, ImageWithFallback, Skeleton, Text } from '@stack-spot/citric-react'
+import { AsyncContent, Badge, Card, IconBox, ImageBox, ImageWithFallback, Text } from '@stack-spot/citric-react'
 import { agentToolsClient } from '@stack-spot/portal-network'
 import { useMemo } from 'react'
-import { toolById } from '../../utils/tools'
 import { useAgentsDictionary } from './dictionary'
 import { AgentDescriptionBox } from './styled'
 
 export const AgentDescription = ({ agentId }: { agentId?: string }) => {
   const t = useAgentsDictionary()
-  const [agent, , , { isLoading }] = agentToolsClient.agent.useStatefulQuery({ agentId: agentId! }, { enabled: !!agentId })
-  const [toolKits, , , { isLoading: isLoadingToolKit }] = agentToolsClient.tools.useStatefulQuery({})
+  const [agent,, error, { isLoading }] = agentToolsClient.agent.useStatefulQuery({ agentId: agentId! }, { enabled: !!agentId })
   const numberOfKnowledgeSources = agent?.knowledge_sources_config?.knowledge_sources.length ?? 0
   
   const knowledgeSources = useMemo(
@@ -23,13 +21,6 @@ export const AgentDescription = ({ agentId }: { agentId?: string }) => {
     )),
     [agent],
   )
-  const skeleton = useMemo(() => {
-    const loadingKS: React.ReactElement[] = []
-    for (let i = 0; i < numberOfKnowledgeSources; i++) {
-      loadingKS.push(<li key={i}><Badge colorPalette="teal" appearance="square"><Skeleton className="ks-skeleton" /></Badge></li>)
-    }
-    return loadingKS
-  }, [numberOfKnowledgeSources])
   
   const { tools, multiAgents } = useMemo(() => {
     const tools: React.ReactElement[] = [] 
@@ -39,12 +30,11 @@ export const AgentDescription = ({ agentId }: { agentId?: string }) => {
     for (const toolkit of builtInTools) {
       for (const tool of toolkit.tools ?? []) {
         if (toolkit.id == 'UTILITIES'){ 
-          const toolWithImage = toolById(tool.id, toolKits)
           tools.push(
             <li key={tool.id}>
               <Card gap="10px" direction="row" flex={1} size="xxs" bgLevel={500}>
-                <ImageBox><ImageWithFallback src={toolWithImage?.image} fallback={<Icon icon="Cog" />} /></ImageBox>
-                <Text color="light.contrastText">{toolWithImage?.name || toolWithImage?.id || 'unknown'}</Text>
+                <ImageBox><ImageWithFallback src={toolkit.image_url} fallback={<Icon icon="Cog" />} /></ImageBox>
+                <Text color="light.contrastText">{tool?.name || tool?.id || 'unknown'}</Text>
               </Card>
             </li>,
           )
@@ -76,28 +66,42 @@ export const AgentDescription = ({ agentId }: { agentId?: string }) => {
     return { tools, multiAgents }
   }, [agent])
 
+  const mcpToolkits = useMemo(() => agent?.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])
+
   return (
-    <AgentDescriptionBox>
-      {agent?.description && <section>
-        <Text appearance="microtext1" className="title">{t.description}</Text>
-        <Text>{agent?.description}</Text>
-      </section>}
-      {(!!numberOfKnowledgeSources || !!knowledgeSources?.length) && <section>
-        <Text appearance="microtext1" className="title">Knowledge sources</Text>
-        <ul>{isLoading || isLoadingToolKit ? skeleton : knowledgeSources}</ul>
-      </section>}
-      {!!tools?.length && <section>
-        <Text appearance="microtext1" className="title">{t.tools}</Text>
-        <ul>{tools}</ul>
-      </section>}
-      {!!multiAgents?.length && <section>
-        <Text appearance="microtext1" className="title">{t.multiAgent}</Text>
-        <ul>{multiAgents}</ul>
-      </section>}
-      {agent?.model_name && <section>
-        <Text appearance="microtext1" className="title">LLM</Text>
-        <Badge colorPalette="orange" appearance="square">{agent?.model_name}</Badge>
-      </section>}
-    </AgentDescriptionBox>
+    <AsyncContent loading={isLoading} error={error}>
+      <AgentDescriptionBox>
+        {agent?.description && <section>
+          <Text appearance="microtext1" className="title">{t.description}</Text>
+          <Text>{agent?.description}</Text>
+        </section>}
+        {(!!numberOfKnowledgeSources || !!knowledgeSources?.length) && <section>
+          <Text appearance="microtext1" className="title">Knowledge sources</Text>
+          <ul>{knowledgeSources}</ul>
+        </section>}
+        {!!tools?.length && <section>
+          <Text appearance="microtext1" className="title">{t.tools}</Text>
+          <ul>
+            {tools}
+            {mcpToolkits}
+          </ul>
+        </section>}
+        {!!multiAgents?.length && <section>
+          <Text appearance="microtext1" className="title">{t.multiAgent}</Text>
+          <ul>{multiAgents}</ul>
+        </section>}
+        {agent?.model_name && <section>
+          <Text appearance="microtext1" className="title">LLM</Text>
+          <Badge colorPalette="orange" appearance="square">{agent?.model_name}</Badge>
+        </section>}
+      </AgentDescriptionBox>
+    </AsyncContent>
   )
 }

package/src/views/Agents/AgentsTab.tsx

@@ -1,5 +1,5 @@
 import { Icon } from '@stack-spot/citric-icons'
-import { Button } from '@stack-spot/citric-react'
+import { Button, ImageWithFallback } from '@stack-spot/citric-react'
 import { Placeholder } from '@stack-spot/portal-components/Placeholder'
 import { AgentResponseWithBuiltIn, agentToolsClient, AgentVisibilityLevel, workspaceAiClient } from '@stack-spot/portal-network'
 import { WorkspaceResponse } from '@stack-spot/portal-network/api/workspace-ai'
@@ -30,7 +30,7 @@ export const AgentsTab = ({ visibility, workspaceId, agent, showSubmitButton = t
   const [submitEnabled, setSubmitEnabled] = useState(false)
   const listFavorites = useFavorites()
   const agentDefault = agentToolsClient.agentDefault.useQuery()
-  
+
   const [filter, setFilter] = useState<string | undefined>()
   const [apiFilter, setApiFilter] = useState<string | undefined>()
   const [isPending, startTransition] = useTransition()
@@ -47,9 +47,9 @@ export const AgentsTab = ({ visibility, workspaceId, agent, showSubmitButton = t
   const data = workspaceAiClient.getAgentFromWorkspaceAi.useStatefulQuery({ workspaceId: workspaceId! },
     { enabled: !!workspaceId })
   const workspaceAgents = data?.[0] as AgentResponseWithBuiltIn[]
-  
-  const [agentsData=[], { fetchNextPage, hasNextPage }] = agentToolsClient.agentsMultipleFilters.useInfiniteQuery({
-    filters: { 
+
+  const [agentsData = [], { fetchNextPage, hasNextPage }] = agentToolsClient.agentsMultipleFilters.useInfiniteQuery({
+    filters: {
       page: 1,
       size: 20,
       name: apiFilter,
@@ -78,7 +78,7 @@ export const AgentsTab = ({ visibility, workspaceId, agent, showSubmitButton = t
   return <>
     <div className="content">
       <DescribedRadioGroup
-        fetchNextPage={fetchNextPage} 
+        fetchNextPage={fetchNextPage}
         hasNextPage={hasNextPage && !workspaceId}
         options={agents}
         initialValue={initialValue}
@@ -96,7 +96,8 @@ export const AgentsTab = ({ visibility, workspaceId, agent, showSubmitButton = t
         isLoading={isPending}
         data={ag => ({
           idOrSlug: ag.id,
-          image: ag.avatar ? <img src={ag.avatar} /> : <Icon icon="Agent" />,
+          // 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} />,
           name: ag.name,
           listFavorites,

package/src/views/Chat/ChatMessage.tsx

@@ -9,7 +9,7 @@ import { PhoneInput } from 'react-international-phone'
 import 'react-international-phone/style.css'
 import { FileDescription } from '../../components/FileDescription'
 import { Markdown } from '../../components/Markdown'
-import { useChatEntry, useChatMessages, useCurrentChat, useCurrentChatState, useWidget } from '../../context/hooks'
+import { useChatEntry, useCurrentChat, useCurrentChatState, useWidget } from '../../context/hooks'
 import { useMidnightUpdateView } from '../../hooks/midnight-update-view'
 import { ChatEntry, SerializableAction, TextChatEntry } from '../../state/ChatEntry'
 import { useDateFormatter } from '../../utils/date'
@@ -213,26 +213,24 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage, cust
   const widget = useWidget()
   const chat = useCurrentChat()
   const agentId = entry.agent?.id ?? ''
-  const [toolKits] = agentToolsClient.tools.useStatefulQuery({}, { enabled: !!agentId })
+  // enabled: we don't want to make any request if there is no agent
+  const [agent] = agentToolsClient.agent.useStatefulQuery({ agentId }, { enabled: !!agentId })
+  const toolkits = useMemo(() => [
+    ...agent?.toolkits?.builtin_toolkits ?? [],
+    ...agent?.toolkits?.custom_toolkits ?? [],
+    ...agent?.toolkits?.mcp_toolkits ?? [],
+  ], [agent])
   const [agentsTools] = agentToolsClient.agentsByIds.useStatefulQuery(
-    { searchAgentsRequest: { ids: entry.tools || [''] } }, { enabled: !!entry.tools })
+    { searchAgentsRequest: { ids: entry.tools || [''] } }, { enabled: !!entry.tools?.length })
   const [copied, setCopied] = useState(false)
   const [showUserButtonCopy, setShowUserButtonCopy] = useState(false)
   const isPlanning = useCurrentChatState('isPlaning') ?? false
 
-  // when we have a steps but we are not showing any content of the step
-  // (because it is a tool and the user has already answered the question)
-  // we do not want to show an avatar with empty content, so we hide the entire message
-  const toolsStep = entry.steps?.find(s => s.type === 'tool')
-  const messages = useChatMessages(chat.id)
-  const userHasAlreadyAnswered = useMemo(() => {
-    const messageIndex = messages.findIndex((messageItem) => messageItem.id === message.id)
-    if (messages.length - 1 === messageIndex) return false
-    const nextMessage = messages[messageIndex + 1].getValue()
-    return nextMessage.agentType === 'user'
-  }, [messages, messages.length])
-  const isMessageHidden = toolsStep && userHasAlreadyAnswered
-
+  // Dynamic tool steps are identified by the "dynamic" id.
+  // We're temporarily hiding the toolbox for these dynamic tools while we finalize their UI.
+  const shouldHideToolbox =  entry?.steps?.some((step) => step?.id === 'dynamic')
+  const showToolBox = (!!agentsTools?.length || !!entry.tools?.length) && !shouldHideToolbox
+  
   useChatScrollToBottomEffect(ref, [entry])
   useMidnightUpdateView()
 
@@ -357,8 +355,10 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage, cust
     widget.set('panel', 'resources')
   }
 
-  return (entry.content || entry.error || !!entry.steps?.length ||
-    entry.upload?.length) && (!isMessageHidden || !toolsStep || isPlanning) && (
+  const shouldShowToolsOnlyMessage = (entry.done !== false || entry.hasPlanning) && !!entry.steps?.length
+  const shouldRender = entry.content || entry.error || shouldShowToolsOnlyMessage || !!entry.upload?.length
+
+  return shouldRender && (
     <li key={entry.messageId} className={entry.agentType} ref={ref}>
       <div className="chat-message-container"
         onMouseEnter={entry.agentType === 'user' ? () => setShowUserButtonCopy(true) : undefined}
@@ -372,8 +372,7 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage, cust
                 {entry.badges.map((b, index) => <Badge key={index} colorPalette={b.color ?? 'cyan'} appearance="square">{b.label}</Badge>)}
               </div>}
 
-              {!!entry.steps?.length && <StepsList steps={entry.steps} chatId={chat.id} messageId={message.id}
-                userHasAlreadyAnswered={userHasAlreadyAnswered} />}
+              {!!entry.steps?.length && <StepsList steps={entry.steps} chatId={chat.id} messageId={message.id} />}
 
               {renderContent()}
 
@@ -394,7 +393,7 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage, cust
           ))}</ul>
         </div>}
 
-        {(!!agentsTools?.length || !!entry.tools?.length) && 
+        {showToolBox && 
           <div className="tools-box">
             <Button appearance="none" onClick={openResourcesPanel} aria-label={t.openResourcesPanel}>
               {agentsTools?.map((agent) => (
@@ -409,13 +408,14 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage, cust
                 </ImageBox>
               ))}
               {entry?.tools?.map((id) => {
+                // In the multi-agents feature, an agent is returned as a tool, but we don't want to show agents here.
                 if (agentsTools?.some((agent) => agent.id === id)) return null
-                const tool = toolById(id, toolKits)
+                const tool = toolById(id, toolkits)
                 return (
                   <ImageBox key={id} className="agent-info-avatar-resource">
                     <ImageWithFallback
                       src={tool?.image}
-                      fallback={<Icon icon="Cog" />}
+                      fallback={<Icon icon="Cog" title={tool?.name} aria-label={tool?.name} />}
                       alt={tool?.name}
                       aria-label={tool?.name}
                       title={tool?.name}

package/src/views/Chat/StepsList.tsx

@@ -7,7 +7,7 @@ import { findLast, findLastIndex } from 'lodash'
 import React, { useEffect, useMemo } from 'react'
 import styled from 'styled-components'
 import { Markdown } from '../../components/Markdown'
-import { useChat, useChatMessages, useCurrentChat, useCurrentChatMessages, useWidget } from '../../context/hooks'
+import { useChat, useChatMessages, useCurrentChat, useCurrentChatMessages, useIsLastEntryInCurrentChat, useWidget } from '../../context/hooks'
 import { ChatEntry } from '../../state/ChatEntry'
 import { planningToolDictionaryHelper } from '../../utils/planning-tool'
 import { updateToolStep } from '../../utils/update-tool-step'
@@ -17,7 +17,6 @@ interface Props {
   steps: ChatStep[],
   messageId: number,
   chatId: string,
-  userHasAlreadyAnswered?: boolean,
 }
 
 interface StepChatStepWithTarget extends Omit<StepChatStep, 'status' | 'id' | 'type'> {
@@ -152,7 +151,7 @@ const AwaitingApproval = ({ customApproveText, chatId }: { chatId: string, custo
   const chat = useChat(chatId)
 
   const onAnswer = (response: string) => {
-    chat.pushMessage(ChatEntry.createUserEntry('', false, undefined, undefined, response))
+    chat.pushMessage(ChatEntry.createUserEntry(response))
   }
 
   return <>
@@ -174,10 +173,11 @@ const AwaitingApproval = ({ customApproveText, chatId }: { chatId: string, custo
   </>
 }
 
-export const ToolStepsList = ({ toolStep, messageId, chatId }: { toolStep: ToolChatStep, messageId: number, chatId: string }) => {
+const ToolStepsList = ({ toolStep, messageId, chatId }: { toolStep: ToolChatStep, messageId: number, chatId: string }) => {
   const t = useTranslate(dictionary)
   const chat = useCurrentChat()
   const messages = useCurrentChatMessages()
+  const isLastMessage = useIsLastEntryInCurrentChat(messageId)
   const inputParsed = `\`\`\`json
     ${JSON.stringify(toolStep?.input, null, 2)}
   \`\`\``
@@ -222,15 +222,16 @@ export const ToolStepsList = ({ toolStep, messageId, chatId }: { toolStep: ToolC
             </Markdown>
           </Accordion>
 
-          <AwaitingApproval customApproveText={t.approveTool} chatId={chatId} />
+          {isLastMessage && <AwaitingApproval customApproveText={t.approveTool} chatId={chatId} />}
         </Card>
       </div>
     </AnimatedHeight> : null}
   </>
 }
 
-export const StepsList = ({ steps, messageId, chatId, userHasAlreadyAnswered }: Props) => {
+export const StepsList = ({ steps, messageId, chatId }: Props) => {
   const t = useTranslate(dictionary)
+  const isLastMessage = useIsLastEntryInCurrentChat(messageId)
   
   const filteredSteps = steps.filter(s => s.type === 'step')
   const actualSteps = useMemo(() => filteredSteps.filter((item) => {
@@ -302,7 +303,7 @@ export const StepsList = ({ steps, messageId, chatId, userHasAlreadyAnswered }:
         <Column gap="8px" mt="8px">
           <Divider colorScheme="light" />
           <Text color="light.700">{planning?.[0]?.user_question}</Text>
-          {!userHasAlreadyAnswered && planning?.[0]?.status === 'awaiting_approval' && <AwaitingApproval chatId={chatId} />}
+          {isLastMessage && planning?.[0]?.status === 'awaiting_approval' && <AwaitingApproval chatId={chatId} />}
         </Column>
 
         {planning?.[0]?.status === 'success' && <ViewToolsDetails chatId={chatId} messageId={messageId}/>}
@@ -310,8 +311,7 @@ export const StepsList = ({ steps, messageId, chatId, userHasAlreadyAnswered }:
       </div>
     </AnimatedHeight> : null}
 
-    {toolsStep && toolsStep.status === 'awaiting_approval' && !userHasAlreadyAnswered &&
-      <ToolStepsList toolStep={toolsStep} messageId={messageId} chatId={chatId} />}
+    {toolsStep && toolsStep.status === 'awaiting_approval' && <ToolStepsList toolStep={toolsStep} messageId={messageId} chatId={chatId} />}
   </>
   )
 }

package/src/views/ChatHistory/utils.ts

@@ -1,4 +1,5 @@
-import { agentToolsClient, aiClient, workspaceClient } from '@stack-spot/portal-network'
+import { agentToolsClient, aiClient, AnswerChatStep, ChatAgentTool, ChatStep, PlanningChatStep, workspaceClient } from '@stack-spot/portal-network'
+import { AgentModel } from '@stack-spot/portal-network/api/agent-tools'
 import { last } from 'lodash'
 import { ChatEntry } from '../../state/ChatEntry'
 import { ChatProperties, ChatState } from '../../state/ChatState'
@@ -41,6 +42,96 @@ export async function findWorkspace(id: string | null): Promise<ChatProperties['
   }
 }
 
+function toJSONString(data: any) {
+  if (data === undefined || data === null) return undefined
+  if (typeof data === 'object') {
+    try {
+      return JSON.stringify(data, null, 2)
+    } catch { /* empty */ }
+  } else {
+    try {
+      return JSON.stringify(JSON.parse(data), null, 2)
+    } catch { /* empty */ }
+  }
+  return `${data}`
+}
+
+function findTool(agent: AgentModel | undefined, id: string) {
+  const allToolkits = [
+    ...agent?.toolkits?.builtin_toolkits ?? [],
+    ...agent?.toolkits?.custom_toolkits ?? [],
+    ...agent?.toolkits?.mcp_toolkits ?? [],
+  ]
+  for (const toolkit of allToolkits) {
+    for (const tool of toolkit.tools ?? []) {
+      if ('id' in tool && tool.id === id) return { toolkit, tool }
+    }
+  }
+  return { toolkit: undefined, tool: { name: id } }
+}
+
+async function stepsFromAgentInfo(
+  agentInfo: any[] | null | undefined, agentId: string | undefined, isLastEntry: boolean,
+): Promise<ChatStep[] | undefined> {
+  const planningInfo = agentInfo?.find(i => i.type === 'planning' && !!i.data)
+  if (planningInfo) {
+    let agent: AgentModel | undefined
+    try {
+      agent = agentId ? await agentToolsClient.agent.query({ agentId }) : undefined
+    } catch { /* empty */ }
+    const planning: PlanningChatStep = {
+      type: 'planning',
+      goal: planningInfo.data.plan_goal,
+      status: planningInfo.action === 'awaiting_approval' ? 'awaiting_approval' : 'success',
+      id: `${Math.random()}`,
+      steps: planningInfo.data.steps,
+      duration: planningInfo.duration,
+      user_question: planningInfo.data.user_question,
+    }
+    const steps = planningInfo?.data?.steps?.map((s: any): ChatStep => {
+      const lastTool = agentInfo!.find(i => i.id === last(s.tools as any[])?.tool_execution_id && i.action === 'end')
+      return {
+        type: 'step',
+        id: s.id,
+        status: isLastEntry && planningInfo.action === 'awaiting_approval' ? 'pending' : 'success',
+        input: s.goal,
+        output: toJSONString(lastTool?.data?.output),
+        duration: lastTool?.duration,
+        attempts: [{
+          tools: s.tools?.map((t: any): ChatAgentTool => {
+            const { toolkit, tool } = findTool(agent, t.tool_id)
+            const start = agentInfo!.find(i => i.id === t.tool_execution_id && i.action === 'start')
+            const end = agentInfo!.find(i => i.id === t.tool_execution_id && i.action === 'end')
+            return {
+              id: t.tool_id,
+              executionId: t.tool_execution_id,
+              name: tool?.name,
+              description: 'description' in tool ? tool.description : undefined,
+              image: toolkit ? (('image_url' in toolkit ? toolkit?.image_url : toolkit?.avatar) ?? undefined) : undefined,
+              goal: t.goal,
+              duration: end?.duration,
+              input: toJSONString(start?.data?.input),
+              output: toJSONString(end?.data?.output),
+            }
+          }),
+        }],
+      }
+    })
+    const answerInfo = agentInfo?.find(i => i.type === 'chat' && i.action === 'end')
+    const answer: AnswerChatStep | undefined = answerInfo ? {
+      id: `${Math.random()}`,
+      status: 'success',
+      type: 'answer',
+      duration: answerInfo.duration,
+    } : undefined
+    return answer ? [planning, ...steps, answer] : [planning, ...steps]
+  }
+}
+
+function toolsFromAgentInfo(agentInfo: any[] | null | undefined): string[] {
+  return agentInfo?.find(i => i.type === 'chat' && i.action === 'end')?.data?.used_tools
+}
+
 /**
  * Loads the chat identified by `conversationId` into the widget passed as parameter.
  * @param widget
@@ -64,7 +155,7 @@ export async function loadChat(widget: WidgetState, conversationId: string) {
     initial: { features: widget.chatFeatures, label: chat.title, stack, workspace, agent: agent ? { 
       ...agent, builtIn } : undefined },
     interceptors: widget.interceptors,
-    entries: chat.history?.map(item => new ChatEntry({
+    entries: await Promise.all(chat.history?.map(async (item, index) => new ChatEntry({
       agentType: item.agent === 'USER' ? 'user' : 'bot',
       content: item.content,
       type: 'md',
@@ -72,7 +163,9 @@ export async function loadChat(widget: WidgetState, conversationId: string) {
       messageId: item.message_id,
       knowledgeSources: item.agent === 'USER' ? undefined : genericSourcesToKnowledgeSources(item.sources),
       updated: item.updated,
-    })),
+      steps: await stepsFromAgentInfo(item.agent_info, item.custom_agent?.id, index === chat.history!.length - 1),
+      tools: toolsFromAgentInfo(item.agent_info),
+    })) ?? []),
   }))
   widget.chatTabs.select(chat.id)
 }