@stack-spot/ai-chat-widget 0.11.0 → 1.0.0-dev.1768324407795

package/src/components/ToolBadge.tsx

@@ -0,0 +1,67 @@
+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 { useCurrentChatState } from '../context/hooks'
+import { toPrecision } from '../views/Steps/utils'
+
+type Props = Omit<React.JSX.IntrinsicElements['div'], 'onChange'> & {
+  name: string,
+  duration?: number,
+  image?: string,
+  description?: string,
+}
+
+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;
+  }
+
+  [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, ...props }: Props,
+) => {
+  const currentAgent = useCurrentChatState('agent')
+  
+  const header = <>
+    <ImageBox><ImageWithFallback src={image} fallback={
+      <ImageWithFallback
+        src={currentAgent?.image ?? ''}
+        className="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>
+}

package/src/components/WorkspaceTabNavigator.tsx

@@ -0,0 +1,172 @@
+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'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+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 { ListResource } from './ListResource'
+
+interface CardSpaceProps {
+  onClick: VoidFunction,
+  name: string,
+  icon: React.ReactElement,
+  logoUrl?: string | null,
+}
+
+export const CardSpace = ({ onClick, name, icon, logoUrl }: CardSpaceProps) =>
+  <Row
+    onClick={onClick}
+    flex={1}
+    justifyContent="space-between"
+    mr={2}
+    bg="light.400"
+    radius="sm"
+    p={3}
+    style={{ cursor: 'pointer' }}
+  >
+    <Row gap="8px">
+      <ImageBox appearance="square">
+        {logoUrl ? <img src={logoUrl} /> : icon}
+      </ImageBox>
+      <Text appearance="body2">{name}</Text>
+    </Row>
+    <IconButton icon="ArrowRight" />
+  </Row>
+
+interface WorkspaceSourcesTabProps {
+  visibility: WorkspaceVisibilityLevelEnum,
+  onClick: (workspace: WorkspaceResponse) => void,
+}
+
+const WorkspaceSourcesTab = ({ visibility, onClick }: WorkspaceSourcesTabProps) => {
+  const t = useTranslate(dictionary)
+  const [filter, setFilter] = useState('')
+  const workspaces = workspaceAiClient.workspacesAi.useQuery({ visibility })
+  const listFavorites = workspaceAiClient.workspacesAi.useQuery({ visibility: 'favorite' })
+  const [addFavorite, pendingAddFav] = workspaceAiClient.addFavoriteWorkspaceAi.useMutation()
+  const [removeFavorite, pendingRemoveFav] = workspaceAiClient.removeFavoriteWorkspaceAi.useMutation()
+
+  // eslint-disable-next-line no-async-promise-executor
+  const onAddFavorite = async (idOrSlug: string) => new Promise<boolean>(async (resolve, reject) => {
+    try {
+      await addFavorite({ workspaceId: idOrSlug })
+      await workspaceAiClient.workspacesAi.invalidate()
+      if (!pendingAddFav) {
+        resolve(true)
+      }
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error)
+      reject(error)
+    }
+  })
+
+  // eslint-disable-next-line no-async-promise-executor
+  const onRemoveFavorite = (idOrSlug: string) => new Promise<boolean>(async (resolve, reject) => {
+    try {
+      await removeFavorite({ workspaceId: idOrSlug })
+      await workspaceAiClient.workspacesAi.invalidate()
+      if (!pendingRemoveFav) {
+        resolve(true)
+      }
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error)
+      reject(error)
+    }
+  })
+
+  const filtered = useMemo(
+    // Recreate the list so that the favorites list is taken into account
+    () => filter ? workspaces.filter(w => w.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase())) : [...workspaces],
+    [workspaces, filter, listFavorites],
+  )
+
+  return (
+    <>
+      <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={<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()))
+            ? 'filtered-out'
+            : ''
+          }
+          className="option-list"
+        />
+      }
+      <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} />}
+      </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 <Row justifyContent="space-between" flex={1}>
+    {data.component === 'workspaceResource' ? 'Spots' : workspace.name}
+    {data.fullScreen && <IconButton icon="Times" title={'t.close'} aria-label={'t.close'} onClick={closeRightPanel} />}
+  </Row>
+}
+
+interface WorkspaceTabNavigatorProps {
+  getNavigateParam: (workspace: WorkspaceResponse) => NavigationComponent<NavigationMap, string>,
+  visibility?: WorkspaceVisibilityLevelEnum,
+  className?: string,
+}
+export function WorkspaceTabNavigator<T extends NavigationMap, K extends keyof T>({ components, getNavigateParam, visibility, className }:
+  Omit<ComponentNavigatorProps<T, K>, 'initialItem'> & WorkspaceTabNavigatorProps) {
+
+  const workspaceTabComponents = useMemo(() => ({
+    workspace: memo(function WorkspacesTab() {
+      const { navigate } = useComponentNavigation()
+      return (<WorkspaceSourcesTab visibility={visibility ?? 'all'} onClick={(w) => navigate(getNavigateParam(w))} />)
+    }),
+    ...components,
+  }), [components])
+
+  return <ComponentNavigator
+    initialItem={{ component: 'workspace' }}
+    components={workspaceTabComponents}
+    className={className}
+    renderTitle={(data) => <WorkspaceHeader data={data} />}
+  />
+}
+
+const dictionary = {
+  en: {
+    noSearchResults: "Your search didn't yield results.",
+    noSearchResultsDescription: 'Please, try another search term.',
+    noData: 'There are no spot yet.',
+    noDataDescription: 'Use the AI portal to create new spots.',
+    apply: 'Apply',
+  },
+  pt: {
+    noSearchResults: 'Sua busca não produziu resultados',
+    noSearchResultsDescription: 'Por favor, tente outra busca.',
+    noData: 'Ainda não há spots.',
+    noDataDescription: 'Use o Portal AI para criar novos spots.',
+    apply: 'Aplicar',
+  },
+} satisfies Dictionary
+

