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

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;
-  }
 `
 
 /**

package/src/components/RightPanelTabs.tsx

@@ -1,43 +1,15 @@
-import { Tabs, TabsItem } from '@citric/ui'
-import { useMemo, useState } from 'react'
-import styled from 'styled-components'
+import { Tab, Tabs } from '@stack-spot/citric-react'
+import { useMemo } from 'react'
 import { RightPanelForm } from './RightPanelForm'
 
-interface Tab {
-  title: string,
-  content: React.ReactNode,
-}
-
 interface Props {
   tabs: Tab[],
 }
 
-const StyledTabs = styled(Tabs)`
-  > button {
-    flex: 1;
-    padding: 8px 0;
-  }
-`
-
-const StyledTabsItem = styled(TabsItem)`
-  flex: 1;
-  overflow: hidden;
-`
-
 /**
  * Tabs for the right panel content.
  */
 export const RightPanelTabs = ({ tabs }: Props) => {
-  const [currentTab, setCurrentTab] = useState(0)
-  const tabItems = useMemo(() => tabs.map(({ content, title }) => (
-    <StyledTabsItem key={title} title={title}>
-      <RightPanelForm>{content}</RightPanelForm>
-    </StyledTabsItem>
-  )), [tabs])
-
-  return (
-    <StyledTabs activeIndex={currentTab} onChange={setCurrentTab}>
-      {tabItems}
-    </StyledTabs>
-  )
+  const tabItems = useMemo(() => tabs.map(t => ({ ...t, content: <RightPanelForm>{t.content}</RightPanelForm> })), [tabs])
+  return <Tabs tabs={tabItems} />
 }

package/src/components/Selector/index.tsx

@@ -1,6 +1,4 @@
-import { IconBox, Text } from '@citric/core'
-import { ExternalLink } from '@citric/icons'
-import { IconButton } from '@citric/ui'
+import { FallbackBoundary, IconLink, Text } from '@stack-spot/citric-react'
 import { useKeyboardControls } from '@stack-spot/portal-components'
 import { AgentVisibilityLevel } from '@stack-spot/portal-network'
 import { Dictionary, interpolate, useTranslate } from '@stack-spot/portal-translate'
@@ -9,7 +7,6 @@ import { useCurrentChatState, useWidgetState } from '../../context/hooks'
 import { getUrlToStackSpotAI } from '../../utils/url'
 import { ButtonFavorite } from '../ButtonFavorite'
 import { Fading } from '../Fading'
-import { FallbackBoundary } from '../FallbackBoundary'
 import { SelectorBox } from './styled'
 
 type SectionVisibility =  AgentVisibilityLevel
@@ -100,10 +97,17 @@ const ListItem = <T extends Item>({ item, selectorConfig, onSelect, favorite }:
       >
         {renderComponentItem(item)}
       </button>
-      <IconButton as="a" title={linkTitle} aria-label={linkTitle} href={`${getUrlToStackSpotAI()}${urlBuilder(item)}`} target="_blank">
-        <ExternalLink />
-      </IconButton>
-      <ButtonFavorite favorite={{ ...favorite, idOrSlug: favorite?.favoriteIsSlug ? item.slug : item?.id, listFavorites }} isIconButton />
+      <IconLink
+        icon="ExternalLink"
+        title={linkTitle}
+        aria-label={linkTitle}
+        href={`${getUrlToStackSpotAI()}${urlBuilder(item)}`}
+        target="_blank"
+      />
+      <ButtonFavorite
+        appearance="text"
+        favorite={{ ...favorite, idOrSlug: favorite?.favoriteIsSlug ? item.slug : item?.id, listFavorites }}
+      />
     </li>
   )
 }
@@ -128,9 +132,9 @@ const List = <T extends Item>({ selectorConfig, filter, visibility, onSelect, fa
   }, [filter, items, visibility, favorites])
 
 
-  if (!items.length) return <Text className="empty" colorScheme="light.700">{interpolate(t.noData, selectorConfig.resourceName)}</Text>
+  if (!items.length) return <Text className="empty" color="light.700">{interpolate(t.noData, selectorConfig.resourceName)}</Text>
   if (!filtered?.length)
-    <Text className="empty" colorScheme="light.700">{interpolate(t.noResults, selectorConfig.resourceName)}</Text>
+    <Text className="empty" color="light.700">{interpolate(t.noResults, selectorConfig.resourceName)}</Text>
 
   return (
     <ul className="selector-list">
@@ -180,8 +184,8 @@ const SelectorContent = ({ filter, onClose, selectorConfig, favorite }: ContentP
   return (
     <div ref={ref}>
       <header>
-        <IconBox>{icon}</IconBox>
-        <Text as="h3" className="uppercase"> {resourceName} </Text>
+        {icon}
+        <Text tag="h3">{resourceName}</Text>
       </header>
       <div className="body">
         {isGroupResourcesByScope && (
@@ -190,7 +194,7 @@ const SelectorContent = ({ filter, onClose, selectorConfig, favorite }: ContentP
             {sections.map(createSectionItem)}
           </ul>
         )}
-        <FallbackBoundary message={interpolate(t.error, selectorConfig.resourceName)} mini>
+        <FallbackBoundary message={interpolate(t.error, selectorConfig.resourceName)}>
           <List filter={filter} visibility={visibility} selectorConfig={selectorConfig} onSelect={onSelectItem} favorite={favorite} />
         </FallbackBoundary>
       </div>

package/src/components/Selector/styled.ts

@@ -40,13 +40,16 @@ export const SelectorBox = styled.div<{ $tabsCount: number }>`
       flex-direction: row;
       gap: 8px;
       align-items: center;
