@stack-spot/ai-chat-widget 1.20.0 → 1.20.2

package/src/views/MessageInput/AgentSelector.tsx

@@ -1,15 +1,13 @@
 import { Flex, IconBox, Image } from '@citric/core'
 import { Agent } from '@citric/icons'
-import { agentClient, workspaceAiClient } from '@stack-spot/portal-network'
-import { AgentResponse } from '@stack-spot/portal-network/api/agent'
-import { uniqBy } from 'lodash'
+import { agentClient, AgentResponseWithBuiltIn } from '@stack-spot/portal-network'
 import { useCallback } from 'react'
 import { Selector } from '../../components/Selector'
 import { useCurrentChat, useCurrentChatState } from '../../context/hooks'
 import { agentRegex } from '../../regex'
 import { useAgentFavorites } from '../Agents/useAgentFavorites'
 
-type AgentWithSpaceName = AgentResponse & { spaceName?: string }
+type AgentWithSpaceName = AgentResponseWithBuiltIn
 
 const AgentItem = ({ avatar, name, spaceName }: AgentWithSpaceName) => {
   const avatarComponent = avatar ? <Image width="32" height="32" radius="full" src={avatar} /> : <IconBox size="md"><Agent /></IconBox>
@@ -23,25 +21,27 @@ const AgentItem = ({ avatar, name, spaceName }: AgentWithSpaceName) => {
   </Flex>
 }
 
-export const AgentSelector = ({ inputRef, isTrial }: { isTrial: boolean,
+export const AgentSelector = ({ inputRef, isTrial }: {
+  isTrial: boolean,
   inputRef: React.RefObject<HTMLTextAreaElement | HTMLInputElement>,
 }) => {
   const chat = useCurrentChat()
   const isAgentEnabled = useCurrentChatState('features').agent
   
   const { useFavorites, onAddFavorite, onRemoveFavorite } = useAgentFavorites()
-  
-  const onSelectItem = useCallback(async (agent: AgentResponse) => {
-    const publicAgents = await agentClient.publicAgents.query({})
-    const builtInsAgents = [...publicAgents.map((agent) => ({ ...agent, visibility_level: 'builtIn' }))]
+
+  const onSelectItem = useCallback(async (agent: AgentResponseWithBuiltIn) => {
     const newValue = `@${agent.slug}`
     chat.set('nextMessage', undefined)
-    const isBuiltIn = agent.visibility_level === 'builtIn' || builtInsAgents.some((builtInAgent) => builtInAgent.id === agent.id)
     chat.set(
       'agent',
       {
-        id: agent.id, label: agent.name, image: agent.avatar, slug: agent.slug,
-        builtIn: isBuiltIn, visibility_level: agent.visibility_level,
+        id: agent.id,
+        label: agent.name,
+        image: agent.avatar, 
+        slug: agent.slug, 
+        builtIn: agent.builtIn,
+        visibility_level: agent.visibility_level,
       },
     )
 
@@ -50,22 +50,12 @@ export const AgentSelector = ({ inputRef, isTrial }: { isTrial: boolean,
     inputRef.current.focus()
   }, [chat, inputRef])
 
-  const getAgents = () => {
-    const personalAgents = agentClient.agents.useQuery({ visibility: 'PERSONAL' })
-    const publicAgents = agentClient.publicAgents.useQuery({})
-    const builtInsAgents = [...publicAgents.map((agent) => ({ ...agent, visibility_level: 'builtIn' }))]
-    const workspaceAgents = workspaceAiClient.workspacesContentsByType.useQuery({ contentType: 'agent' })
 
-    const workspaceAgentsWithWorkspaceName = workspaceAgents.flatMap(({ agents, space_name }) =>
-      agents?.map((agent) => ({ ...agent, spaceName: space_name }))) as AgentWithSpaceName[]
-    let accountAgents: AgentResponse[] = []
-    let sharedAgents: AgentResponse[] = []
-    if (!isTrial) {
-      accountAgents = agentClient.agents.useQuery({ visibility: 'ACCOUNT' }) || []
-      sharedAgents = agentClient.agents.useQuery({ visibility: 'SHARED' }) || []
+  const getAgents = () => {
+    if (isTrial) {
+      return agentClient.allAgents.useQuery({ visibilities: ['PERSONAL', 'BUILT-IN'] }) 
     }
-
-    return uniqBy([...personalAgents, ...workspaceAgentsWithWorkspaceName, ...accountAgents, ...sharedAgents, ...builtInsAgents], 'id')
+    return agentClient.allAgents.useQuery({ visibilities: ['ACCOUNT', 'SHARED', 'PERSONAL', 'BUILT-IN', 'WORKSPACE'] })
   }
 
   return <Selector
@@ -78,7 +68,7 @@ export const AgentSelector = ({ inputRef, isTrial }: { isTrial: boolean,
       regex: agentRegex,
       urlBuilder: (agent) => `/agents/${agent?.id}`,
       searchProp: 'name',
-      sections:  isTrial ? ['favorite', 'personal', 'builtIn'] : ['favorite', 'personal', 'workspace', 'account', 'shared', 'builtIn'],
+      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

@@ -5,13 +5,11 @@ import { MiniLogo } from '@stack-spot/portal-components/svg'
 import { agentClient } from '@stack-spot/portal-network'
 import { useEffect } from 'react'
 import { useCurrentChat, useCurrentChatState, useWidget } from '../../context/hooks'
-import { isAgentDefault } from '../../utils/agent'
 import { useMessageInputDictionary } from './dictionary'
 
 export const ButtonAgent = () => {
   const t = useMessageInputDictionary()
-  const [agentsBuiltIn] = agentClient.publicAgents.useStatefulQuery({})
-  const agentDefault = agentsBuiltIn?.find((agent) => isAgentDefault(agent.slug))
+  const agentDefault = agentClient.agentDefault.useQuery({})
   const widget = useWidget()
   const chat = useCurrentChat()
   const agent = useCurrentChatState('agent')
@@ -37,6 +35,8 @@ export const ButtonAgent = () => {
     }
   }, [agentDefault, agent])
 
+  const isAgentDefault = () => agent?.id === agentDefault?.id 
+
   return (
     <div className="button-group">
       {features.agent && (
@@ -44,7 +44,7 @@ export const ButtonAgent = () => {
           <IconButton aria-label={t.agent} title={t.agent} className="agent" onClick={() => widget.set('panel', 'agent')}>
             {agentDefault?.avatar ? <img src={agentDefault.avatar} className="image" /> : <MiniLogo />}
           </IconButton>
-          {agent?.id && !isAgentDefault(agent?.slug) &&
+          {agent?.id && !isAgentDefault() &&
             <Tooltip text={t.remove} >
               <IconButton aria-label={t.remove} className="agent agent-selected" onClick={setAgentDefault}>
                 {agent?.image ? <img src={agent.image} className="image" /> : <IconBox className="image" size="xs"><Agent /></IconBox>}

package/src/views/MessageInput/InfoBar.tsx

@@ -1,3 +1,4 @@
+import { Text } from '@citric/core'
 import { Times, TimesMini } from '@citric/icons'
 import { Badge, IconButton } from '@citric/ui'
 import { loader } from '@monaco-editor/react'
@@ -15,9 +16,14 @@ interface InfoBadgeProps {
 }
 
 const InfoBadge = ({ label, color, dismiss, onDismiss }: InfoBadgeProps) => (
-  <Badge appearance="square" palette={color} className="info-badge">
-    {label}
-    {onDismiss && <IconButton onClick={onDismiss} title={dismiss} arial-label={dismiss}><TimesMini /></IconButton>}
+  <Badge appearance="square" palette={color} className="info-badge" 
+    afterElement={
+      onDismiss && 
+      <IconButton appearance="square" colorIcon={`${color}.800`} onClick={onDismiss} title={dismiss} arial-label={dismiss}>
+        <TimesMini />
+      </IconButton>
+    }>
+    <Text nowrapEllipsis>{label}</Text>
   </Badge>
 )
 

package/src/views/Steps/StepModal.tsx

@@ -154,7 +154,6 @@ export const StepModal = ({ message, stepId, onClose }: Props) => {
           {attempt > 0 && (
             <IconButton
               size="xs"
-              appearance="text"
               title={t.previousAttempt}
               aria-label={t.previousAttempt}
               onClick={() => setAttempt(attempt - 1)}
@@ -166,7 +165,6 @@ export const StepModal = ({ message, stepId, onClose }: Props) => {
           {attempt < step.attempts.length - 1 && (
             <IconButton
               size="xs"
-              appearance="text"
               title={t.nextAttempt}
               aria-label={t.nextAttempt}
               onClick={() => setAttempt(attempt + 1)}

package/dist/utils/agent.d.ts

@@ -1,2 +0,0 @@
-export declare const isAgentDefault: (agentSlug?: string) => agentSlug is "stk_code_buddy";
-//# sourceMappingURL=agent.d.ts.map

package/dist/utils/agent.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"agent.d.ts","sourceRoot":"","sources":["../../src/utils/agent.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc,eAAgB,MAAM,kCAAmC,CAAA"}

package/dist/utils/agent.js

@@ -1,2 +0,0 @@
-export const isAgentDefault = (agentSlug) => agentSlug === 'stk_code_buddy';
-//# sourceMappingURL=agent.js.map

package/dist/utils/agent.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"agent.js","sourceRoot":"","sources":["../../src/utils/agent.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,SAAkB,EAAE,EAAE,CAAC,SAAS,KAAK,gBAAgB,CAAA"}

package/src/utils/agent.ts

@@ -1 +0,0 @@
-export const isAgentDefault = (agentSlug?: string) => agentSlug === 'stk_code_buddy'