@stack-spot/ai-chat-widget 1.18.0-beta.8 → 1.18.0

package/src/components/ComponentNavigator.tsx

@@ -1,78 +0,0 @@
-import { Flex } from '@citric/core'
-import { ArrowLeft } from '@citric/icons'
-import { IconButton } from '@citric/ui'
-import { createContext, useCallback, useContext, useMemo, useState } from 'react'
-
-export type NavigationMap = Record<string, React.ComponentType<any>>
-
-export type NavigationItem<T extends NavigationMap, K extends keyof T = keyof T> = {
-  component: K,
-  props?: T[K] extends React.ComponentType<infer P> ? P : never,
-  fullScreen?: boolean,
-}
-
-export interface NavigationContextType<T extends NavigationMap> {
-  navigate: <K extends keyof T>(item: NavigationItem<T, K>) => Promise<void>,
-  goBack: () => void,
-  canGoBack: boolean,
-  currentItem: NavigationItem<T>,
-}
-
-export interface ComponentNavigatorProps<T extends NavigationMap, K extends keyof T> {
-  initialItem: NavigationItem<T, K>,
-  components: T,
-  renderTitle?: (item: NavigationItem<T, keyof T>) => React.ReactNode,
-  className?: string,
-}
-
-const NavigationContext = createContext<NavigationContextType<NavigationMap> | null>(null)
-
-export function ComponentNavigator<T extends NavigationMap, K extends keyof T>({
-  initialItem,
-  components,
-  renderTitle,
-  className,
-}: ComponentNavigatorProps<T, K>) {
-  const [navigationStack, setNavigationStack] = useState<NavigationItem<T>[]>([initialItem])
-  const currentItem = navigationStack[navigationStack.length - 1]
-
-  const navigate = useCallback((item: NavigationItem<T>) => { setNavigationStack((prev) => [...prev, item]) }, [])
-  const canGoBack = navigationStack.length > 1
-  const goBack = useCallback(() => {
-    if (canGoBack) {
-      setNavigationStack((prev) => prev.slice(0, -1))
-    }
-  }, [canGoBack])
-
-  const navigationContext = useMemo(() => ({ navigate, goBack, canGoBack, currentItem }), [navigate, goBack, canGoBack, currentItem])
-  const Component = components[currentItem.component]
-  const isFullScreen = currentItem.fullScreen
-
-  if (!Component) {
-    // eslint-disable-next-line no-console
-    console.error(`Componente not found: ${String(currentItem.component)}`)
-  }
-
-  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>
-          {renderTitle?.(currentItem)}
-        </Flex>
-      )}
-      <Component {...(currentItem.props as any)} />
-    </div>
-  </NavigationContext.Provider>
-  )
-}
-
-export function useComponentNavigation<T extends NavigationMap>(): NavigationContextType<T> {
-  const context = useContext(NavigationContext)
-  if (!context) {
-    throw new Error('useComponentNavigation should be used inside ComponentNavigator')
-  }
-  return context
-}

package/src/components/ListGroup.tsx

@@ -1,76 +0,0 @@
-import { Box, Flex, Text } from '@citric/core'
-import { WithStyle } from '@stack-spot/portal-theme'
-import { useMemo } from 'react'
-
-
-interface ListGroupProps<T> extends WithStyle {
-  /**
-   * The list available.
-   */
-  list: T[],
-  /**
-   * A function that renders an option as a label. This can either return a string or a React Element.
-   */
-  renderLabel: (item: T) => React.ReactNode,
-  /**
-   * A function that renders an option as a description. This can either return a string or a React Element.
-   */
-  renderDescription?: (item: T) => React.ReactNode,
-  /**
-   * A function that renders a element before the content
-   */
-  renderBeforeElement?: (item: T) => React.ReactNode,
-  /**
-   * A function that renders a element after the content
-   */
-  renderAfterElement?: (item: T) => React.ReactNode,
-  /**
-   * A function that gives a custom className to the rendered option.
-   */
-  optionClassName?: (item: T) => string | undefined,
-  /**
-   * A function that gives a custom style to the rendered option.
-   */
-  optionStyle?: (item: T) => React.CSSProperties | undefined,
-  /**
-   * A function that generates a unique id for the option.
-   */
-  keygen: (item: T) => React.Key,
-  /**
-   * A function to call whenever the item click.
-   */
-  onClick: (item: T) => void,
-}
-
-/**
- * Renders a radio button group where each option has a label and a description.
- * The description in placed under the label and radio button as an accordion.
- */
-export function ListGroup<T>(
-  {
-    list,
-    renderLabel,
-    renderBeforeElement,
-    renderAfterElement,
-    className,
-    keygen,
-    style }: ListGroupProps<T>,
-) {
-  const items = useMemo(() => list.map((listItem) => {
-    const label = renderLabel(listItem)
-    const content = typeof label === 'string' ? <Text>{label}</Text> : label
-
-    return (
-      <li key={keygen(listItem)}>
-        <Flex alignItems="center">
-          {renderBeforeElement?.(listItem)}
-          {content}
-          {renderAfterElement?.(listItem)}
-        </Flex>
-      </li>
-    )
-  }), [list])
-
-  return <Box as="ul" m={0} p={0} w={12} style={style} className={className}>{items}</Box>
-}
-

