@stack-spot/ai-chat-widget 3.3.2-beta.5 → 3.3.4-beta.5

package/src/chat-interceptors/send-message.ts

@@ -47,22 +47,17 @@ function buildPrompt(content: string, data?: any) {
 }
 
 //Verify if the last planning in the messages has status awaiting_approval
-const getLastPlanningAwaiting = (chat: ChatState) => {
-  const messages = chat.getMessages()
-
-  return findLast(messages, item => {
-    const steps = item.getValue().steps
-    if (steps) {
-      const hasPlanning = steps.find((step) => step.type === 'planning')
-      return hasPlanning ? hasPlanning.status === 'awaiting_approval' : false
-    }
-    return false
-  })
-}
+const getLastPlanningAwaiting = (messages: ChatEntry[]) => findLast(messages, item => {
+  const steps = item.getValue().steps
+  if (steps) {
+    const hasPlanning = steps.find((step) => step.type === 'planning')
+    return hasPlanning ? hasPlanning.status === 'awaiting_approval' : false
+  }
+  return false
+})
 
-const updateToolStatus = (agentInfo: AgentInfo, chat: ChatState) => {
+const updateToolStatus = (agentInfo: AgentInfo, messages: ChatEntry[]) => {
   const executionId = agentInfo.id
-  const messages = chat.getMessages()
 
   if (executionId) {
     //Update message with type step which contains the planning steps
@@ -100,9 +95,8 @@ const updateToolStatus = (agentInfo: AgentInfo, chat: ChatState) => {
   }
 }
 
-const updateStepMessage = (step: ChatStep, chat: ChatState) => {
-  const lastPlanningAwaiting = getLastPlanningAwaiting(chat)
-  const messages = chat.getMessages()
+const updateStepMessage = (step: ChatStep, messages: ChatEntry[]) => {
+  const lastPlanningAwaiting = getLastPlanningAwaiting(messages)
 
   if (lastPlanningAwaiting) {
     const originalItem = messages.find((message) => message.id === lastPlanningAwaiting.id)
@@ -117,9 +111,8 @@ const updateStepMessage = (step: ChatStep, chat: ChatState) => {
 }
 
 
-const updatePlanningMessage = (chat: ChatState) => {
-  const lastPlanningAwaiting = getLastPlanningAwaiting(chat)
-  const messages = chat.getMessages()
+const updatePlanningMessage = (messages: ChatEntry[]) => {
+  const lastPlanningAwaiting = getLastPlanningAwaiting(messages)
 
   if (lastPlanningAwaiting) {
     const originalItem = messages.find((message) => message.id === lastPlanningAwaiting.id)
@@ -133,9 +126,8 @@ const updatePlanningMessage = (chat: ChatState) => {
   }
 }
 
-export function helperSendMessage(value: Partial<ChatResponseWithSteps> & { opportunities?: any },
+export function helperSendMessage(messages: ChatEntry[], value: Partial<ChatResponseWithSteps> & { opportunities?: any },
   chat: ChatState, botEntry: ChatEntry, knowledgeSources: KnowledgeSource[] | undefined) {
-  const messages = chat.getMessages()
   if (value.agent_info?.type === 'planning') {
     if (value.agent_info.action === 'start') {
       chat.set('isPlaning', true)
@@ -156,19 +148,19 @@ export function helperSendMessage(value: Partial<ChatResponseWithSteps> & { oppo
     knowledgeSources = genericSourcesToKnowledgeSources(value.sources)
   }
 
-  const lastPlanningAwaiting = getLastPlanningAwaiting(chat)
+  const lastPlanningAwaiting = getLastPlanningAwaiting(messages)
   if (lastPlanningAwaiting && value.steps) {
     value.steps?.map(step => {
       if (step.type === 'planning') {
-        updatePlanningMessage(chat)
+        updatePlanningMessage(messages)
       } else if (step.type === 'step') {
-        updateStepMessage(step, chat)
+        updateStepMessage(step, messages)
       }
     })
   }
 
   if (value.agent_info?.type === 'tool' && value.agent_info?.action !== 'awaiting_approval') {
-    updateToolStatus(value.agent_info, chat)
+    updateToolStatus(value.agent_info, messages)
   }
 
   if (value.steps) {
@@ -219,7 +211,8 @@ export async function sendMessageInterceptor(entry: ChatEntry, chat: ChatState,
   const context = buildConversationContext(chat, entry)
   chat.set('isLoading', true)
   const untitled = chat.untitled
-  const isFirstMessage = chat.getMessages().length === 1
+  const messages = chat.getMessages()
+  const isFirstMessage = messages.length === 1
   if (untitled) {
     chat.set('label', content || entry.getValue().upload?.[0]?.name || 'Chat')
     chat.untitled = false
@@ -234,13 +227,15 @@ export async function sendMessageInterceptor(entry: ChatEntry, chat: ChatState,
   }
   let knowledgeSources: KnowledgeSource[] | undefined
 
-  stream.onChange(value => helperSendMessage(value, chat, botEntry, knowledgeSources))
+  stream.onChange(value => {
+    helperSendMessage(messages, value, chat, botEntry, knowledgeSources)
+  })
 
   let finalValue: Partial<ChatResponse3> | undefined
   try {
     finalValue = await stream.getValue()
 
-    const lastPlanningAwaiting = getLastPlanningAwaiting(chat)
+    const lastPlanningAwaiting = getLastPlanningAwaiting(messages)
     if (lastPlanningAwaiting) {
       const value = lastPlanningAwaiting.getValue()
       value.content = finalValue.answer || value.content
@@ -264,7 +259,7 @@ export async function sendMessageInterceptor(entry: ChatEntry, chat: ChatState,
     }
   }
   if (finalValue?.answer) {
-    botEntry.setValue(createEntryValueFromChatResponse(finalValue, knowledgeSources, chat.get('agent'), true))
+    botEntry.setValue(createEntryValueFromChatResponse(finalValue, botEntry.getValue().knowledgeSources, chat.get('agent'), true))
     aiClient.chat.invalidate({ conversationId: chat.id })
     if (isFirstMessage) {
       // if the chat has a title and this was its first message, we need to rename it according to the title, otherwise, the backend will

package/src/components/form/DescribedRadioGroup.tsx

@@ -1,6 +1,10 @@
+import { LoadingCircular } from '@citric/ui'
 import { Icon } from '@stack-spot/citric-icons'
-import { Accordion, FieldGroup, ImageBox, Input, RadioGroup, Row, Text, useRadioGroupControls } from '@stack-spot/citric-react'
+import { Accordion, Column, FieldGroup, ImageBox, Input, RadioGroup, Row, Text, useRadioGroupControls } from '@stack-spot/citric-react'
+import { InfiniteScroll } from '@stack-spot/portal-components/InfiniteScroll'
+import { isEqual } from 'lodash'
 import { useEffect, useState } from 'react'
+import styled from 'styled-components'
 import { ButtonFavorite, Favorite } from '../ButtonFavorite'
 
 interface Props<T> {
@@ -15,15 +19,27 @@ interface Props<T> {
   emptyResults: React.ReactNode,
   emptyDataset: React.ReactNode,
   onChange?: (value: T | undefined) => void,
+  fetchNextPage?: () => void,
+  hasNextPage?: boolean,
+  filter?: string,
+  setFilter?: (value?: string) => void,
+  isLoading?: boolean,
 }
 
+const StyledDiv = styled.div`
+  &#agents-content {
+    overflow: auto;
+  }
+`
+
 /**
  * Renders a radio group where each option has a label and a description.
  * The description in placed under the label and checkbox as an accordion.
  * 
  * Also renders a search input.
  */
-export function DescribedRadioGroup<T>({ initialValue, options: opt, data, emptyDataset, emptyResults, onChange }: Props<T>) {
+export function DescribedRadioGroup<T>({ initialValue, options: opt, data, emptyDataset, emptyResults, onChange,
+  fetchNextPage, hasNextPage, filter, setFilter, isLoading }: Props<T>) {
   const [options, setOptions] = useState(opt)
   const controls = useRadioGroupControls({
     initialValue,
@@ -37,48 +53,85 @@ export function DescribedRadioGroup<T>({ initialValue, options: opt, data, empty
     if (controls.value === undefined && initialValue !== undefined) controls.setValue(initialValue)
   }, [initialValue])
 
-  return options.length ? <>
+  useEffect(() => {
+    if (!isEqual(opt, options)) {
+      setOptions(opt)
+    }
+  }, [opt])
+
+  return (options?.length || isLoading || !!filter) ? <>
     <FieldGroup fullWidth>
       <Icon icon="Search" />
-      <Input type="search" value={controls.filter} onChange={controls.setFilter} />
+      <Input type="search" value={setFilter ? filter : controls.filter} onChange={setFilter ? setFilter : controls.setFilter} />
     </FieldGroup>
-    {controls.options.length ? <RadioGroup
-      options={controls.options}
-      value={controls.value}
-      onChange={controls.setValue}
-      renderKey={controls.renderKey}
-      className="option-list"
-      renderItem={(radio, o) => {
-        const { description, idOrSlug, name, image, listFavorites, onAddFavorite, onRemoveFavorite } = data(o)
-        return (
-          <Row className={controls.isUnfilteredButChecked(o) ? 'filtered-out' : ''}>
-            <Accordion
-              header={btn => <>
-                {radio}
-                {image && <ImageBox size="xs" style={{ fontSize: '16px' }}>{image}</ImageBox>}
-                <Text>{name}</Text>{btn}</>
+    {isLoading ? 
+      <Column h="100%" alignItems="center" justifyContent="center">
+        <LoadingCircular/> 
+      </Column> : 
+      <StyledDiv id="agents-content">
+        {controls.options.length ?
+          <InfiniteScroll scrollableTarget="agents-content"
+            dataLength={controls.options.length}
+            next={fetchNextPage as any ?? undefined}
+            hasMore={hasNextPage ?? false}>
+            <RadioGroup
+              options={controls.options}
+              value={controls.value}
+              onChange={controls.setValue}
+              renderKey={controls.renderKey}
+              className="option-list"
+              renderItem={(radio, o) => {
+                const item = data(o)
+                const { idOrSlug, listFavorites, onAddFavorite, onRemoveFavorite } = item
+                return (
+                  <Row className={controls.isUnfilteredButChecked(o) ? 'filtered-out' : ''}>
+                    <ItemContent item={item} radio={radio} />
+                    {onAddFavorite && <ButtonFavorite favorite={{
+                      idOrSlug: idOrSlug,
+                      listFavorites,
+                      onAddFavorite: async (...args) => {
+                        const res = await onAddFavorite(...args)
+                        setOptions([...options]) // forces options re-rendering
+                        return res
+                      },
+                      onRemoveFavorite: async (...args) => {
+                        const res = await onRemoveFavorite?.(...args)
+                        setOptions([...options]) // forces options re-rendering
+                        return res ?? false
+                      },
+                    }} />}
+                  </Row>
+                )}
               }
-              appearance="card"
-            >
-              {typeof description === 'string' ? <Text appearance="microtext1" color="light.700">{description}</Text> : description}
-            </Accordion>
-            {onAddFavorite && <ButtonFavorite favorite={{
-              idOrSlug: idOrSlug,
-              listFavorites,
-              onAddFavorite: async (...args) => {
-                const res = await onAddFavorite(...args)
-                setOptions([...options]) // forces options re-rendering
-                return res
-              },
-              onRemoveFavorite: async (...args) => {
-                const res = await onRemoveFavorite?.(...args)
-                setOptions([...options]) // forces options re-rendering
-                return res ?? false
-              },
-            }} />}
-          </Row>
-        )
-      }}
-    /> : emptyResults}
+            />
+          </InfiniteScroll> 
+          : emptyResults}
+      </StyledDiv> }
+    
   </> : emptyDataset
 }
+
+interface ItemContentProps {
+  radio: React.ReactElement,
+  item: { name: string, description: React.ReactNode, image?: React.ReactElement } & Favorite<any>,
+}
+
+const ItemContent = ({ item, radio }: ItemContentProps) => {
+  const [expanded, setExpanded] = useState(false)
+  const { description, name, image } = item
+
+  return <Accordion
+    header={btn => <>
+      {radio}
+      {image && <ImageBox size="xs" style={{ fontSize: '16px' }}>{image}</ImageBox>}
+      <Text>{name}</Text>{btn}</>
+    }
+    expanded={expanded}
+    onChange={setExpanded}
+    appearance="card"
+  >
+    {expanded && <>
+      {typeof description === 'string' ? <Text appearance="microtext1" color="light.700">{description}</Text> : description}
+    </>}
+  </Accordion>
+}

package/src/index.ts

@@ -21,4 +21,3 @@ export type { ButtonAction } from './types'
 export { defaultLanguage, languages } from './utils/programming-languages'
 export type { CustomRenderResult } from './views/Chat/ChatMessage'
 export { loadChat } from './views/ChatHistory/utils'
-

package/src/views/Agents/AgentsTab.tsx

@@ -3,7 +3,8 @@ import { Button } 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'
-import { useMemo, useState } from 'react'
+import { debounce } from 'lodash'
+import { useCallback, useMemo, useState, useTransition } from 'react'
 import { NavigationComponent } from '../../components/ComponentNavigator'
 import { DescribedRadioGroup } from '../../components/form/DescribedRadioGroup'
 import { WorkspaceTabNavigator } from '../../components/WorkspaceTabNavigator'
@@ -29,16 +30,41 @@ 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 [filter, setFilter] = useState<string | undefined>()
+  const [apiFilter, setApiFilter] = useState<string | undefined>()
+  const [isPending, startTransition] = useTransition()
+
+  const runOnChange = useCallback(
+    debounce((value?: string) => {
+      startTransition(() => {
+        setApiFilter(value)
+      })
+    }, 500),
+    [startTransition],
+  )
+
+  const data = workspaceAiClient.getAgentFromWorkspaceAi.useStatefulQuery({ workspaceId: workspaceId! },
+    { enabled: !!workspaceId })
+  const workspaceAgents = data?.[0] as AgentResponseWithBuiltIn[]
+  
+  const [agentsData=[], { fetchNextPage, hasNextPage }] = agentToolsClient.agentsMultipleFilters.useInfiniteQuery({
+    filters: { 
+      page: 1,
+      size: 20,
+      name: apiFilter,
+      ...(visibility?.length ? { visibility_list: [visibility] } : {}),
+    },
+  }, { enabled: !workspaceId })
+
+  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,36 +75,42 @@ 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 && !workspaceId}
+        options={agents}
+        initialValue={initialValue}
+        filter={workspaceId ? undefined : filter}
+        setFilter={workspaceId ? undefined : (value?: string) => {
+          setFilter(value)
+          runOnChange(value)
+        }}
+        onChange={(ag) => {
+          agent.current = ag
+            ? { ...ag, label: ag.name, image: ag.avatar!, slug: ag.slug, builtIn: ag.visibility_level === 'built_in' }
+            : undefined
+          setSubmitEnabled(true)
+        }}
+        isLoading={isPending}
+        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>}
+  </>
 }
 
 export function AgentsTabWorkspace({ agent, visibility, showSubmitButton }: AgentTabProps) {

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>
@@ -231,7 +231,7 @@ export const ToolStepsList = ({ toolStep, messageId, chatId }: { toolStep: ToolC
 
 export const StepsList = ({ steps, messageId, chatId, userHasAlreadyAnswered }: Props) => {
   const t = useTranslate(dictionary)
-
+  
   const filteredSteps = steps.filter(s => s.type === 'step')
   const actualSteps = useMemo(() => filteredSteps.filter((item) => {
     const messageIdForStep = planningToolDictionaryHelper.getMessageIdFromStepId(item.id)
@@ -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} />}
+        {planning?.[0]?.status === 'success' && <ViewToolsDetails chatId={chatId} messageId={messageId}/>}
 
       </div>
     </AnimatedHeight> : null}
@@ -316,14 +316,16 @@ 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 messageEntry = messages.find((message) => message.id === messageId)
+    const messageStep = messageEntry?.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 })