@stack-spot/ai-chat-widget 1.36.0 → 1.36.1-betacitric.1

package/src/app-metadata.json

@@ -1,7 +1,7 @@
 {
   "name": "@stack-spot/ai-chat-widget",
-  "version": "1.36.0",
-  "date": "Wed Aug 13 2025 15:33:49 GMT+0000 (Coordinated Universal Time)",
+  "version": "1.36.1-betacitric.1",
+  "date": "Thu Aug 14 2025 15:19:32 GMT-0300 (Horário Padrão de Brasília)",
   "dependencies": [
     {
       "name": "@stack-spot/app-metadata",
@@ -87,18 +87,6 @@
       "name": "typescript",
       "version": "5.6.2"
     },
-    {
-      "name": "@citric/core",
-      "version": "6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0))"
-    },
-    {
-      "name": "@citric/icons",
-      "version": "5.13.0(react@18.2.0)"
-    },
-    {
-      "name": "@citric/ui",
-      "version": "6.10.2(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@citric/icons@5.13.0(react@18.2.0))(lodash@4.17.21)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0))"
-    },
     {
       "name": "@dagrejs/dagre",
       "version": "1.1.4"
@@ -107,17 +95,25 @@
       "name": "@monaco-editor/react",
       "version": "4.6.0(monaco-editor@0.52.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)"
     },
+    {
+      "name": "@stack-spot/citric-icons",
+      "version": "0.2.1"
+    },
+    {
+      "name": "@stack-spot/citric-react",
+      "version": "0.20.5(@stack-spot/citric-icons@0.2.1)(@stack-spot/portal-theme@1.2.1(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@stack-spot/portal-translate@1.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(lodash@4.17.21)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)"
+    },
     {
       "name": "@stack-spot/portal-components",
-      "version": "2.22.1(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@citric/icons@5.13.0(react@18.2.0))(@citric/ui@6.10.2(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@citric/icons@5.13.0(react@18.2.0))(lodash@4.17.21)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@stack-spot/portal-theme@1.1.0(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@stack-spot/portal-translate@1.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@types/react@18.3.11)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)"
+      "version": "2.24.3(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@citric/icons@5.13.0(react@18.2.0))(@citric/ui@6.10.2(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@citric/icons@5.13.0(react@18.2.0))(lodash@4.17.21)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@stack-spot/portal-theme@1.2.1(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@stack-spot/portal-translate@1.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@types/react@18.3.11)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)"
     },
     {
       "name": "@stack-spot/portal-network",
-      "version": "0.169.0(@stack-spot/auth@5.3.2)(@stack-spot/opa@2.5.0(@stack-spot/auth@5.3.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@stack-spot/portal-translate@1.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@tanstack/react-query@5.59.16(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)"
+      "version": "0.165.1(@stack-spot/auth@5.3.2)(@stack-spot/opa@2.5.0(@stack-spot/auth@5.3.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@stack-spot/portal-translate@1.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@tanstack/react-query@5.59.16(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)"
     },
     {
       "name": "@stack-spot/portal-theme",
-      "version": "1.1.0(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0))"
+      "version": "1.2.1(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0))"
     },
     {
       "name": "@stack-spot/portal-translate",

package/src/chat-interceptors/quick-commands.ts

@@ -74,31 +74,25 @@ export function createQuickCommandInterceptor(widget: WidgetState, getEditor: ()
    */
   async function runRouterStep(
     ctx: QCContext,
-    stepIndex: number, iteration: Record<string, number>,
+    stepIndex: number, iteration: number,
     progress: { update: (index: number) => void, remove: () => void },
   ) {
     const { qc: { slug, steps }, code, resultMap, customInputs } = ctx
     const step = steps![stepIndex]
     const inputData = Object.keys(customInputs).length > 0 && code ? { ...customInputs, [code]: code } : code ?? customInputs
     try {
-      if (step.slug in iteration) {
-        iteration[step.slug] = iteration[step.slug] + 1
-      } else {
-        iteration[step.slug] = 1
-      }
-
       const { next_step_slug } = await aiClient.calculateNextStep.mutate({
         stepSlug: step.slug,
         slug: slug,
         quickCommandEvaluateStepRouterRequest: {
-          executions_count: iteration[step.slug],
+          executions_count: iteration++,
           input_data: inputData,
           slugs_executions: resultMap,
         },
       })
 
       if (next_step_slug === step.slug) {
-        return runStepsRecursively(stepIndex, progress, ctx, iteration)
+        return runStepsRecursively(stepIndex, progress, ctx, iteration + 1)
       }
       const nextStepIndex = steps?.findIndex((step) => step.slug === next_step_slug)
       
@@ -228,7 +222,7 @@ export function createQuickCommandInterceptor(widget: WidgetState, getEditor: ()
   }
 
   async function runStepsRecursively(currentIndex: number, progress: { update: (index: number) => void, remove: () => void },
-    ctx: QCContext, iteration: Record<string, number>) {
+    ctx: QCContext, iteration: number) {
     const { qc } = ctx
     if (!qc.steps || currentIndex >= qc.steps?.length) return
     progress.update(currentIndex)
@@ -251,7 +245,7 @@ export function createQuickCommandInterceptor(widget: WidgetState, getEditor: ()
   async function runSteps(ctx: QCContext) {
     const progress = showProgressMessage(ctx)
     try {
-      await runStepsRecursively(0, progress, ctx, {})
+      await runStepsRecursively(0, progress, ctx, 0)
     } finally {
       progress.remove()
     }

package/src/components/AdaptiveTextArea.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/display-name */
-import { Textarea } from '@citric/core'
+import { Textarea } from '@stack-spot/citric-react'
 import { forwardRef, useEffect, useRef } from 'react'
 import { PropsOf } from '../types'
 

package/src/components/AgentCard/AgentCardCreate.tsx

@@ -1,5 +1,5 @@
-import { IconBox, Text } from '@citric/core'
-import { PlusMini } from '@citric/icons'
+import { Icon } from '@stack-spot/citric-icons'
+import { Text } from '@stack-spot/citric-react'
 import { theme } from '@stack-spot/portal-theme'
 import { useTranslate } from '@stack-spot/portal-translate'
 import { styled } from 'styled-components'
@@ -32,9 +32,7 @@ export const AgentCardCreate = ({ urlCreateAgent }: { urlCreateAgent: string  })
   const t = useTranslate(dictionary)
   return (
     <StyledCard href={urlCreateAgent} role="link" tabIndex={0} className={'agent-card'}>
-      <IconBox color="light" appearance="square" size="md">
-        <PlusMini />
-      </IconBox>
+      <Icon size="md" icon="PlusMini" />
       <div className="text-box">
         <Text appearance="body2">
           {`${t.create} ${t.agent}`}

package/src/components/AgentCard/index.tsx

@@ -1,5 +1,4 @@
-import { Image, Text } from '@citric/core'
-import { Card } from '@citric/ui'
+import { Card, ImageWithFallback, Text } from '@stack-spot/citric-react'
 import { listToClass, theme } from '@stack-spot/portal-theme'
 import { useTranslate } from '@stack-spot/portal-translate'
 import { styled } from 'styled-components'
@@ -16,12 +15,12 @@ const StyledCard = styled(Card)`
   flex-direction: column;
   gap: 12px;
 
-  &:hover {
-    background-color: ${theme.color.light[500]};
+  &:hover, &:focus {
+    background-color: ${theme.color.light[500]} !important;
   }
 
   &.active {
-    background-color: ${theme.color.light[600]};
+    background-color: ${theme.color.light[600]} !important;
   }
 
   img {
@@ -59,13 +58,14 @@ export const AgentCard = ({ agent }: { agent: LabeledAgent }) => {
       onClick={() => chat.set('agent', agent)} 
       role="button"
       tabIndex={0}
+      bgLevel={400}
       className={listToClass(['agent-card', currentAgent?.id === agent.id && 'active'])}
     >
-      <Image src={agent.image ? agent.image : placeholder} />
+      <ImageWithFallback src={agent.image ?? ''} fallback={<img src={placeholder} />} />
       <div className="text-box">
         {agent.visibility_level && (
           <div className="agent-type">
-            <Text appearance="microtext1" colorScheme="light.700">
+            <Text appearance="microtext1" color="light.700">
               {t[agent.visibility_level.toLowerCase() as keyof typeof t]}
             </Text>
             <Text appearance="microtext1">

package/src/components/ButtonFavorite.tsx

@@ -1,16 +1,14 @@
-import { Button, IconBox } from '@citric/core'
-import { Star, StarFill } from '@citric/icons'
-import { IconButton, LoadingCircular } from '@citric/ui'
+import { BaseFavoriteProps, Favorite } from '@stack-spot/citric-react'
 import { useTranslate } from '@stack-spot/portal-translate'
-import { MouseEvent, useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { dictionaryFavorites } from './form/dictionary'
 
-interface ItemFavorite {
+export interface ItemFavorite {
   id?: string,
   slug?: string,
 }
 
-interface Favorite<T extends ItemFavorite> {
+export interface Favorite<T extends ItemFavorite> {
   /**
    * id or slug to be used on functions
    */
@@ -34,17 +32,17 @@ interface Favorite<T extends ItemFavorite> {
 }
 
 interface Props<T extends ItemFavorite> {
-  /**
-   * Determine whether the component should be a Button or an IconButton.
-   */
-  isIconButton?: boolean,
   /**
    * An object containing favorite items and related operations.
   */
  favorite: Favorite<T>,
+ /**
+  * @default 'square'
+  */
+ appearance?: BaseFavoriteProps['appearance'],
 }
 
-export const ButtonFavorite = <T extends ItemFavorite>({ favorite, isIconButton = false }: Props<T>) => {
+export const ButtonFavorite = <T extends ItemFavorite>({ favorite, appearance = 'square' }: Props<T>) => {
   const [isFavorite, setIsFavorite] = useState(false)
   const { idOrSlug, listFavorites } = favorite || {}
 
@@ -53,12 +51,12 @@ export const ButtonFavorite = <T extends ItemFavorite>({ favorite, isIconButton
   }, [listFavorites])
 
   return (
-    <ButtonWrapper isFavorite={isFavorite} isIconButton={isIconButton} favorite={favorite} />
+    <ButtonWrapper isFavorite={isFavorite} favorite={favorite} appearance={appearance} />
   )
 }
 
-const ButtonWrapper = <T extends ItemFavorite>({ isIconButton, isFavorite, favorite }: 
-  { isIconButton?: boolean, isFavorite: boolean, favorite: Favorite<T>}) => {
+const ButtonWrapper = <T extends ItemFavorite>({ isFavorite, favorite, appearance }: 
+  { isFavorite: boolean, favorite: Favorite<T>, appearance: BaseFavoriteProps['appearance'] }) => {
   const t = useTranslate(dictionaryFavorites)
   const { idOrSlug, onAddFavorite, onRemoveFavorite } = favorite
   const [loading, setLoading] = useState(false)
@@ -69,37 +67,12 @@ const ButtonWrapper = <T extends ItemFavorite>({ isIconButton, isFavorite, favor
     setLoading(false)    
   }
 
-  const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
-    e.stopPropagation()
-    isFavorite ? handleAction(idOrSlug, onRemoveFavorite) : handleAction(idOrSlug, onAddFavorite) 
-  }
-  
-
-  if (isIconButton){
-    return (
-      <IconButton 
-        type="button"
-        disabled={ loading } 
-        aria-label={`${t[isFavorite ? 'remove' : 'become']} ${t.favorite}`}
-        title={`${t[isFavorite ? 'remove' : 'become']} ${t.favorite}`}
-        onClick={(e: MouseEvent) => handleClick(e as MouseEvent<HTMLButtonElement>)}>
-        <IconBox colorIcon={isFavorite ? 'yellow.500' : 'light'}>
-          {loading ? <LoadingCircular colorScheme="warning"/> : isFavorite ? <StarFill/> : <Star/> }
-        </IconBox>
-      </IconButton>
-    )
-  }
-  return (
-    <Button 
-      type="button"
-      colorScheme="light" 
-      disabled={ loading } 
-      aria-label={`${t[isFavorite ? 'remove' : 'become']} ${t.favorite}`}
-      title={`${t[isFavorite ? 'remove' : 'become']} ${t.favorite}`}
-      onClick={(e: MouseEvent) => handleClick(e as MouseEvent<HTMLButtonElement>)}>
-      <IconBox colorIcon={isFavorite ? 'yellow.500' : 'light'}>
-        {loading ? <LoadingCircular colorScheme="warning"/> : isFavorite ? <StarFill/> : <Star/> }
-      </IconBox>
-    </Button>
-  )
+  return <Favorite
+    loading={loading}
+    appearance={appearance}
+    aria-label={`${t[isFavorite ? 'remove' : 'become']} ${t.favorite}`}
+    title={`${t[isFavorite ? 'remove' : 'become']} ${t.favorite}`}
+    value={isFavorite}
+    onChange={checked => handleAction(idOrSlug, checked ? onAddFavorite : onRemoveFavorite)}
+  />
 }

package/src/components/Code.tsx

@@ -2,9 +2,7 @@
  * Copied from the extension's webview.
  */
 
-import { Text } from '@citric/core'
-import { AddCode, ChevronDoubleDown, Collapse, Copy, Download } from '@citric/icons'
-import { IconButton } from '@citric/ui'
+import { IconButton, Text } from '@stack-spot/citric-react'
 import { theme, useThemeKind } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { CSSProperties, useState } from 'react'
@@ -79,6 +77,12 @@ const CodeBox = styled.code`
           opacity: 1;
         }
       }
+
+      .copy-btn {
+        &:after {
+          left: -30px; // prevents scrolling in the horizontal axis.
+        }
+      }
     }
   }
 
@@ -149,14 +153,14 @@ export const Code = ({
           </div>
           <div className="action-bar" role="toolbar">
             <IconButton
+              icon="Collapse"
               aria-label={showLines ? t.hideLines : t.showLines}
               title={showLines ? t.hideLines : t.showLines}
               onClick={() => setShowLines(v => !v)}
               style={{ position: 'relative', transform: showLines ? undefined : 'rotate(180deg)', transition: 'transform 0.2s' }}
-            >
-              <Collapse />
-            </IconButton>
+            />
             <IconButton
+              icon="Download"
               aria-label={t.downloadCode}
               title={t.downloadCode}
               onClick={() => {
@@ -176,41 +180,30 @@ export const Code = ({
                   console.error(t.downloadError, e)
                 }
               }}
-            >
-              <Download />
-            </IconButton>
+            />
             <IconButton
+              icon="Copy"
               aria-label={t.copy}
               title={t.copy}
               onClick={onClickCopy}
               style={{ position: 'relative' }}
-            >
-              <Copy />
-            </IconButton>
-            {onInsertCode
-              ? (
-                <IconButton
-                  aria-label={t.insert}
-                  title={t.insert}
-                  onClick={onClickInsert}
-                  style={{ position: 'relative' }}
-                >
-                  <ChevronDoubleDown style={{ transform: 'rotate(90deg)' }} />
-                </IconButton>
-              )
-              : null}
-            {onNewFile
-              ? (
-                <IconButton
-                  aria-label={t.newFile}
-                  title={t.newFile}
-                  onClick={onClickNewFile}
-                  style={{ position: 'relative' }}
-                >
-                  <AddCode />
-                </IconButton>
-              )
-              : null}
+              feedback={t.copied}
+              className="copy-btn"
+            />
+            {onInsertCode ? <IconButton
+              icon="ChevronDoubleDown"
+              aria-label={t.insert}
+              title={t.insert}
+              onClick={onClickInsert}
+              style={{ position: 'relative', transform: 'rotate(90deg)' }}
+            /> : null}
+            {onNewFile ? <IconButton
+              icon="AddCode"
+              aria-label={t.newFile}
+              title={t.newFile}
+              onClick={onClickNewFile}
+              style={{ position: 'relative' }}
+            /> : null}
           </div>
         </div>
       )}
@@ -235,6 +228,7 @@ export const Code = ({
 const dictionary = {
   en: {
     copy: 'Copy code to the clipboard',
+    copied: 'Copied',
     insert: 'Inject code into editor',
     newFile: 'Creates a new file with this code as its content',
     hideLines: 'Hide line numbers',
@@ -244,6 +238,7 @@ const dictionary = {
   },
   pt: {
     copy: 'Copiar código para a área de transferência',
+    copied: 'Copiado',
     insert: 'Inserir código no editor',
     newFile: 'Criar um novo arquivo com este código como conteúdo',
     hideLines: 'Esconder números das linhas',

package/src/components/ComponentNavigator.tsx

@@ -1,6 +1,4 @@
-import { Flex } from '@citric/core'
-import { ArrowLeft } from '@citric/icons'
-import { IconButton } from '@citric/ui'
+import { IconButton, Row } from '@stack-spot/citric-react'
 import { createContext, useCallback, useContext, useMemo, useState } from 'react'
 
 /**
@@ -81,12 +79,10 @@ export function ComponentNavigator<T extends NavigationMap, K extends keyof T>({
   return (<NavigationContext.Provider value={navigationContext as NavigationContextType<NavigationMap>}>
     <div className={`content-navigator ${className || isFullScreen ? 'full' : ''}`} role="navigation">
       {canGoBack && (
-        <Flex alignItems="center" w={12} sx={{ gap: '4px' }}>
-          <IconButton onClick={goBack} appearance="square" className="back-button" aria-label="Back">
-            <ArrowLeft />
-          </IconButton>
+        <Row gap="12px" style={{ alignSelf: 'stretch' }}>
+          <IconButton icon="ArrowLeft" onClick={goBack} className="back-button" aria-label="Back" />
           {renderTitle?.(currentItem)}
-        </Flex>
+        </Row>
       )}
       <Component {...(currentItem.props as any)} />
     </div>

package/src/components/FadingOverflow.tsx

@@ -1,5 +1,4 @@
-import { IconBox } from '@citric/core'
-import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from '@citric/icons'
+import { Icon } from '@stack-spot/citric-icons'
 import { listToClass, theme, WithStyle } from '@stack-spot/portal-theme'
 import { debounce } from 'lodash'
 import { useEffect, useRef } from 'react'
@@ -80,7 +79,7 @@ const OverflowBox = styled.div`
     pointer-events: none;
     transition: opacity 0.3s;
 
-    ${IconBox} {
+    .citric-icon {
       background-color: ${theme.color.light[300]};
       border-radius: 50%;
       width: 16px;
@@ -253,10 +252,10 @@ export const FadingOverflow = (
   return scroll === 'arrows' ? (
     <OverflowBox {...props} className={listToClass(['scroll-arrows', className])}>
       <div className="content" ref={ref}>{children}</div>
-      <div className="scroll-to-left" aria-hidden><IconBox size="xs"><ChevronLeft /></IconBox></div>
-      <div className="scroll-to-right" aria-hidden><IconBox size="xs"><ChevronRight /></IconBox></div>
-      <div className="scroll-to-top" aria-hidden><IconBox size="xs"><ChevronUp /></IconBox></div>
-      <div className="scroll-to-bottom" aria-hidden><IconBox size="xs"><ChevronDown /></IconBox></div>
+      <div className="scroll-to-left" aria-hidden><Icon icon="ChevronLeft" size="xs" /></div>
+      <div className="scroll-to-right" aria-hidden><Icon icon="ChevronRight" size="xs" /></div>
+      <div className="scroll-to-top" aria-hidden><Icon icon="ChevronUp" size="xs" /></div>
+      <div className="scroll-to-bottom" aria-hidden><Icon icon="ChevronDown" size="xs" /></div>
     </OverflowBox>
   ) : <OverflowBox {...props} className={className} ref={ref}>{children}</OverflowBox>
 }

package/src/components/FileDescription.tsx

@@ -1,6 +1,5 @@
-import { IconBox, Text } from '@citric/core'
-import { Document, Sync, TimesMini } from '@citric/icons'
-import { IconButton, LoadingCircular } from '@citric/ui'
+import { Icon } from '@stack-spot/citric-icons'
+import { IconButton, ProgressCircular, Text } from '@stack-spot/citric-react'
 import { theme } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { styled } from 'styled-components'
@@ -79,21 +78,26 @@ export const FileDescription = ({ fileName, icon, status, onRemove, onRetry }: F
   return (
     <Styled className={status} aria-busy={status === 'pending'}>
       <div className="image">
-        {icon ?? <IconBox><Document /></IconBox>}
+        {icon ?? <Icon icon="Document" />}
         {status === 'pending' && <div className="status" aria-label={t.loading}>
-          <LoadingCircular size="xs" />
+          <ProgressCircular size="xs" />
         </div>}
         {status === 'error' && <div className="status" aria-label={t.error}>
-          <IconButton appearance="circle" color="danger" title={t.retry} aria-label={t.retry} onClick={onRetry}><Sync /></IconButton>
+          <IconButton icon="Sync" appearance="circle" color="danger" title={t.retry} aria-label={t.retry} onClick={onRetry} />
         </div>}
       </div>
       <div className="details">
         <Text appearance="microtext1" className="name" title={name}>{name}</Text>
-        <Text appearance="microtext1" colorScheme="light.700">{extension.toUpperCase()}</Text>
+        <Text appearance="microtext1" color="light.700">{extension.toUpperCase()}</Text>
       </div>
-      {onRemove && <IconButton onClick={onRemove} title={t.remove} arial-label={`${t.remove} ${name}`}>
-        <TimesMini />
-      </IconButton>}
+      {onRemove && <IconButton
+        icon="TimesMini"
+        onClick={onRemove}
+        title={t.remove}
+        arial-label={`${t.remove} ${name}`}
+        style={{ alignSelf: 'start' }}
+        size="xs"
+      />}
     </Styled>
   )
 }

package/src/components/HistoryList.tsx

@@ -1,4 +1,4 @@
-import { Text } from '@citric/core'
+import { Text } from '@stack-spot/citric-react'
 import { theme, WithStyle } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { groupBy, map } from 'lodash'

package/src/components/ListResource.tsx

@@ -1,4 +1,4 @@
-import { Box, Flex, Text } from '@citric/core'
+import { Row, Text } from '@stack-spot/citric-react'
 import { WithStyle } from '@stack-spot/portal-theme'
 import { useMemo } from 'react'
 
@@ -43,18 +43,18 @@ export function ListResource<T>({ list, renderLabel, renderBeforeElement, render
       const content = typeof label === 'string' ? <Text>{label}</Text> : label
       return (
         <li key={keygen(listItem)}>
-          <Flex alignItems="center">
+          <Row>
             {renderBeforeElement?.(listItem)}
             {content}
             {renderAfterElement?.(listItem)}
-          </Flex>
+          </Row>
         </li>
       )
     }), [list])
     
   return (
-    <Box as="ul" m={0} p={0} w={12} style={style} className={className}>
+    <ul style={{ margin: 0, padding: 0, width: '100%', ...style }} className={className}>
       {items}
-    </Box>
+    </ul>
   )
 }

package/src/components/Markdown.tsx

@@ -32,7 +32,7 @@ export const Markdown = (
 ) => (
   <>
     <ReactMarkdown
-      className="markdown"
+      className="markdown apply-citric"
       remarkPlugins={[[remarkGfm]]}
       components={{
         a: props => <a target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'underline' }} {...props} />,

package/src/components/Modal.tsx

@@ -1,6 +1,4 @@
-import { Text } from '@citric/core'
-import { Times } from '@citric/icons'
-import { IconButton } from '@citric/ui'
+import { IconButton, Text } from '@stack-spot/citric-react'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
@@ -19,7 +17,7 @@ const ModalContent = ({ title, children, onClose }: Omit<Props, 'open'>) => {
     <div className="chat-modal">
       <header>
         {typeof title === 'string' ? <Text appearance="h6">{title}</Text> : title}
-        <IconButton aria-label={t.close} title={t.close} appearance="circle" onClick={onClose}><Times /></IconButton>
+        <IconButton icon="Times" aria-label={t.close} title={t.close} onClick={onClose} />
       </header>
       <article>{children}</article>
     </div>

package/src/components/QuickStartButton.tsx

@@ -1,12 +1,13 @@
-import { Button, IconBox, Text } from '@citric/core'
+import { Icon } from '@stack-spot/citric-icons'
+import { Button, Text } from '@stack-spot/citric-react'
 import { WithStyle } from '@stack-spot/portal-theme'
 import { ButtonAction } from '../types'
 
-interface Props extends ButtonAction, WithStyle { }
+type Props = ButtonAction & WithStyle
 
-export const QuickStartButton = ({ label, onClick, className, icon, style }: Props) => {
+export const QuickStartButton = ({ label, onClick, className, group, icon, style }: Props) => {
   const content = <>
-    {icon && <IconBox color="light" aria-hidden>{icon}</IconBox>}
+    {icon && <Icon group={group} icon={icon} aria-hidden />}
     <Text nowrapEllipsis>{label}</Text>
   </>
 

package/src/components/RightPanelForm.tsx

@@ -1,10 +1,9 @@
-import { Card } from '@citric/ui'
+import { FallbackBoundary } from '@stack-spot/citric-react'
 import { theme } from '@stack-spot/portal-theme'
 import { styled } from 'styled-components'
 import { panelAnimationTime } from '../right-panel/constants'
 import { PropsOf } from '../types'
 import { AutoFocus } from './AutoFocus'
-import { FallbackBoundary } from './FallbackBoundary'
 
 const Form = styled.form`
   display: flex;
@@ -14,7 +13,7 @@ const Form = styled.form`
   flex: 1;
   gap: 20px;
 
-  > .content, .content-navigator .content, .content-navigator:not(.full) {
+  > .content, .content-navigator > .content, .content-navigator:not(.full) {
     display: flex;
     flex-direction: column;
     gap: 8px;
@@ -52,22 +51,30 @@ const Form = styled.form`
   > button {
     margin-right: auto;
   }
-
-  .search {
-    margin-bottom: 8px;
-  }
-
+  
   .option-list {
     overflow: auto;
+    > .row {
+      gap: 6px;
+      align-items: start;
+    }
+    [data-citric="accordion"] {
+      background-color: ${theme.color.light[400]};
+      flex: 1;
+      > header {
+        min-height: 24px;
+        padding: 8px 10px;
+        align-items: center;
+        p {
+          flex: 1;
+        }
+      }
+    }
   }
 
-  li.filtered-out {
+  .filtered-out {
     opacity: 0.5;
   }
-
-  ${Card} svg {
-    fill: transparent;
-  }
 `
 
 /**