-      padding: 8px;
+      padding: 0 8px;
       margin-bottom: 4px;
-      font-family: 'San Francisco';
-      text-transform: uppercase;
-      font-weight: 500;
-      font-size: 11px;
       background-color: ${theme.color.light[500]};
+      height: 40px;
+      h3 {
+        text-transform: uppercase;
+        font-weight: 500;
+        font-size: 12px;
+        margin: 0;
+      }
     }
 
     .body {

package/src/components/StackedBadge.tsx

@@ -1,4 +1,4 @@
-import { IconBox, Text } from '@citric/core'
+import { Text } from '@stack-spot/citric-react'
 import { theme } from '@stack-spot/portal-theme'
 import { DetailedHTMLProps, HTMLAttributes } from 'react'
 import { styled } from 'styled-components'
@@ -46,9 +46,9 @@ const Styled = styled.div`
       }
     }
 
-    i {
-      width: 12px;
-      height: 12px;
+    .citric-icon {
+      margin: 1px;
+      font-size: 10px;
     }
 
     img, svg {
@@ -67,7 +67,7 @@ export const StackedBadge = ({ label, images, ...props }: Props) => (
           <li key={key || i}>
             {url
               ? <img alt={name} aria-label={name} title={name} src={url} />
-              : <IconBox size="xs" aria-label={name} title={name}>{icon}</IconBox>
+              : <span aria-label={name} title={name}>{icon}</span>
             }
           </li>
         ),

package/src/components/TabManager.tsx

@@ -1,8 +1,6 @@
 /* Tabs to select chat and add new chats */
 
-import { Button, IconBox } from '@citric/core'
-import { TimesMini } from '@citric/icons'
-import { IconButton } from '@citric/ui'
+import { Button, IconBox, IconButton } from '@stack-spot/citric-react'
 import { listToClass, theme } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { last } from 'lodash'
@@ -71,14 +69,6 @@ const Tabs = styled.nav<{ $numberOfExtraButtons: number }>`
     }
   }
 
-  ${IconButton} {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: transparent;
-    border: none;
-  }
-
   .list-overflow {
     max-width: ${({ $numberOfExtraButtons }) => `calc(100% - ${$numberOfExtraButtons * (EXTRA_BTN_SIZE + EXTRA_BTN_MARGIN * 2)}px)`};
   }
@@ -145,21 +135,6 @@ const Tabs = styled.nav<{ $numberOfExtraButtons: number }>`
           mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%);
         }
       }
-
-      ${IconButton} {
-        padding: 0;
-        width: 18px;
-        height: 18px;
-        transition: background-color 0.3s;
-
-        svg {
-          height: 14px;
-        }
-
-        &:hover {
-          background-color: ${theme.color.light[600]};
-        }
-      }
     }
   }
 `
