@stack-spot/ai-chat-widget 3.3.1-beta.5 → 3.3.3-beta.5

package/src/views/Agents/AgentsTab.tsx

@@ -29,16 +29,22 @@ export const AgentsTab = ({ visibility, workspaceId, agent, showSubmitButton = t
   const [submitEnabled, setSubmitEnabled] = useState(false)
   const listFavorites = useFavorites()
   const agentDefault = agentToolsClient.agentDefault.useQuery()
-  const agents = workspaceId
-    ? workspaceAiClient.getAgentFromWorkspaceAi.useQuery({ workspaceId }) as AgentResponseWithBuiltIn[]
-    : agentToolsClient.agents.useQuery({ visibility })
+  const data = workspaceAiClient.getAgentFromWorkspaceAi.useStatefulQuery({ workspaceId: workspaceId! },
+    { enabled: !!workspaceId })
+  const workspaceAgents = data?.[0] as AgentResponseWithBuiltIn[]
+  const [agentsData=[], { hasNextPage, fetchNextPage }] = 
+    agentToolsClient.agentsMultipleFilters.useInfiniteQuery({
+      filters: { visibility_list: [visibility!], page: 1, size: 20 },
+    }, { enabled: !workspaceId && !!visibility })
+  
+  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) setSubmitEnabled(true)
+        ? 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],
@@ -49,35 +55,36 @@ export const AgentsTab = ({ visibility, workspaceId, agent, showSubmitButton = t
     close()
   }
 
-  return (
-    <>
-      <div className="content">
-        <DescribedRadioGroup
-          options={agents}
-          initialValue={initialValue}
-          onChange={(ag) => {
-            agent.current = ag
-              ? { ...ag, label: ag.name, image: ag.avatar!, slug: ag.slug, builtIn: ag.visibility_level === 'built_in' }
-              : undefined
-            setSubmitEnabled(true)
-          }}
-          data={ag => ({
-            idOrSlug: ag.id,
-            image: ag.avatar ? <img src={ag.avatar} /> : <Icon icon="Agent" />,
-            description: <AgentDescription agentId={ag.id} />,
-            name: ag.name,
-            listFavorites,
-            onAddFavorite,
-            onRemoveFavorite,
-          })}
-          emptyResults={
-            <Placeholder title={t.noSearchResults} description={t.noSearchResultsDescription} className="no-data-placeholder" />
-          }
-          emptyDataset={<Placeholder title={t.noData} description={t.noDataDescription} />}
-        />
-      </div>
-      {!!agents.length && showSubmitButton && <Button onClick={submit} disabled={!submitEnabled}>{t.apply}</Button>}
-    </>
+  return (<>
+    <div className="content">
+      <DescribedRadioGroup
+        fetchNextPage={fetchNextPage} 
+        hasNextPage={hasNextPage}
+        options={agents}
+        initialValue={initialValue}
+        onChange={(ag) => {
+          agent.current = ag
+            ? { ...ag, label: ag.name, image: ag.avatar!, slug: ag.slug, builtIn: ag.visibility_level === 'built_in' }
+            : undefined
+          setSubmitEnabled(true)
+        }}
+        data={ag => ({
+          idOrSlug: ag.id,
+          image: ag.avatar ? <img src={ag.avatar} /> : <Icon icon="Agent" />,
+          description: <AgentDescription agentId={ag.id} />,
+          name: ag.name,
+          listFavorites,
+          onAddFavorite,
+          onRemoveFavorite,
+        })}
+        emptyResults={
+          <Placeholder title={t.noSearchResults} description={t.noSearchResultsDescription} className="no-data-placeholder" />
+        }
+        emptyDataset={<Placeholder title={t.noData} description={t.noDataDescription} />}
+      />
+    </div>
+    {!!agents?.length && showSubmitButton && <Button onClick={submit} disabled={!submitEnabled}>{t.apply}</Button>}
+  </>
   )
 }
 

package/src/views/Agents/useAgentFavorites.ts

@@ -2,14 +2,14 @@
 import { agentToolsClient } from '@stack-spot/portal-network'
 
 export function useAgentFavorites() {
-  const useFavorites = () => agentToolsClient.agents.useQuery({ visibility: 'favorite' })
+  const useFavorites = () => agentToolsClient.agentsMultipleFilters.useQuery({ filters: { visibility_list: ['favorite'] } })?.items
   const [addFavorite, pendingAddFav] = agentToolsClient.addFavorite.useMutation()
   const [removeFavorite, pendingRemoveFav] = agentToolsClient.removeFavorite.useMutation()
 
   const removeFavoriteAgent = async (idOrSlug?: string) => {
     try {
       await removeFavorite({ agentId: idOrSlug || '' })
-      await agentToolsClient.agents.invalidate({ visibility: 'favorite' })
+      await agentToolsClient.agentsMultipleFilters.invalidate({ filters: { visibility_list: ['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 agentToolsClient.agentsMultipleFilters.invalidate({ filters: { visibility_list: ['favorite'] } })
     } catch (error) {
       // eslint-disable-next-line no-console
       console.error(error)

package/src/views/Chat/ChatMessage.tsx

@@ -424,7 +424,7 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage, cust
                 )
               })}
             </Button>
-            <ViewToolsDetails chatId={chat.id} />
+            <ViewToolsDetails chatId={chat.id} messageId={message.id} />
           </div>
         }
 

package/src/views/Chat/StepsList.tsx

@@ -50,14 +50,14 @@ const StepAccordionHeader = ({ step, index, expand }: Pick<StepProps, 'step' | '
   return <Row gap="8px">
     {expand}
     {step.status === 'target' ? <Text className="step-title" appearance="body2" color="light.700">{t.planGoal}:</Text> :
-      <Badge colorScheme="inverse" appearance="square">
+      <Badge colorScheme="inverse" appearance="square" style={{ whiteSpace: 'nowrap' }}>
         {t.step} {index}
       </Badge>}
     <Text className="step-title" appearance="body2">
       {step.input}
     </Text>
     {step.status === 'awaiting_approval' &&
-      <Badge appearance="square" style={{ backgroundColor: theme.color.gray[800], color: theme.color.gray[50] }}>
+      <Badge appearance="square" style={{ backgroundColor: theme.color.gray[800], color: theme.color.gray[50], whiteSpace: 'nowrap' }}>
         <Icon icon="Security" />
         {t.pendingReview}
       </Badge>}
@@ -199,7 +199,7 @@ export const ToolStepsList = ({ toolStep, messageId, chatId }: { toolStep: ToolC
   return <>
     {toolStep && tool ? <AnimatedHeight>
       <div className="steps">
-        <Badge colorPalette="yellow" appearance="square">
+        <Badge colorPalette="yellow" appearance="square" style={{ whiteSpace: 'nowrap' }}>
           <Icon icon="StopWatch" />
           <Text>{tool.name} {t.keepWorking}</Text>
         </Badge>
@@ -305,7 +305,7 @@ export const StepsList = ({ steps, messageId, chatId, userHasAlreadyAnswered }:
           {!userHasAlreadyAnswered && planning?.[0]?.status === 'awaiting_approval' && <AwaitingApproval chatId={chatId} />}
         </Column>
 
-        {userHasAlreadyAnswered && planning?.[0]?.status === 'success' && <ViewToolsDetails chatId={chatId} />}
+        {userHasAlreadyAnswered && planning?.[0]?.status === 'success' && <ViewToolsDetails chatId={chatId} messageId={messageId}/>}
 
       </div>
     </AnimatedHeight> : null}
@@ -316,14 +316,15 @@ export const StepsList = ({ steps, messageId, chatId, userHasAlreadyAnswered }:
   )
 }
 
-export const ViewToolsDetails = ({ chatId }: { chatId: string }) => {
+export const ViewToolsDetails = ({ chatId, messageId }: { chatId: string, messageId: number }) => {
   const t = useTranslate(dictionary)
   const messages = useChatMessages(chatId)
   const widget = useWidget()
   const getPlanningMessageId = () => {
+    const messageStep= messages[messageId]?.getValue().steps?.find((step) => step.type === 'step')
     const messageWithPlanning = findLast(messages, (message) => {
       const steps = message.getValue().steps
-      const planningStep = steps?.find((step) => step.type === 'planning' && step.status === 'success')
+      const planningStep = steps?.find((step) => step.id === messageStep?.id)
       return planningStep ? true : false
     })
     return messageWithPlanning?.id

package/src/views/MessageInput/ModelSwitcher/index.tsx

@@ -15,7 +15,8 @@ export const ModelSwitcher = () => {
   const chat = useCurrentChat()
   const [filter, setFilter] = useState('')
   const [visibleMenu, setVisibleMenu] = useState(false)
-  const [agentData, isLoadingAgentData] = agentToolsClient.agent.useStatefulQuery({ agentId: agentCurrentChat?.id || '' })
+  const [agentData, isLoadingAgentData] = agentToolsClient.agent.useStatefulQuery({ agentId: agentCurrentChat?.id || '' }, 
+    { enabled: !!agentCurrentChat?.id })
   const [models, isLoadingModels] = 
     genAiInferenceClient.listModels.useStatefulQuery({ pageSize: 999, active: true })