@stack-spot/ai-chat-widget 2.4.1 → 2.5.0

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)
+      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/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>

package/src/views/MessageInput/ButtonBar.tsx

@@ -30,7 +30,7 @@ export const ButtonBar = ({ onSend, isLoading }: SelectionBarProps) => {
           <IconButton icon="Code" appearance="square" aria-label={t.code} title={t.code} onClick={() => widget.set('panel', 'editor')} />
         )}
       </Row>
-      <ModelSwitcher />
+      {features.showLLMSelect && <ModelSwitcher />}
       {isLoading ? (
         <IconButton
           icon="Stop"

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 })
 

package/src/views/MessageInput/index.tsx

@@ -24,7 +24,7 @@ import { UploadDragNDrop, useUploadDragDrop } from './UploadDragNDrop'
  * going to be used for the question and the buttons to send, cancel, set the workspace, among others. This also includes the Quick
  * Commands panel for auto completing.
  */
-export const MessageInput = ({ chatWindowRef, customInputMessage }: 
+export const MessageInput = ({ chatWindowRef, customInputMessage }:
   { chatWindowRef?: React.RefObject<HTMLElement>, customInputMessage?: string }) => {
   const t = useMessageInputDictionary()
   const [focused, setFocused] = useState(false)
@@ -96,7 +96,7 @@ export const MessageInput = ({ chatWindowRef, customInputMessage }:
     if (!checkSendRequirements()) return
 
     // Compose prompt with code block if needed
-    const prompt = code && !quickCommandRegex.test(message ?? '') ? `${message}\n\`\`\`${language}\n${code}\n\`\`\`` : message 
+    const prompt = code && !quickCommandRegex.test(message ?? '') ? `${message}\n\`\`\`${language}\n${code}\n\`\`\`` : message
 
     // Validate prompt length
     if (!checkPromptMaxLength(prompt || '')) return