package/src/components/WorkspaceTabNavigator.tsx

@@ -1,177 +0,0 @@
-import { Box, Flex, IconBox, Image, Text } from '@citric/core'
-import { ArrowRight, Circle, Search, Times } from '@citric/icons'
-import { Avatar, IconButton } from '@citric/ui'
-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, NavigationItem, NavigationMap, useComponentNavigation } from './ComponentNavigator'
-import { IconInput } from './IconInput'
-import { ListGroup } from './ListGroup'
-
-interface CardSpaceProps {
-  onClick: VoidFunction,
-  name: string,
-  icon: React.ReactElement,
-  logoUrl?: string | null,
-}
-
-export const CardSpace = ({ onClick, name, icon, logoUrl }: CardSpaceProps) =>
-  <Flex
-    onClick={onClick}
-    flex={1}
-    alignItems="center"
-    justifyContent="space-between"
-    mr={2}
-    bg="light.400"
-    r="sm"
-    p={3}
-    sx={{ 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>
-      <Text appearance="body2">{name}</Text>
-    </Flex>
-    <IconButton><ArrowRight /></IconButton>
-  </Flex>
-
-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 (
-    <>
-      <Box w={12}>
-        <IconInput icon={<Search />} value={filter} onChange={setFilter} className="search" />
-      </Box>
-
-      {!!filtered.length &&
-        <ListGroup
-          list={filtered}
-          keygen={w => w.id}
-          onClick={onClick}
-          style={{ gap: '6px', display: 'flex', flexDirection: 'column' }}
-          renderLabel={w => <CardSpace name={w.name} logoUrl={w.logo} icon={<Circle />} onClick={() => onClick(w)} />}
-          renderDescription={w => w.description}
-          renderAfterElement={(w) =>
-            <ButtonFavorite favorite={{ idOrSlug: w?.id, listFavorites, onAddFavorite, onRemoveFavorite }} />}
-          optionClassName={w => (filter && !w.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase()))
-            ? 'filtered-out'
-            : ''
-          }
-          className="option-list"
-        />
-      }
-      <Box w={12}>
-        {!!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>
-    </>
-  )
-}
-
-
-const WorkspaceHeader = <T extends NavigationMap, K extends keyof T>({ data }: { data: NavigationItem<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}>
-    {data.component === 'workspaceResource' ? 'Spaces' : workspace.name}
-    {data.fullScreen && <IconButton title={'t.close'} aria-label={'t.close'} onClick={closeRightPanel}>  <Times /> </IconButton>}
-  </Flex>
-}
-
-interface WorkspaceTabNavigatorProps {
-  getNavigateParam: (workspace: WorkspaceResponse) => NavigationItem<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 spaces yet.',
-    noDataDescription: 'Use the AI portal to create new spaces.',
-    apply: 'Apply',
-  },
-  pt: {
-    noSearchResults: 'Sua busca não produziu resultados',
-    noSearchResultsDescription: 'Por favor, tente outra busca.',
-    noData: 'Ainda não há spaces.',
-    noDataDescription: 'Use o Portal AI para criar novos spaces.',
-    apply: 'Apply',
-  },
-} satisfies Dictionary
-

package/src/views/Workspaces/WorkspacesTab.tsx

