@stack-spot/ai-chat-widget 1.37.0-beta.1 → 2.0.0-betacitric.1

package/src/views/MessageInput/SelectContent.tsx

@@ -1,122 +1,93 @@
-import { Agent, DocumentUpload, KnowledgeSource, Plus, QuickCommand, Spaces, Stack } from '@citric/icons'
-import { IconButton } from '@citric/ui'
-import { SelectionList } from '@stack-spot/portal-components/SelectionList'
-import { useMemo, useState } from 'react'
+import { Icon } from '@stack-spot/citric-icons'
+import { IconButton, ImageButton, MenuAction, MenuOverlay, MenuSection } from '@stack-spot/citric-react'
+import { useMemo } from 'react'
 import { useCurrentChat, useCurrentChatState, useWidget } from '../../context/hooks'
 import { useUploadManager } from '../../utils/upload/context'
 import { useMessageInputDictionary } from './dictionary'
 
-type ChatFeatures = 'workspace' | 'knowledgeSource' | 'stack'
-type ChatPanel = 'ks' | 'workspace' | 'stack'
-
 export const SelectContent = () => {
   const widget = useWidget()
-  const [visibleMenu, setVisibleMenu] = useState(false)
   const features = useCurrentChatState('features')
   const t = useMessageInputDictionary()
   const uploadManager = useUploadManager()
   const hasFeatureButtons = features.workspace || features.knowledgeSource || features.stack || features.upload
   const chat = useCurrentChat()
 
-  const itemConfigs = [
+  const itemConfigs = useMemo<(MenuAction & { key: keyof typeof features, section: 0 | 1 })[]>(() => ([
     {
-      role: 'button',
       key: 'agent',
+      section: 0,
       label: t.chatAgent,
-      icon: <Agent />,
+      icon: <Icon icon="Agent" />,
       onClick: (event?: React.MouseEvent) => {
         event?.stopPropagation()
         chat.set('nextMessage', '@')
       },
     },
     {
-      role: 'button',
       key: 'quickCommands',
+      section: 0,
       label: 'Quick Commands',
-      icon: <QuickCommand />,
+      icon: <Icon icon="QuickCommand" />,
       onClick: (event?: React.MouseEvent) => {
         event?.stopPropagation()
         chat.set('nextMessage', '/')
       },
     },
     {
-      role: 'button',
       key: 'knowledgeSource',
+      section: 0,
       label: 'Knowledge Sources',
-      icon: <KnowledgeSource />,
-      panel: 'ks',
+      icon: <Icon icon="KnowledgeSource" />,
+      onClick: () => widget.set('panel', 'ks'),
     },
     {
-      role: 'button',
       key: 'stack',
+      section: 0,
       label: 'Stacks AI',
-      icon: <Stack />,
-      panel: 'stack',
+      icon: <Icon icon="Stack" />,
+      onClick: () => widget.set('panel', 'stack'),
     },
     {
-      role: 'button',
       key: 'workspace',
+      section: 0,
       label: 'Spots',
-      icon: <Spaces />,
-      panel: 'workspace',
+      icon: <Icon icon="Spaces" />,
+      onClick: () => widget.set('panel', 'workspace'),
     },
     {
-      role: 'button',
       key: 'upload',
+      section: 1,
       label: t.upload,
       onClick: () => uploadManager.open(),
       className: 'upload-item',
-      icon: <DocumentUpload />,
+      icon: <Icon icon="DocumentUpload" />,
     },
-  ]
+  ] as const).filter(({ key }) => features[key]), [features, widget])
 
-  const listItems = useMemo(() =>
-    itemConfigs.filter(chatFeatures => features[chatFeatures.key as ChatFeatures])
-      .map(chatFeatures => ({
-        label: chatFeatures.label,
-        icon: chatFeatures.icon,
-        className: chatFeatures.className,
-        onClick: chatFeatures.panel ? (() => {
-          widget.set('panel', chatFeatures.panel as ChatPanel)
-          setVisibleMenu(false)
-        }) : chatFeatures.onClick,
-        role: chatFeatures.role,
-      })), [features, widget])
+  const listItems = useMemo(() => {
+    const sections: [MenuSection, MenuSection] = [
+      { type: 'section', children: [] },
+      { type: 'section', children: [] },
+    ]
+    itemConfigs.forEach(item => sections[item.section].children.push(item))
+    return sections.filter(s => !!s.children.length)
+  }, [itemConfigs])
 
   if (!hasFeatureButtons) return null
 
-  return listItems.length > 1 ? (
-    <>
-      <IconButton
-        id="button-content-select"
-        color="light"
-        appearance="square"
-        title={t.chatViewMenu}
-        data-test-hint="button-options"
-        aria-label={t.chatViewMenu}
-        aria-controls="chatMessageMenu"
-        aria-expanded={visibleMenu} 
-        onClick={() => setVisibleMenu(state => !state)}>
-        <Plus />
-      </IconButton>
-      <SelectionList
-        className="message-menu"
-        id="chatMessageMenu"
-        visible={visibleMenu}
-        onHide={() => setVisibleMenu(false)}
-        items={listItems}
-        aria-label={t.chatViewMenu}
-      />
-    </>
+  return itemConfigs.length > 1 ? (
+    <MenuOverlay items={listItems} position="top" bgLevel={500} spaced roundedItems>
+      <IconButton icon="Plus" />
+    </MenuOverlay>
   ) : (
-    <IconButton
-      color="light"
+    <ImageButton
       appearance="square"
-      role="button"
-      title={listItems[0].label}
-      aria-label={listItems[0].label}
-      onClick={listItems[0].onClick}>
-      {listItems[0].icon}
-    </IconButton>
+      title={`${itemConfigs[0].label}`}
+      aria-label={`${itemConfigs[0].label}`}
+      onClick={itemConfigs[0].onClick}
+    >
+      {itemConfigs[0].icon}
+    </ImageButton>
   )
 }

package/src/views/MessageInput/UploadBar.tsx

@@ -1,6 +1,6 @@
 import { listToClass } from '@stack-spot/portal-theme'
 import { interpolate } from '@stack-spot/portal-translate'
-import { useEffect, useMemo, useRef, useState } from 'react'
+import { useMemo } from 'react'
 import { FadingOverflow } from '../../components/FadingOverflow'
 import { FileDescription } from '../../components/FileDescription'
 import { useCurrentChat } from '../../context/hooks'
@@ -22,7 +22,6 @@ const UploadItem = ({ upload }: UploadedFileProps) => {
   const uploadManager = useUploadManager()
   const icon = upload.file.type.toLowerCase().startsWith('image/') ? createImageFromFile(upload.file) : undefined
   const status = useUploadStatus(upload)
-
   return <FileDescription
     fileName={upload.file.name}
     icon={icon}
@@ -38,29 +37,6 @@ export const UploadBar = () => {
   const t = useMessageInputDictionary()
   const chat = useCurrentChat()
   const visible = !!uploads.length
-  const [ariaMessage, setAriaMessage] = useState('')
-  const prevUploadsRef = useRef<FileUpload[]>([])
-  const announcedUploadsRef = useRef(new Set())
-
-  useEffect(() => {
-    const prevUploads = prevUploadsRef.current
-    const newUploads = uploads.filter(
-      up => !prevUploads.some(prev => prev.id === up.id),
-    )
-    newUploads.forEach((up) => {
-      if (!announcedUploadsRef.current.has(up.id)) {
-        setAriaMessage('') 
-        setTimeout(() => {
-          setAriaMessage(`${t.uploadSuccessStatus}: ${up.file.name}`)
-          setTimeout(() => setAriaMessage(''), 2500) 
-        }, 100) 
-        announcedUploadsRef.current.add(up.id)
-      }
-    })
-    if (uploads.some(up => up.status === 'error')) {
-      setTimeout(() => setAriaMessage(''), 2000)
-    }
-  }, [uploads])
 
   useUploadErrorEffect((errors) => {
     const sizeErrors = errors.filter(e => e instanceof FileIsTooLarge)
@@ -77,25 +53,11 @@ export const UploadBar = () => {
       lines.push(`${interpolate(t.uploadItemLimitError, maxItems)}\n- ${maxItemsErrorsNames.join('\n- ')}`)
     }
     if (!lines.length) return
-    setAriaMessage(lines.join(' '))
-    setTimeout(() => setAriaMessage(''), 2000)
     chat.pushMessage(new ChatEntry({ agentType: 'system', type: 'md', content: lines.join('\n\n') }))
-
-    if (lines.length) {
-      setAriaMessage(lines.join(' '))
-      setTimeout(() => setAriaMessage(''), 2000)
-      chat.pushMessage(new ChatEntry({ agentType: 'system', type: 'md', content: lines.join('\n\n') }))
-    }
   })
-  
+
   return (
     <div className={listToClass(['info-bar', 'upload-bar', visible && 'visible'])}>
-      <div className="aria-live"
-        aria-live="polite"
-        aria-atomic="true"
-      >
-        {ariaMessage}
-      </div>
       <div className="space"></div>
       <div className="content">
         <FadingOverflow className="list-overflow" scroll="arrows" enableHorizontalScrollWithVerticalWheel>

package/src/views/MessageInput/UploadDragNDrop.tsx

@@ -1,5 +1,4 @@
-import { IconBox } from '@citric/core'
-import { Document } from '@citric/icons'
+import { Icon } from '@stack-spot/citric-icons'
 import { DragEvent, useCallback, useEffect, useState } from 'react'
 import { useCurrentChat } from '../../context/hooks'
 import { useMessageInputDictionary } from './dictionary'
@@ -72,9 +71,7 @@ export const UploadDragNDrop = ({ isDragging, onDrop, onDragLeave }: UploadDragN
         e.stopPropagation()
       }}
     >
-      <IconBox size="lg" aria-hidden={true}>
-        <Document />
-      </IconBox>
+      <Icon icon="Document" size="lg" aria-hidden={true} />
       <h2 id="upload-drag-drop-title">{t.uploadDragDropTitle}</h2>
       <p id="upload-drag-drop-description">{t.uploadDragDropDescription}</p>
     </div>

package/src/views/MessageInput/dictionary.ts

@@ -33,8 +33,6 @@ const dictionary = {
     cantSendBecauseOfEmptyContent: 'You can\'t send empty messages. Please write some text or upload a file.',
     cantSendBecausePromptMaxLength: 'You can\'t send messages longer than $0 characters. Please, shorten your message.',
     chatAgent: 'Agents',
-    uploadSuccessStatus: 'File sent successfully',
-    chatViewMenu: 'Chat options menu',
   },
   pt: {
     stack: 'Selecionar stack',
@@ -68,8 +66,6 @@ const dictionary = {
     cantSendBecauseOfEmptyContent: 'Não é possível enviar mensagens vazias. Por favor, escreva algum texto ou envie um arquivo.',
     cantSendBecausePromptMaxLength: 'Você não pode enviar mensagens com mais de $0 caracteres. Por favor, reduza sua mensagem.',
     chatAgent: 'Agentes',
-    uploadSuccessStatus: 'Arquivo anexado com sucesso',
-    chatViewMenu: 'Menu de opções do chat',
   },
 } satisfies Dictionary
 

package/src/views/MessageInput/index.tsx

@@ -1,8 +1,7 @@
-import { listToClass, theme } from '@stack-spot/portal-theme'
+import { ProgressBar } from '@stack-spot/citric-react'
 import { interpolate } from '@stack-spot/portal-translate'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { AdaptiveTextArea } from '../../components/AdaptiveTextArea'
-import { ProgressBar } from '../../components/ProgressBar'
 import { useCurrentChat, useCurrentChatState, useWidgetState } from '../../context/hooks'
 import { quickCommandRegex } from '../../regex'
 import { ChatEntry } from '../../state/ChatEntry'
@@ -137,11 +136,11 @@ export const MessageInput = ({ chatWindowRef }: { chatWindowRef?: React.RefObjec
 
   return (
     <UploadProvider value={chat.uploadManager}>
-      <MessageInputBox aria-busy={isLoading} className="message-input" $inputFocused={focused}>
+      <MessageInputBox aria-busy={isLoading} className="message-input">
         <div className="wrapper-action">
           <QuickCommandSelector inputRef={textAreaRef} isTrial={isTrial} />
           <AgentSelector inputRef={textAreaRef} isTrial={isTrial} />
-          <div className={listToClass(['action-box', focused && 'focused', isLoading && 'disabled'])}>
+          <div className="action-box">
             <ButtonAgent />
             <AdaptiveTextArea
               maxHeight={() => isMinimized
@@ -154,7 +153,7 @@ export const MessageInput = ({ chatWindowRef }: { chatWindowRef?: React.RefObjec
                   ? interpolate(t.placeholder, agentLabel)
                   : t.typing
               }
-              onChange={e => chat.set('nextMessage', e.target.value)}
+              onChange={v => chat.set('nextMessage', v)}
               value={value}
               onFocus={() => setFocused(true)}
               onBlur={() => setFocused(false)}
@@ -165,8 +164,7 @@ export const MessageInput = ({ chatWindowRef }: { chatWindowRef?: React.RefObjec
             />
           </div>
         </div>
-        <ProgressBar visible={true} animate={isLoading} 
-          backgroundColor={isLoading || !focused ? theme.color.light[500] : theme.color.primary[500]} />
+        <ProgressBar progress={isLoading ? undefined : (focused ? 100 : 0)} speed="fast" />
         <ContextBar />
         {chat.get('features').upload && <UploadBar />}
         <ButtonBar onSend={onSend} isLoading={isLoading} />

package/src/views/MessageInput/styled.ts

@@ -1,4 +1,3 @@
-import { IconButton } from '@citric/ui'
 import { theme } from '@stack-spot/portal-theme'
 import { styled } from 'styled-components'
 
@@ -51,7 +50,7 @@ export const SelectionBarWrapper = styled.div`
   }
 `
 
-export const MessageInputBox = styled.div<{$inputFocused?: boolean}>`
+export const MessageInputBox = styled.div`
   display: flex;
   flex-direction: column;
 
@@ -65,18 +64,6 @@ export const MessageInputBox = styled.div<{$inputFocused?: boolean}>`
       }
     }
 
-    > .aria-live {
-       position: absolute;
-          width: 1;
-          height: 1;
-          margin: -1;
-          padding: 0;
-          overflow: hidden;
-          clip: rect(0 0 0 0);
-          white-Space: nowrap;
-          border: 0;
-    }
-
     > .space {
       height: 0;
       transition: height 0.4s;
@@ -127,7 +114,7 @@ export const MessageInputBox = styled.div<{$inputFocused?: boolean}>`
       line-height: 0.75rem;
       white-space: nowrap;
 
-      ${IconButton} {
+      /* $ {IconButton} {
         padding: 4px 0;
         background: none;
         border: none;
@@ -138,7 +125,7 @@ export const MessageInputBox = styled.div<{$inputFocused?: boolean}>`
           width: auto;
           height: 12px;
         }
-      }
+      } */
     }
   }
 
@@ -175,18 +162,15 @@ export const MessageInputBox = styled.div<{$inputFocused?: boolean}>`
       background-color: ${theme.color.light[300]};
       padding: 10px 8px;
       transition: border-color 0.3s, background-color 0.3s;
-
-      &.focused {
-        border: 2px solid ${theme.color.light[300]};
-      }
-
-      
-      &.disabled {
-        background-color: ${theme.color.light[300]};
-      }
     }
   }
 
+  [data-citric="progress-bar"] {
+    background-color: ${theme.color.light[500]};
+    border: 0;
+    padding: 0;
+  }
+
   .button-group {
     display: flex;
     flex-direction: row;
@@ -239,10 +223,10 @@ export const MessageInputBox = styled.div<{$inputFocused?: boolean}>`
       }
     }
 
-    ${IconButton} {
+    /* $ {IconButton} {
       width: 24px;
       height: 24px;
-    }
+    } */
 
     .group-agent {
       display: flex;
@@ -302,7 +286,7 @@ export const MessageInputBox = styled.div<{$inputFocused?: boolean}>`
     transition: height 0.3s;
     background-color: transparent;
     &:focus {
-      box-shadow: none;
+      box-shadow: none !important;
     }
   }
 `

package/src/views/MinimizedHeader.tsx

@@ -1,6 +1,4 @@
-import { Text } from '@citric/core'
-import { ChevronDown, Times } from '@citric/icons'
-import { IconButton } from '@citric/ui'
+import { IconButton, Text } from '@stack-spot/citric-react'
 import { listToClass } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { useCallback, useRef, useState } from 'react'
@@ -69,14 +67,13 @@ export const MinimizedHeader = ({ onClose, onCollapse, onExpand }: MinimizedActi
       <FadingOverflow className="title"><Text title={label}>{label}</Text></FadingOverflow>
       {showButtons && <div className="button-group">
         {(onExpand || onCollapse) && <IconButton
+          icon="ChevronDown"
           title={collapsed ? t.expand : t.collapse}
           aria-label={collapsed ? t.expand : t.collapse}
           className={listToClass(['collapse', collapsed && 'collapsed'])}
           onClick={toggleCollapsed}
-        >
-          <ChevronDown />
-        </IconButton>}
-        {onClose && <IconButton title={t.close} aria-label={t.close} onClick={onClose}><Times /></IconButton>}
+        />}
+        {onClose && <IconButton icon="Times" title={t.close} aria-label={t.close} onClick={onClose} />}
       </div>}
     </Header>
   )

package/src/views/Stacks.tsx

@@ -1,15 +1,12 @@
-import { Button } from '@citric/core'
-import { Search } from '@citric/icons'
+import { Button, Tab } from '@stack-spot/citric-react'
 import { Placeholder } from '@stack-spot/portal-components/Placeholder'
 import { aiClient, workspaceAiClient } from '@stack-spot/portal-network'
-import { GetAiStackResponse, VisibilityLevelEnum } from '@stack-spot/portal-network/api/ai'
+import { VisibilityLevelEnum } from '@stack-spot/portal-network/api/ai'
 import { WorkspaceResponse } from '@stack-spot/portal-network/api/workspace-ai'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
-import { ReactElement, useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { ButtonFavorite } from '../components/ButtonFavorite'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { NavigationComponent } from '../components/ComponentNavigator'
 import { DescribedRadioGroup } from '../components/form/DescribedRadioGroup'
-import { IconInput } from '../components/IconInput'
 import { RightPanelContentList } from '../components/RightPanelContentList'
 import { RightPanelTabs } from '../components/RightPanelTabs'
 import { WorkspaceTabNavigator } from '../components/WorkspaceTabNavigator'
@@ -19,8 +16,6 @@ import { useRightPanel } from '../right-panel/hooks'
 import { ChatProperties } from '../state/ChatState'
 import { checkIsTrial } from '../utils/check-is-trial'
 
-type TabElement = { title: string, content: ReactElement }
-
 /**
  * Renders the Stack selection form in the Right Panel if this is the panel that is currently opened.
  */
@@ -54,12 +49,12 @@ const StacksPanel =  () => {
     stack.current = chat.get('stack')
   }, [chat])
 
-  const allTabsMap: Partial<Record<Scope, TabElement>> = {
-    favorite: { title: t.favorites, content: <StacksTab key="favorites" visibility="favorite" stack={stack} /> },
-    personal: { title: t.personal, content: <StacksTab key="personal" visibility="personal" stack={stack} /> },
-    shared: { title: t.shared, content: <StacksTab key="shared" visibility="shared" stack={stack} /> },
-    workspace: { title: t.spots, content: <StacksTabWorkspace key="workspace" visibility="workspace" stack={stack} /> },
-    account: { title: t.account, content: <StacksTab key="account" visibility="account" stack={stack} /> },
+  const allTabsMap: Partial<Record<Scope, Omit<Tab, 'key'>>> = {
+    favorite: { label: t.favorites, content: <StacksTab key="favorites" visibility="favorite" stack={stack} /> },
+    personal: { label: t.personal, content: <StacksTab key="personal" visibility="personal" stack={stack} /> },
+    shared: { label: t.shared, content: <StacksTab key="shared" visibility="shared" stack={stack} /> },
+    workspace: { label: t.spots, content: <StacksTabWorkspace key="workspace" visibility="workspace" stack={stack} /> },
+    account: { label: t.account, content: <StacksTab key="account" visibility="account" stack={stack} /> },
   }
   const defaultScopes: Scope[] = ['favorite', 'personal', 'shared', 'workspace', 'account']
 
@@ -70,8 +65,8 @@ const StacksPanel =  () => {
     : rawScopes
 
   const tabs = scopesToRender
-    .map(scope => allTabsMap[scope])
-    .filter(Boolean) as TabElement[]
+    .map(scope => scope in allTabsMap ? { key: scope, ...allTabsMap[scope] } : undefined)
+    .filter(Boolean) as Tab[]
 
   return (isGroupResourcesByScope ? (
     <RightPanelTabs key={chat.id} tabs={tabs} />
@@ -91,11 +86,10 @@ export const StacksTab = ({ visibility, workspaceId, stack, showSubmitButton = t
   const t = useTranslate(dictionary)
   const { close } = useRightPanel()
   const chat = useCurrentChat()
-  const [filter, setFilter] = useState('')
-
   const listFavorites = aiClient.aiStacks.useQuery({ visibility: 'favorite' })
   const [addFavorite, pendingAddFav] = aiClient.addFavoriteStackAi.useMutation()
   const [removeFavorite, pendingRemoveFav] = aiClient.removeFavoriteStackAi.useMutation()
+  const [submitEnabled, setSubmitEnabled] = useState(false)
 
   const removeFavoriteStack = async (idOrSlug: string) => {
     try {
@@ -146,57 +140,40 @@ export const StacksTab = ({ visibility, workspaceId, stack, showSubmitButton = t
       reject(error)
     } 
   })
-  
- 
 
   const stacks = workspaceId
     ? workspaceAiClient.getStackFromWorkspaceAi.useQuery({ workspaceId })
     //@ts-ignore
     : aiClient.aiStacks.useQuery({ visibility, order: 'a-to-z' })
 
-  const currentStackId = stack.current ? stack.current.id : chat.get('stack')?.id
-  const [value, setValue] = useState<GetAiStackResponse | undefined>(stacks.find(s => s.id === currentStackId))
-  const filtered = useMemo(() => filter ? 
-    // Recreate the list so that the favorites list is taken into account
-    stacks.filter(s => s === value || s.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase())) : [...stacks],
-  [stacks, listFavorites, filter, value], 
-  )
+  const initialValue = useMemo(() => {
+    const currentStackId = stack.current ? stack.current.id : chat.get('stack')?.id
+    const initial = stacks.find(s => s.id === currentStackId)
+    if (initial) setSubmitEnabled(true)
+    return initial
+  }, [stacks])
 
   function submit() {
-    if (value) chat.set('stack', { id: value.id, label: value.name })
+    if (stack.current) chat.set('stack', stack.current)
     close()
   }
 
-  const onChange = useCallback((newValue: GetAiStackResponse) => {
-    setValue(newValue)
-    stack.current = { ...newValue, label: newValue.name }
-  }, [])
-
   return (
     <>
       <div className="content">
-        <IconInput icon={<Search />} value={filter} onChange={setFilter} className="search" />
-        {!!filtered.length && <DescribedRadioGroup
-          options={filtered}
-          renderAfterElement={({ id }) => 
-            <ButtonFavorite favorite={{ idOrSlug:id, listFavorites, onAddFavorite, onRemoveFavorite }} />
-          }
-          keygen={s => s.id}
-          value={value}
-          onChange={onChange}
-          renderLabel={s => s.name}
-          renderDescription={s => s.use_case}
-          optionClassName={s => (s === value && filter && !s.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase()))
-            ? 'filtered-out'
-            : ''
-          }
-          className="option-list"
-        />}
-        {!!stacks.length && !filtered.length &&
-          <Placeholder title={t.noSearchResults} description={t.noSearchResultsDescription} className="no-data-placeholder"/>}
-        {!stacks.length && <Placeholder title={t.noData} description={t.noDataDescription} />}
+        <DescribedRadioGroup
+          options={stacks}
+          initialValue={initialValue}
+          data={s => ({ idOrSlug: s.id, description: s.use_case, name: s.name, listFavorites, onAddFavorite, onRemoveFavorite })}
+          emptyResults={<Placeholder title={t.noSearchResults} description={t.noSearchResultsDescription} className="no-data-placeholder"/>}
+          emptyDataset={<Placeholder title={t.noData} description={t.noDataDescription} />}
+          onChange={(s) => {
+            stack.current = s ? { ...s, label: s.name } : undefined
+            setSubmitEnabled(true)
+          }}
+        />
       </div>
-      {!!filtered.length && showSubmitButton && <Button onClick={submit} disabled={!value}>{t.apply}</Button>}
+      {!!stacks.length && showSubmitButton && <Button onClick={submit} disabled={!submitEnabled}>{t.apply}</Button>}
     </>
   )
 }

package/src/views/Steps/FlowChart/NodeStep.tsx

@@ -1,5 +1,5 @@
-import { IconBox, Text } from '@citric/core'
-import { Cog } from '@citric/icons'
+import { Icon } from '@stack-spot/citric-icons'
+import { Text } from '@stack-spot/citric-react'
 import { listToClass } from '@stack-spot/portal-theme'
 import { StackedBadge } from '../../../components/StackedBadge'
 import { useStepsDictionary } from '../dictionary'
@@ -24,7 +24,7 @@ export const NodeStep = ({ data: { step, index, nextStatus, onClick } }: Props)
       aria-label={getTitle(t, step, index)}
     >
       <header>
-        <IconBox>{getTypeIcon(step.type)}</IconBox>
+        <Icon {...getTypeIcon(step.type)} />
         <Text className="step-index">{getTitle(t, step, index)}</Text>
         {getStatusIcon(step.status)}
       </header>
@@ -36,7 +36,9 @@ export const NodeStep = ({ data: { step, index, nextStatus, onClick } }: Props)
         </Text>
         {!!step.attempts[0].tools?.length && <StackedBadge
           label={t.tools}
-          images={step.attempts[0].tools?.slice(0, 3).map(tool => ({ key: tool.id, name: tool.name, url: tool.image, icon: <Cog /> }))}
+          images={step.attempts[0].tools?.slice(0, 3).map(
+            tool => ({ key: tool.id, name: tool.name, url: tool.image, icon: <Icon icon="Cog" /> }),
+          )}
         />}
       </div>}
       <HandleGroup renderSource={step.type !== 'answer'} renderTarget={step.type !== 'planning'} />