package/src/components/form/DescribedCheckboxGroup.tsx

@@ -1,39 +1,141 @@
-import { Checkbox, Text } from '@citric/core'
-import { listToClass } from '@stack-spot/portal-theme'
-import { useMemo } from 'react'
-import { Accordion } from '../Accordion'
-import { RadioCheckBox } from './styled'
-import { CheckProps } from './types'
+import { Icon } from '@stack-spot/citric-icons'
+import { Accordion, Checkbox, CheckboxGroup, FieldGroup, Input, Row, Text, useCheckboxGroupControls } from '@stack-spot/citric-react'
+import { InfiniteScroll } from '@stack-spot/portal-components/InfiniteScroll'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { difference, isEqual, uniqBy } from 'lodash'
+import { useCallback, useEffect, useState } from 'react'
+import styled from 'styled-components'
+import { Labeled } from '../../state/types'
+import { ButtonFavorite, Favorite } from '../ButtonFavorite'
 
+interface Props<T> {
+  initialValue?: T[],
+  options: T[],
+  /**
+   * Must return the data needed by the component, given the option.
+   */
+  data: (option: T) => { name: string, description: string } & Favorite<any>,
+  /**
+   * Use this when the selection must be kept at a global level, managed by a React Ref.
+   */
+  globalSelection?: React.MutableRefObject<Labeled[] | undefined>,
+  emptyResults: React.ReactNode,
+  emptyDataset: React.ReactNode,
+  onChange?: (value: T[]) => void,
+  fetchNextPage?: () => void,
+  hasNextPage?: boolean,
+}
+
+const StyledDiv = styled.div`
+  &#ks-scrollable {
+    overflow: auto;
+  }
+`
+
+/**
+ * Renders a checkbox group where each option has a label and a description.
+ * The description in placed under the label and checkbox as an accordion.
+ * 
+ * Also renders a search input and a select all checkbox.
+ */
 export function DescribedCheckboxGroup<T>(
-  { keygen, onChange, options, renderDescription, renderLabel, optionClassName, optionStyle, value, className, style }: CheckProps<T>,
+  { initialValue, options: opt, data, globalSelection, onChange: change, emptyDataset, emptyResults,
+    fetchNextPage, hasNextPage,
+  }: Props<T>,
 ) {
-  const items = useMemo(() => options.map((option) => {
-    const label = renderLabel(option)
-    const description = renderDescription(option)
-    const header = (
-      <label>
-        <Checkbox
-          checked={value.includes(option)}
-          onChange={(e) => {
-            if (e.target.checked && !value.includes(option)) onChange([...value, option])
-            else onChange(value.filter(item => item !== option)) 
-          }}
-        />
-        {typeof label === 'string' ? <Text>{label}</Text> : label}
-      </label>
-    )
-    return (
-      <li key={keygen(option)} className={listToClass(['radio-group-item', optionClassName?.(option)])} style={optionStyle?.(option)}>
-        <Accordion header={header}>
-          {typeof description === 'string'
-            ? <Text appearance="microtext1" colorScheme="light.700">{description}</Text>
-            : description as any
-          }
-        </Accordion>
-      </li>
+  const t = useTranslate(dictionary)
+  const [options, setOptions] = useState(opt)
+  useEffect(() => {
+    if (controls.value.length === 0 && (initialValue?.length ?? 0) > 0) controls.setValue(initialValue!)
+  }, [initialValue])
+
+  const onChange = useCallback((newValue: T[], previousValue: T[]) => {
+    change?.(newValue)
+    if (!globalSelection?.current) return
+    const added = difference(newValue, previousValue)
+    const removed = difference(previousValue, newValue)
+    globalSelection.current = globalSelection.current?.filter(o => !removed.some(r => data(r).idOrSlug === o.id)) ?? []
+    globalSelection.current = uniqBy(
+      [...globalSelection.current, ...added.map(o => ({ id: data(o).idOrSlug, label: data(o).name }))],
+      'id',
     )
-  }), [options, value])
+  }, [])
+
+  const controls = useCheckboxGroupControls({
+    initialValue,
+    options,
+    applyFilter: (filter, o) => data(o).name.toLocaleLowerCase().includes(filter.toLocaleLowerCase()),
+    renderKey: o => data(o).idOrSlug,
+    onChange,
+  })
 
-  return <RadioCheckBox style={style} className={className}>{items}</RadioCheckBox>
+  useEffect(() => {
+    if (!isEqual(opt, options)) {
+      setOptions(opt)
+    }
+  }, [opt])
+
+  return options?.length ? <>
+    <FieldGroup fullWidth>
+      <Icon icon="Search" />
+      <Input type="search" value={controls.filter} onChange={controls.setFilter} />
+    </FieldGroup>
+    {controls.options.length ? <>
+      <Row tag="label" gap="10px" p="11px">
+        <Checkbox value={controls.isAllSelected} onChange={v => v ? controls.selectAll() : controls.removeSelection()} />
+        <Text>{controls.isAllSelected ? t.removeAll : t.selectAll}</Text>
+      </Row>
+      <StyledDiv id="ks-scrollable">
+        <InfiniteScroll
+          scrollableTarget="ks-scrollable"
+          dataLength={controls.options.length}
+          next={fetchNextPage as any ?? undefined}
+          hasMore={hasNextPage ?? false}
+        >
+          <CheckboxGroup
+            options={controls.options}
+            value={controls.value}
+            onChange={controls.setValue}
+            renderKey={controls.renderKey}
+            className="option-list"
+            renderItem={(checkbox, o) => {
+              const { description, idOrSlug, name, listFavorites, onAddFavorite, onRemoveFavorite } = data(o)
+              return (
+                <Row className={controls.isUnfilteredButChecked(o) ? 'filtered-out' : ''}>
+                  <Accordion header={btn => <>{checkbox}<Text>{name}</Text>{btn}</>} appearance="card" maxHeight={100}>
+                    <Text appearance="microtext1" color="light.700" style={{ wordBreak: 'break-all' }}>{description}</Text>
+                  </Accordion>
+                  {onAddFavorite && <ButtonFavorite favorite={{
+                    idOrSlug: idOrSlug,
+                    listFavorites,
+                    onAddFavorite: async (...args) => {
+                      const res = await onAddFavorite(...args)
+                      setOptions([...options]) // forces options re-rendering
+                      return res
+                    },
+                    onRemoveFavorite: async (...args) => {
+                      const res = await onRemoveFavorite?.(...args)
+                      setOptions([...options]) // forces options re-rendering
+                      return res ?? false
+                    },
+                  }} />}
+                </Row>
+              )
+            }}
+          />
+        </InfiniteScroll>
+      </StyledDiv>
+    </> : emptyResults}
+  </> : emptyDataset
 }
+
+const dictionary = {
+  en: {
+    selectAll: 'Select all',
+    removeAll: 'Remove all',
+  },
+  pt: {
+    selectAll: 'Selecionar todos',
+    removeAll: 'Remover todos',
+  },
+} satisfies Dictionary

package/src/components/form/DescribedRadioGroup.tsx

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

package/src/components/form/dictionary.ts

@@ -0,0 +1,18 @@
+export  const dictionaryFavorites = {
+  en: {
+    add: 'Add',
+    remove: 'Remove',
+    become: 'Become',
+    favorite: 'Favorite',
+    couldNotActFavorite: 'Could not $0 favorite',
+    actionFavoriteSuccessfully: '$0 from favorites successfully',
+  },
+  pt: {
+    add: 'Adicionar',
+    remove: 'Remover',
+    become: 'Tornar',
+    favorite: 'Favorito',
+    couldNotActFavorite: 'Não foi possível $0 o favorito',
+    actionFavoriteSuccessfully: '$0 dos favoritos com sucesso',
+  },
+}

package/src/components/form/styled.ts

@@ -11,10 +11,9 @@ export const RadioCheckBox = styled.ul`
 
   > li {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     gap: 8px;
     border-radius: 6px;
-    background-color: ${theme.color.light[400]};
 
     label {
       display: flex;