@@ -1,121 +0,0 @@
-import { Button, Flex, IconBox, Image, Text } from '@citric/core'
-import { Agent, Circle, KnowledgeSource, Stack } from '@citric/icons'
-import { Avatar } from '@citric/ui'
-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 { useTransition } from 'react'
-import { useComponentNavigation } from '../../components/ComponentNavigator'
-import { Loading } from '../../components/FallbackBoundary/Loading'
-import { ListGroup } from '../../components/ListGroup'
-import { CardSpace, WorkspaceTabNavigator } from '../../components/WorkspaceTabNavigator'
-import { ChatProperties } from '../../state/ChatState'
-import { AgentsTab } from '../Agents/AgentsTab'
-import { KnowledgeSourcesTab } from '../KnowledgeSources'
-import { StacksTab } from '../Stacks'
-
-const SpaceCard = ({ workspaceId }: { workspaceId: string }) => {
-  const workspace = workspaceAiClient.workspaceAi.useQuery({ id: workspaceId })
-  return <Flex flexDirection="column" sx={{ gap: '8px' }}>
-    <Flex flexDirection="column" sx={{ gap: '4px' }}>
-      <Flex alignContent="center" alignItems="center" sx={{ gap: '8px', m: 1 }} >
-        <Avatar size="xxs" appearance="square" sx={{ bg: 'light.600', r: 'xxs' }}>
-          {workspace.logo ? <Image src={workspace.logo} /> : <IconBox> <Circle /> </IconBox>}
-        </Avatar>
-        <Text appearance="body2" weight="medium">{workspace.name} </Text>
-      </Flex>
-      <Text colorScheme="light.700">{workspace.description}</Text>
-    </Flex>
-  </Flex>
-}
-
-export interface TabProps {
-  visibility: WorkspaceVisibilityLevelEnum,
-  allKS: React.MutableRefObject<ChatProperties['knowledgeSources']>,
-  agent: React.MutableRefObject<ChatProperties['agent']>,
-  stack: React.MutableRefObject<ChatProperties['stack']>,
-  workspaceId?: string,
-  onSubmit: () => void,
-}
-
-export interface WorkspaceResource {
-  id: string,
-  resourceType: 'agent' | 'ks' | 'stack',
-  displayName: string,
-  icon: React.ReactElement,
-  workspaceId?: string,
-}
-
-const showSubmitButton = false
-
-export const WorkspaceResources = ({ workspaceId, allKS, agent, stack }: Omit<TabProps, 'onSubmit'>) => {
-  const { navigate } = useComponentNavigation<typeof workspaceTabComponents>()
-  const [isPending, startTransition] = useTransition()
-  const resourceTypes: WorkspaceResource[] = [
-    { id: 'agents', resourceType: 'agent', displayName: 'Agents', workspaceId, icon: <Agent /> },
-    { id: 'ks', resourceType: 'ks', displayName: 'Knowledge Sources', workspaceId, icon: <KnowledgeSource /> },
-    { id: 'stack', resourceType: 'stack', displayName: 'Stacks', workspaceId, icon: <Stack /> },
-  ]
-
-  const handleNavigate = (resource: WorkspaceResource) => {
-    startTransition(() => {
-      if (resource.resourceType === 'agent')
-        navigate({ component: 'agent', props: { visibility: 'WORKSPACE', agent, workspaceId, showSubmitButton }, fullScreen: true })
-
-      if (resource.resourceType === 'ks')
-        navigate({ component: 'ks', props: { visibility: 'workspace', allKS, workspaceId, showSubmitButton }, fullScreen: true })
-
-      if (resource.resourceType === 'stack')
-        navigate({ component: 'stack', props: { visibility: 'workspace', stack, workspaceId, showSubmitButton }, fullScreen: true })
-    })
-  }
-
-  return (<>
-    {workspaceId && <SpaceCard workspaceId={workspaceId} />}
-    {isPending ? <Loading /> :
-      <ListGroup
-        list={resourceTypes}
-        keygen={w => w.id}
-        onClick={(resource) => { handleNavigate(resource) }}
-        renderLabel={r => <CardSpace name={r.displayName} icon={r.icon} onClick={() => handleNavigate(r)} />}
-        style={{ gap: '6px', display: 'flex', flexDirection: 'column' }}
-      />
-    }
-  </>
-  )
-}
-
-const workspaceTabComponents = {
-  workspaceResource: WorkspaceResources,
-  agent: AgentsTab,
-  ks: KnowledgeSourcesTab,
-  stack: StacksTab,
-}
-
-export function WorkspacesTab({ visibility, allKS, agent, stack, onSubmit }: TabProps) {
-  const t = useTranslate(dictionary)
-  const buildNavigateParams = (workspace: WorkspaceResponse) => ({
-    component: 'workspaceResource',
-    props: { allKS, agent, stack, visibility, workspaceId: workspace.id } satisfies Omit<TabProps, 'onSubmit'>,
-    fullScreen: true,
-  })
-
-  return (<>
-    <WorkspaceTabNavigator
-      components={workspaceTabComponents}
-      getNavigateParam={buildNavigateParams}
-      visibility={visibility}
-    />
-    <Button className="workspace-submit" onClick={onSubmit} >{t.apply}</Button>
-  </>
-  )
-}
-
-const dictionary = {
-  en: {
-    apply: 'Apply',
-  },
-  pt: {
-    apply: 'Aplicar',
-  },
-} satisfies Dictionary