@@ -185,36 +160,33 @@ export function TabManager<T, Key extends React.Key>(
   const tabItems = useMemo(() => tabs.map((tab) => (
     <li key={keygen(tab)} className={keygen(tab) === active ? 'active' : undefined} onClick={onClickTab}>
       <button className="label" onClick={() => onSelect(tab)}><FadingOverflow>{renderLabel(tab)}</FadingOverflow></button>
-      {tabs.length > 1 && <IconButton aria-label={t.close} title={t.close} onClick={() => onRemove(tab)}><TimesMini /></IconButton>}
+      {tabs.length > 1 && <IconButton icon="TimesMini" aria-label={t.close} title={t.close} onClick={() => onRemove(tab)} />}
     </li>
   )), [tabs, active])
 
-  const extras = useMemo(() => buttons.map(({ ariaLabel, label, onClick, icon, className, style }) => (
+  const extras = useMemo(() => buttons.map(({ ariaLabel, label, onClick, group, icon, className, style }) => (
     <>
       {label ? 
         <Button 
-          sx={{ paddingLeft: 0, marginRight: '4px', fontWeight: '400' }}
+          style={{ ...style, paddingLeft: 0, marginRight: '4px', fontWeight: '400' }}
           colorScheme="light"
           size="md"
           key={ariaLabel} 
           title={label} 
-          style={style} 
           onClick={onClick}>
-          <IconBox size="sm" sx={{ width: '32px', height: '16px', paddingInline: '8px' }} >
-            {icon} 
-          </IconBox>
+          <IconBox group={group} icon={icon as any} size="sm" style={{ width: '32px', height: '16px', paddingInline: '8px' }} />
           {label} 
         </Button> : 
         <IconButton
           key={ariaLabel}
+          group={group}
+          icon={icon as any}
           aria-label={ariaLabel}
           title={label}
           className={listToClass([className, 'extra'])}
           style={style}
           onClick={onClick}
-        >
-          {icon}
-        </IconButton>}
+        />}
     </>)), [buttons])
 
   // when a new tab is added, we should scroll to it if there are more tabs that we can show.

package/src/components/ToolBadge.tsx

@@ -1,148 +1,58 @@
-import { IconBox, Text } from '@citric/core'
-import { ChevronDown, Cog } from '@citric/icons'
-import { IconButton } from '@citric/ui'
-import { AnimatedHeight } from '@stack-spot/portal-components/AnimatedHeight'
-import { ColorSchemeKey, listToClass, theme } from '@stack-spot/portal-theme'
-import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
-import { get } from 'lodash'
-import { DetailedHTMLProps, HTMLAttributes, useState } from 'react'
+import { Icon } from '@stack-spot/citric-icons'
+import { Accordion, Card, ImageBox, ImageWithFallback, Text } from '@stack-spot/citric-react'
+import { theme } from '@stack-spot/portal-theme'
 import { styled } from 'styled-components'
-import { FastOmit } from 'styled-components/dist/types'
 import { toPrecision } from '../views/Steps/utils'
 
-interface Props extends FastOmit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> {
+type Props = Omit<React.JSX.IntrinsicElements['div'], 'onChange'> & {
   name: string,
   duration?: number,
   image?: string,
   description?: string,
-  appearance?: 'round' | 'square',
-  backgroundColor?: ColorSchemeKey,
 }
 
-const Styled = styled.div<{ $backgroundColor: ColorSchemeKey }>`
- .tool-header-wrapper {
-    background-color: ${({ $backgroundColor }) => get(theme.color, $backgroundColor)};
-    border-radius: 8px;
+const Styled = styled.div`
+  [data-citric="card"] {
+    flex-direction: row;
+    gap: 8px;
+    border-radius: ${theme.radius.xl};
+    border: none;
+    align-items: center;
+    padding: 4px 16px 4px 4px;
   }
- 
-  .tool-header {
-    padding: 4px 8px 4px 4px;
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-    position: relative;
 
-    .title {
-      display: flex;
-      gap: 8px;
-      align-items: center;
-      .tool-image {
-        width: 24px;
-        height: 24px;
-        border-radius: 50%;
-        overflow: hidden;
-        flex-shrink: 0;
-      }
-      .name {
-        flex: 1;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-    }
-
-    .btn-expand {
-      display: none;
-    }
-
-    .duration {
-      opacity: 0.7;
-      text-align: right;
-    }
-  }
-
-  &.with-description {
-    .tool-header {
-      &:before {
-        content: '';
-        top: 32px;
-        bottom: 8px;
-        left: 15px;
-        width: 1px;
-        background-color: ${theme.color.light[700]};
-        opacity: 0.3;
-        position: absolute;
-      }
-
-      .btn-expand {
-        display: flex;
-        transition: transform 0.3s ease-in-out;
-        &.open {
-          transform: rotate(180deg);
-        }
-      }
-
-      .description {
-        padding: 0 0 10px 20px;
-        opacity: 0.7;
-      }
-    }
-  }
-
-  &.round {
-    .tool-header-wrapper {
-      border-radius: 30px;
-    }
-    &:not(.with-description) {
-      .tool-header-wrapper {
-        padding-right: 10px;
+  [data-citric="accordion"] {
+    background-color: ${theme.color.light[500]};
+    > header > label {
+      padding: 6px 10px 6px 6px;
+      font: ${theme.font.body2};
+      input:before {
+        font-size: 12px !important;
       }
     }
   }
 `
 
 export const ToolBadge = (
-  { name, duration, image, description, appearance = 'square', backgroundColor = 'light.300', className, ...props }: Props,
+  { name, duration, image, description, ...props }: Props,
 ) => {
-  const t = useTranslate(dictionary)
-  const [showDescription, setShowDescription] = useState(false)
-  const rootClass = listToClass([className, appearance, description && 'with-description'])
-  const wrapperClass = 'tool-header-wrapper'
-
-  const content = (
-    <div className="tool-header">
-      <div className="title">
-        {image ? <img src={image} className="tool-image" /> : <IconBox className="tool-image"><Cog /></IconBox>}
-        <Text colorScheme="light.700" className="name">{name}</Text>
-        {duration !== undefined && <Text colorScheme="light.700" className="duration">
-          {toPrecision(duration)}s
-        </Text>}
-        <IconButton
-          size="xs"
-          className={listToClass(['btn-expand', showDescription && 'open'])}
-          onClick={() => setShowDescription(v => !v)}
-          aria-label={showDescription ? t.close : t.open}
-        >
-          <ChevronDown />
-        </IconButton>
-      </div>
-      {showDescription && <Text className="description" colorScheme="light.700">{description}</Text>}
-    </div>
-  )
-
-  return (
-    <Styled {...props} $backgroundColor={backgroundColor} className={rootClass}>
-      {description ? <AnimatedHeight className={wrapperClass}>{content}</AnimatedHeight> : <div className={wrapperClass}>{content}</div>}
-    </Styled>
-  )
+  const header = <>
+    <ImageBox><ImageWithFallback src={image} fallback={<Icon icon="Cog" className="tool-image" />} /></ImageBox>
+    <Text color="light.700" className="name" style={{ flex: 1 }}>{name}</Text>
+    {duration !== undefined && <Text color="light.700" className="duration">
+      {toPrecision(duration)}s
+    </Text>}
+  </>
+    
+  return <Styled>
+    {description ? (
+      <Accordion
+        appearance="card"
+        header={header}
+        {...props}
+      >
+        <Text className="description" color="light.700">{description}</Text>
+      </Accordion>
+    ) : <Card {...props}>{header}</Card>}
+  </Styled>
 }
-
-const dictionary = {
-  en: {
-    open: 'Open',
-    close: 'Close',
-  },
-  pt: {
-    open: 'Abrir',
-    close: 'Fechar',
-  },
-} satisfies Dictionary

package/src/components/WorkspaceTabNavigator.tsx

@@ -1,6 +1,5 @@
-import { Box, Flex, IconBox, Image, Text } from '@citric/core'
-import { ArrowRight, Search, Spaces, Times } from '@citric/icons'
-import { Avatar, IconButton } from '@citric/ui'
+import { Icon } from '@stack-spot/citric-icons'
+import { FieldGroup, IconButton, ImageBox, Input, Row, Text } from '@stack-spot/citric-react'
 import { Placeholder } from '@stack-spot/portal-components/Placeholder'
 import { workspaceAiClient } from '@stack-spot/portal-network'
 import { WorkspaceResponse, WorkspaceVisibilityLevelEnum } from '@stack-spot/portal-network/api/workspace-ai'
@@ -9,7 +8,6 @@ import { memo, useMemo, useState } from 'react'
 import { useRightPanel } from '../right-panel/hooks'
 import { ButtonFavorite } from './ButtonFavorite'
 import { ComponentNavigator, ComponentNavigatorProps, NavigationComponent, NavigationMap, useComponentNavigation } from './ComponentNavigator'
-import { IconInput } from './IconInput'
 import { ListResource } from './ListResource'
 
 interface CardSpaceProps {
@@ -20,25 +18,24 @@ interface CardSpaceProps {
 }
 
 export const CardSpace = ({ onClick, name, icon, logoUrl }: CardSpaceProps) =>
-  <Flex
+  <Row
     onClick={onClick}
     flex={1}
-    alignItems="center"
     justifyContent="space-between"
     mr={2}
     bg="light.400"
-    r="sm"
+    radius="sm"
     p={3}
-    sx={{ cursor: 'pointer' }}
+    style={{ cursor: 'pointer' }}
   >
-    <Flex alignContent="center" alignItems="center" sx={{ gap: '8px', m: 1 }} >
-      <Avatar size="xxs" appearance="square" sx={{ bg: 'light.600', r: 'xxs' }}>
-        {logoUrl ? <Image src={logoUrl} /> : <IconBox> {icon} </IconBox>}
-      </Avatar>
+    <Row gap="8px">
+      <ImageBox appearance="square">
+        {logoUrl ? <img src={logoUrl} /> : icon}
+      </ImageBox>
       <Text appearance="body2">{name}</Text>
-    </Flex>
-    <IconButton><ArrowRight /></IconButton>
-  </Flex>
+    </Row>
+    <IconButton icon="ArrowRight" />
+  </Row>
 
 interface WorkspaceSourcesTabProps {
   visibility: WorkspaceVisibilityLevelEnum,
@@ -91,16 +88,17 @@ const WorkspaceSourcesTab = ({ visibility, onClick }: WorkspaceSourcesTabProps)
 
   return (
     <>
-      <Box w={12}>
-        <IconInput icon={<Search />} value={filter} onChange={setFilter} className="search" />
-      </Box>
+      <FieldGroup fullWidth style={{ alignSelf: 'stretch' }}>
+        <Icon icon="Search" />
+        <Input type="search" value={filter} onChange={setFilter} />
+      </FieldGroup>
 
       {!!filtered.length &&
         <ListResource
           list={filtered}
           keygen={w => w.id}
           style={{ gap: '6px', display: 'flex', flexDirection: 'column' }}
-          renderLabel={w => <CardSpace name={w.name} logoUrl={w.logo} icon={<Spaces />} onClick={() => onClick(w)} />}
+          renderLabel={w => <CardSpace name={w.name} logoUrl={w.logo} icon={<Icon icon="Spaces" />} onClick={() => onClick(w)} />}
           renderAfterElement={(w) =>
             <ButtonFavorite favorite={{ idOrSlug: w?.id, listFavorites, onAddFavorite, onRemoveFavorite }} />}
           optionClassName={w => (filter && !w.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase()))
@@ -110,26 +108,25 @@ const WorkspaceSourcesTab = ({ visibility, onClick }: WorkspaceSourcesTabProps)
           className="option-list"
         />
       }
-      <Box w={12}>
+      <div style={{ width: '100%' }}>
         {!!workspaces.length && !filtered.length &&
           <Placeholder title={t.noSearchResults} description={t.noSearchResultsDescription} className="no-data-placeholder" />}
         {!workspaces.length && <Placeholder title={t.noData} description={t.noDataDescription} />}
-      </Box>
+      </div>
     </>
   )
 }
 
-
 const WorkspaceHeader = <T extends NavigationMap, K extends keyof T>({ data }: { data: NavigationComponent<T, K> }) => {
   const { close: closeRightPanel } = useRightPanel()
   const workspaceId = (data.props as any)['workspaceId']
   if (!workspaceId) return
 
   const workspace = workspaceAiClient.workspaceAi.useQuery({ id: workspaceId })
-  return <Flex justifyContent="space-between" alignItems="center" flex={1}>
+  return <Row justifyContent="space-between" flex={1}>
     {data.component === 'workspaceResource' ? 'Spots' : workspace.name}
-    {data.fullScreen && <IconButton title={'t.close'} aria-label={'t.close'} onClick={closeRightPanel}>  <Times /> </IconButton>}
-  </Flex>
+    {data.fullScreen && <IconButton icon="Times" title={'t.close'} aria-label={'t.close'} onClick={closeRightPanel} />}
+  </Row>
 }
 
 interface WorkspaceTabNavigatorProps {