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

package/src/StackspotAIWidget.tsx

@@ -1,7 +1,6 @@
+import { FallbackBoundary } from '@stack-spot/citric-react'
 import { listToClass, WithStyle } from '@stack-spot/portal-theme'
 import { useMemo, useRef } from 'react'
-import { FallbackBoundary } from './components/FallbackBoundary'
-import { TooltipProvider } from './components/Tooltip'
 import { useCurrentChatMessages, useCurrentChatState, useWidgetState } from './context/hooks'
 import './layout.css'
 import { RightPanel } from './right-panel/RightPanel'
@@ -86,41 +85,39 @@ export const StackspotAIWidget = (
 
   return useMemo(() => (
     <FallbackBoundary>
-      <TooltipProvider>
-        <RightPanelProvider chatWindow={chatWindowRef} panel={rightPanelRef}>
-          <div className={listToClass(['ai-chat-widget', isMinimized && 'minimized', className])} translate="no" style={style}>
-            <div className="chat-window" ref={chatWindowRef}>
-              {hasHeader &&<>
-                {isMinimized
-                  ? <MinimizedHeader {...minimizedActions} />
-                  : <ChatTabSelection />
-                }
-              </>
+      <RightPanelProvider chatWindow={chatWindowRef} panel={rightPanelRef}>
+        <div className={listToClass(['ai-chat-widget', isMinimized && 'minimized', className])} translate="no" style={style}>
+          <div className="chat-window" ref={chatWindowRef}>
+            {hasHeader &&<>
+              {isMinimized
+                ? <MinimizedHeader {...minimizedActions} />
+                : <ChatTabSelection />
               }
-              <div className="chat-container" ref={chatWindowRef}>
-                <div className="chat-content">
-                  {prefix}
-                  {isCurrentChatEmpty
-                    ? (children ?? <Home username={username} initialAgents={initialAgents} urlCreateAgent={urlCreateAgent} />)
-                    : <Chat username={username} beforeMessage={beforeMessage} afterMessage={afterMessage} />
-                  }
-                </div>
-                {features.messageInput && <MessageInput chatWindowRef={chatWindowRef} />}
+            </>
+            }
+            <div className="chat-container" ref={chatWindowRef}>
+              <div className="chat-content">
+                {prefix}
+                {isCurrentChatEmpty
+                  ? (children ?? <Home username={username} initialAgents={initialAgents} urlCreateAgent={urlCreateAgent} />)
+                  : <Chat username={username} beforeMessage={beforeMessage} afterMessage={afterMessage} />
+                }
               </div>
+              {features.messageInput && <MessageInput chatWindowRef={chatWindowRef} />}
             </div>
-            <Stacks />
-            {!isTrial && <Workspaces />}
-            <KnowledgeSources />
-            <KSDocument />
-            <Agents />
-            <Editor />
-            <ChatHistory />
-            <Steps />
-            <Tools />
-            <div className="chat-right-panel" ref={rightPanelRef}><RightPanel /></div>
           </div>
-        </RightPanelProvider>
-      </TooltipProvider>
+          <Stacks />
+          {!isTrial && <Workspaces />}
+          <KnowledgeSources />
+          <KSDocument />
+          <Agents />
+          <Editor />
+          <ChatHistory />
+          <Steps />
+          <Tools />
+          <div className="chat-right-panel" ref={rightPanelRef}><RightPanel /></div>
+        </div>
+      </RightPanelProvider>
     </FallbackBoundary>
   ), [isCurrentChatEmpty, username, isMinimized, children, initialAgents])
 }

package/src/app-metadata.json

@@ -1,7 +1,7 @@
 {
   "name": "@stack-spot/ai-chat-widget",
-  "version": "1.36.1-beta.1",
-  "date": "Thu Aug 07 2025 20:49:51 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,9 +95,17 @@
       "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",
@@ -117,7 +113,7 @@
     },
     {
       "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/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>
   </>