package/src/views/Workspaces/index.tsx

@@ -1,85 +0,0 @@
-import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
-import { useCallback, useEffect, useRef } from 'react'
-import { RightPanelTabs } from '../../components/RightPanelTabs'
-import { useCurrentChat, useWidget, useWidgetState } from '../../context/hooks'
-import { useRightPanel } from '../../right-panel/hooks'
-import { WorkspacesTab } from './WorkspacesTab'
-
-/**
- * Renders the Workspace selection form in the Right Panel if this is the panel that is currently opened.
- */
-export const Workspaces = () => {
-  const t = useTranslate(dictionary)
-  const panel = useWidgetState('panel')
-  const { open } = useRightPanel()
-  const widget = useWidget()
-  const chat = useCurrentChat()
-
-  useEffect(() => {
-    if (panel === 'workspace') open(
-      <WorkspacesPanel key={chat.id} />,
-      { title: t.title, description: t.description, onClose: () => widget.set('panel', undefined) },
-    )
-  }, [panel, t, chat.id])
-  return null
-}
-
-const WorkspacesPanel = () => {
-  const t = useTranslate(dictionary)
-  const chat = useCurrentChat()
-  const allKS = useRef(chat.get('knowledgeSources') ?? [])
-  const agent = useRef(chat.get('agent'))
-  const stack = useRef(chat.get('stack'))
-  const { close } = useRightPanel()
-
-  const onSubmit = useCallback(() => {
-    chat.set('knowledgeSources', allKS.current)
-    chat.set('stack', stack.current)
-    chat.set('agent', agent.current)
-    close()
-  }, [chat])
-
-  useEffect(() => {
-    allKS.current = chat.get('knowledgeSources') ?? []
-    agent.current = chat.get('agent')
-    stack.current = chat.get('stack')
-  }, [chat])
-
-
-  return <RightPanelTabs key={chat.id} tabs={[
-    {
-      title: t.favorites,
-      content: <WorkspacesTab key="favorite" visibility="favorite" allKS={allKS} agent={agent} stack={stack} onSubmit={onSubmit} />,
-    },
-    {
-      title: t.all,
-      content: <WorkspacesTab key="all" visibility="all" allKS={allKS} agent={agent} stack={stack} onSubmit={onSubmit} />,
-    },
-  ]}
-  />
-}
-
-const dictionary = {
-  en: {
-    title: 'Spaces',
-    description: 'By selecting a space, its Knowledge Sources (KSs), Agents, Quick Commands and Stacks Ai will be consulted to generate the answers.',
-    apply: 'Apply',
-    noSearchResults: "Your search didn't yield results.",
-    noSearchResultsDescription: 'Please, try another search term.',
-    noData: 'There are no spaces yet.',
-    noDataDescription: 'Use the AI portal to create new spaces.',
-    all: 'All',
-    favorites: 'Favorites',
-  },
-  pt: {
-    title: 'Spaces',
-    description: 'Ao selecionar um space, seus Knowledge Sources (KSs), Agentes, Quick Commands e Stacks Ai serão consultados para gerar as respostas.',
-    apply: 'Aplicar',
-    noSearchResults: 'Sua busca não produziu resultados',
-    noSearchResultsDescription: 'Por favor, tente outra busca.',
-    noData: 'Ainda não há spaces.',
-    noDataDescription: 'Use o Portal AI para criar novos spaces.',
-    all: 'Todos',
-    favorites: 'Favoritos',
-  },
-} satisfies Dictionary