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

package/src/components/Selector/index.tsx

@@ -0,0 +1,312 @@
+import { FallbackBoundary, IconLink, Text } from '@stack-spot/citric-react'
+import { useKeyboardControls } from '@stack-spot/portal-components'
+import { InfiniteScroll } from '@stack-spot/portal-components/InfiniteScroll'
+import { AgentVisibilityLevel } from '@stack-spot/portal-network'
+import { VisibilityLevelEnum } from '@stack-spot/portal-network/api/ai'
+import { Dictionary, interpolate, useTranslate } from '@stack-spot/portal-translate'
+import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { debounce } from 'lodash'
+import { useCurrentChatState, useWidgetState } from '../../context/hooks'
+import { getUrlToStackSpotAI } from '../../utils/url'
+import { ButtonFavorite } from '../ButtonFavorite'
+import { Fading } from '../Fading'
+import { SelectorBox } from './styled'
+
+type SectionVisibility =  AgentVisibilityLevel | VisibilityLevelEnum
+type SelectorShortcut = '/' | '@'
+
+interface Item {
+  id: string,
+  slug: string,
+  description: string,
+  visibility_level: SectionVisibility,
+}
+
+interface Favorite<T> {
+  /**
+   * A react hook or a simple function that returns the selectable items that have been set as favorite.
+   * 
+   * Supports suspended hooks.
+   * 
+   * @returns the favorite items in the selector.
+   */
+  useFavorites?: () => T[], 
+  onAddFavorite?: (idOrSlug?: string) => Promise<boolean>, 
+  onRemoveFavorite?: (idOrSlug?: string) => Promise<boolean>, 
+  favoriteIsSlug?: boolean,
+}
+
+interface ListProps<T> {
+  filter?: string,
+  visibility?: SectionVisibility,
+  selectorConfig: SelectorConfig<T>,
+  onSelect: (item: T) => void,
+  favorite?: Favorite<T>,
+}
+
+interface ListItemProps<T> extends ListProps<T> {
+  item: T,
+}
+
+interface ContentProps<T> {
+  filter?: string,
+  onClose: () => void,
+  inputRef: React.RefObject<HTMLTextAreaElement | HTMLInputElement>,
+  selectorConfig: SelectorConfig<T>,
+  favorite?: Favorite<T>,
+}
+
+interface PropsUseData<T> { 
+  data: T[],
+  fetchNextPage?: () => void,
+  hasNextPage?: boolean,
+}
+
+interface SelectorConfig<T> {
+  resourceName: string,
+  shortcut: SelectorShortcut,
+  icon: React.ReactElement,
+  regex: RegExp,
+  urlBuilder: (item: T) => string,
+  searchProp: keyof T,
+  isEnabled: boolean,
+  sections: SectionVisibility[],
+  renderComponentItem: FC<T>,
+  onSelect: (item: T) => void,
+  /**
+   * A react hook or a simple function that returns the selectable items.
+   * 
+   * Supports suspended hooks.
+   * 
+   * @returns the data to render in the selector.
+   */
+  useData: (props: {filter?: string, visibility?: SectionVisibility[]}) => PropsUseData<T>,
+}
+
+interface SelectorProps<T> {
+  selectorConfig: SelectorConfig<T>,
+  inputRef: React.RefObject<HTMLTextAreaElement | HTMLInputElement>,
+  favorite?: Favorite<T>,
+}
+
+const ListItem = <T extends Item>({ item, selectorConfig, onSelect, favorite }: ListItemProps<T>) => {
+  const t = useTranslate(dictionary)
+  const { urlBuilder, renderComponentItem } = selectorConfig
+  const linkTitle = interpolate(t.open, item.slug)
+  const listFavorites = favorite?.useFavorites?.()
+  
+  return (
+    <li>
+      <button
+        className="selector"
+        onClick={() => onSelect(item)}
+        onKeyDown={(e) => e.key === 'Enter' && e.preventDefault()}
+        onFocus={(e) => e.target.closest('li')?.classList.add('focus')}
+        onBlur={(e) => e.target.closest('li')?.classList.remove('focus')}
+      >
+        {renderComponentItem(item)}
+      </button>
+      <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>
+  )
+}
+
+const List = <T extends Item>({ selectorConfig, filter, visibility, onSelect, favorite }: ListProps<T>) => {
+  const t = useTranslate(dictionary)
+  const { data: items, fetchNextPage, hasNextPage } = selectorConfig.useData({ filter, visibility: visibility ? [visibility] : undefined })
+
+  if (!items.length && !filter) return <Text className="empty" color="light.700">{interpolate(t.noData, selectorConfig.resourceName)}</Text>
+  if (!items?.length) return <Text className="empty" color="light.700">{interpolate(t.noResults, selectorConfig.resourceName)}</Text>
+
+  return (
+    <ul className="selector-list" id="selector-list">
+      <InfiniteScroll scrollableTarget="selector-list"
+        dataLength={items?.length ?? 0}
+        next={fetchNextPage as any ?? undefined}
+        hasMore={hasNextPage ?? false}>
+        {items?.map((item, i) => (
+          <ListItem 
+            key={`${item.id}${item.visibility_level}${i}`} 
+            item={item} 
+            selectorConfig={selectorConfig} 
+            onSelect={onSelect} 
+            favorite={favorite} 
+          />
+        ))}
+      </InfiniteScroll>
+    </ul>
+  )
+}
+
+const SelectorContent = ({ filter, onClose, selectorConfig, favorite }: ContentProps<any>) => {
+  const t = useTranslate(dictionary)
+  const ref = useRef<HTMLDivElement>(null)
+  const [visibility, setVisibility] = useState<SectionVisibility | undefined>()
+  const isGroupResourcesByScope = useWidgetState('features')?.groupResourcesByScope
+  const { resourceName, icon, onSelect, sections } = selectorConfig
+  const onSelectItem = useCallback((slug: string) => {
+    onSelect(slug)
+    onClose()
+  }, [])
+
+  useKeyboardControls({
+    querySelectors: '.tabs button, button.selector',
+    disableTabBehavior: true,
+    onPressEscape: onClose,
+    onPressArrowLeft: () => (ref.current?.querySelector('.tabs button.active') as HTMLElement)?.focus(),
+    onPressArrowRight: () => (ref.current?.querySelector('button.selector') as HTMLElement)?.focus(),
+    ref,
+  }, [])
+
+  function createSectionItem(action?: SectionVisibility) {
+    return (
+      <li key={action ?? 'all'}>
+        <button className={visibility === action ? 'active' : ''} onFocus={() => setVisibility(action)}>
+          {t[action?.toLowerCase() as keyof typeof t ?? 'all']}
+        </button>
+      </li>
+    )
+  }
+
+  return (
+    <div ref={ref}>
+      <header>
+        {icon}
+        <Text tag="h3">{resourceName}</Text>
+      </header>
+      <div className="body">
+        {isGroupResourcesByScope && (
+          <ul className="tabs">
+            {createSectionItem()}
+            {sections.map(createSectionItem)}
+          </ul>
+        )}
+        <FallbackBoundary message={interpolate(t.error, selectorConfig.resourceName)}>
+          <List filter={filter} visibility={visibility} selectorConfig={selectorConfig} onSelect={onSelectItem} favorite={favorite} />
+        </FallbackBoundary>
+      </div>
+    </div>
+  )
+}
+
+export const Selector = <T, >({ inputRef, selectorConfig, favorite }: SelectorProps<T>) => {
+  const { shortcut, regex, isEnabled } = selectorConfig
+  const [isClosed, setClosed] = useState(false)
+  const selectorRef = useRef<HTMLDivElement>(null)
+  const [debouncedFilter, setDebouncedFilter] = useState<string | undefined>(undefined)
+  const value = useCurrentChatState('nextMessage') ?? ''
+  const filter = useMemo(() => value === shortcut || regex.test(value) ? value.substring(1) : undefined, [value])
+  const shouldRender = isEnabled && filter !== undefined && !isClosed
+ 
+  const debouncedSetFilter = useCallback(
+    debounce((filterValue: string | undefined) => {
+      setDebouncedFilter(filterValue)
+    }, 300),
+    [],
+  )
+  
+  useEffect(() => {
+    debouncedSetFilter(filter)
+    return () => {
+      debouncedSetFilter.cancel()
+    }
+  }, [filter, debouncedSetFilter])
+
+
+  // Resets the closed state whenever the message input is cleared
+  useEffect(() => {
+    if (!value) setClosed(false)
+  }, [value])
+
+  // Creates the following behavior while the user types in the message input:
+  // auto-complete on tab; move focus to the resource panel on press up or down; and close the resource panel on esc.
+  useEffect(() => {
+    function getFirst() {
+      return selectorRef.current?.querySelector('.selector') as HTMLElement | null
+    }
+
+    function onKeyDown(event: Event) {
+      const key = (event as KeyboardEvent).key
+      if (!selectorRef.current) return
+      if (key === 'Tab') {
+        getFirst()?.click()
+        event.preventDefault()
+      } else if (key === 'ArrowDown' || key === 'ArrowUp') {
+        getFirst()?.focus()
+        event.preventDefault()
+      }
+      if (key === 'Escape') {
+        setClosed(true)
+      }
+    }
+
+    inputRef.current?.addEventListener('keydown', onKeyDown)
+    return () => inputRef.current?.removeEventListener('keydown', onKeyDown)
+  }, [])
+
+  // Closes the panel when the user clicks outside the panel or the message input.
+  useEffect(() => {
+    if (!shouldRender) return
+    function onClickOut(e: Event) {
+      const target = e.target as HTMLElement | null
+      if (!selectorRef.current?.contains(target) && !inputRef.current?.contains(target)) setClosed(true)
+    }
+    document.addEventListener('click', onClickOut)
+    return () => document.removeEventListener('click', onClickOut)
+  }, [shouldRender])
+
+  return (
+    <SelectorBox $tabsCount={selectorConfig.sections.length}>
+      <Fading visible={shouldRender} ref={selectorRef} className="box-selector">
+        <SelectorContent
+          favorite={favorite}
+          selectorConfig={selectorConfig}
+          filter={debouncedFilter}
+          onClose={() => setClosed(true)}
+          inputRef={inputRef}
+        />
+      </Fading>
+    </SelectorBox>
+  )
+}
+
+const dictionary = {
+  en: {
+    all: 'All',
+    personal: 'Personal',
+    account: 'Account',
+    shared: 'Shared',
+    'built_in': 'Built-in',
+    'recently_used': 'Recent',
+    workspace: 'Spot',
+    error: 'Could not load the $0s.',
+    noData: 'You don\'t have any $0 yet.',
+    noResults: 'There are no $0s to show here.',
+    open: 'Open this $0 settings in a new tab.',
+    favorite: 'Favorites',
+  },
+  pt: {
+    all: 'Todos',
+    personal: 'Pessoal',
+    account: 'Conta',
+    shared: 'Compartilhado',
+    workspace: 'Spot',
+    'built_in': 'Embutido',
+    'recently_used': 'Recente',
+    error: 'Não foi possível carregar os $0s.',
+    noData: 'Você ainda não possui $0s.',
+    noResults: 'Não $0s para mostrar aqui.',
+    open: 'Abra as configurações deste $0 em uma nova aba.',
+    favorite: 'Favoritos',
+  },
+} satisfies Dictionary

package/src/components/Selector/styled.ts

@@ -0,0 +1,158 @@
+import { theme } from '@stack-spot/portal-theme'
+import { styled } from 'styled-components'
+
+
+export const SelectorBox = styled.div<{ $tabsCount: number }>`
+  position: absolute;
+  bottom: 0;
+
+  .box-selector  {
+    position: absolute;
+    border-radius: 4px;
+    border: 1px solid ${theme.color.light[600]};
+    background-color: ${theme.color.light[400]};
+    box-shadow: 0px 2px 16px 0px #0000005C;
+    display: flex;
+    flex-direction: column;
+    width: 480px;
+    bottom: 54px;
+    left: 0;
+
+    .loading, .error {
+      padding-bottom: 26px;
+      p {
+        width: 200px;
+        text-align: center;
+        line-height: 20px;
+      }
+    }
+
+    .empty {
+      padding-bottom: 26px;
+      width: 200px;
+      text-align: center;
+      line-height: 20px;
+      margin: auto;
+    }
+
+    header {
+      display: flex;
+      flex-direction: row;
+      gap: 8px;
+      align-items: center;
+      padding: 0 8px;
+      margin-bottom: 4px;
+      background-color: ${theme.color.light[500]};
+      height: 40px;
+      h3 {
+        text-transform: uppercase;
+        font-weight: 500;
+        font-size: 12px;
+        margin: 0;
+      }
+    }
+
+    .body {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      align-items: flex-start;
+      height: ${({ $tabsCount }) => 34 + ($tabsCount * 34)}px;
+    }
+
+    ul {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+
+    ul.tabs {
+      display: flex;
+      flex-direction: column;
+      min-width: 100px;
+
+      li {
+        display: flex;
+        flex-direction: column;
+      }
+
+      button {
+        box-sizing: border-box;
+        color: ${theme.color.light[700]};
+        text-align: left;
+        padding: 10px;
+        font-weight: 600;
+        font-size: 12px;
+        transition: background-color 0.3s;
+        border-left: 1px solid transparent;
+        border-top-right-radius: 4px;
+        border-bottom-right-radius: 4px;
+        background-color: transparent;
+        border: none;
+        cursor: pointer;
+        outline: none;
+
+        &:hover, &.active, &:focus {
+          background-color: ${theme.color.light[600]};
+        }
+
+        &.active {
+          border-left: 1px solid ${theme.color.light.contrastText};
+          color: ${theme.color.light.contrastText};
+        }
+      }
+    }
+
+    ul.selector-list {
+      align-self: stretch;
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      overflow-y: auto;
+      flex: 1;
+
+      li {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 8px;
+        padding: 8px;
+        border-radius: 4px;
+
+        &:hover, &.focus {
+          background-color: ${theme.color.light[600]};
+        }
+
+        button.selector {
+          display: flex;
+          flex-direction: column;
+          flex: 1;
+          gap: 4px;
+          border: none;
+          text-align: left;
+          background-color: transparent;
+          text-align: left;
+          outline: none;
+          overflow: hidden;
+          cursor: pointer;
+          padding: 0;
+          
+        .selector-title {
+            font-size: 12px;
+            color: ${theme.color.light.contrastText};
+            font-weight: 500;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            margin: 0;
+          }
+
+         .selector-description {
+            color: ${theme.color.light[700]};
+            font-size: 12px;
+            margin: 0;
+          }
+        }
+      }
+    }
+  }
+`

package/src/components/StackedBadge.tsx

@@ -0,0 +1,77 @@
+import { Text } from '@stack-spot/citric-react'
+import { theme } from '@stack-spot/portal-theme'
+import { DetailedHTMLProps, HTMLAttributes } from 'react'
+import { styled } from 'styled-components'
+import { FastOmit } from 'styled-components/dist/types'
+
+interface Props extends FastOmit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> {
+  label: string,
+  images: { key?: React.Key, name: string, url?: string, icon?: React.ReactElement }[],
+}
+
+const Styled = styled.div`
+  border-radius: 25px;
+  background-color: ${theme.color.light[600]};
+  border: 1px solid ${theme.color.light[500]};
+  color: ${theme.color.light[700]};
+  padding: 2px 7px;
+  display: flex;
+  gap: 5px;
+  align-items: center;
+
+  small {
+    line-height: 0.75rem;
+  }
+
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: row;
+
+    li {
+      border: 1px solid ${theme.color.light[600]};
+      background-color: ${theme.color.light[400]};
+      border-radius: 50%;
+      width: 16px;
+      height: 16px;
+      overflow: hidden;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &:not(:first-child) {
+        margin-left: -12px;
+      }
+    }
+
+    .citric-icon {
+      margin: 1px;
+      font-size: 10px;
+    }
+
+    img, svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+`
+
+export const StackedBadge = ({ label, images, ...props }: Props) => (
+  <Styled {...props}>
+    <Text appearance="microtext1">{label}</Text>
+    <ul>
+      {images.map(
+        ({ key, name, url, icon }, i) => (
+          <li key={key || i}>
+            {url
+              ? <img alt={name} aria-label={name} title={name} src={url} />
+              : <span aria-label={name} title={name}>{icon}</span>
+            }
+          </li>
+        ),
+      )}
+    </ul>
+  </Styled>
+)

package/src/components/TabManager.tsx

@@ -1,7 +1,7 @@
 /* Tabs to select chat and add new chats */
 
-import { TimesMini } from '@citric/icons'
-import { IconButton } from '@citric/ui'
+import { Icon } from '@stack-spot/citric-icons'
+import { Button, 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'
@@ -41,7 +41,9 @@ interface Props<T, Key extends React.Key> {
   renderLabel: (tab: T) => React.ReactElement,
 }
 
+// The size of extra buttons placed after the tabs.
 const EXTRA_BTN_SIZE = 24
+// The margin of extra buttons placed after the tabs.
 const EXTRA_BTN_MARGIN = 8
 
 const Tabs = styled.nav<{ $numberOfExtraButtons: number }>`
@@ -68,14 +70,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)`};
   }
@@ -142,25 +136,16 @@ 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]};
-        }
-      }
     }
   }
 `
 
+/**
+ * Renders and manages a list of tabs. With this, tabs can be selected and removed. Furthermore, extra buttons can be placed after all tabs,
+ * e.g. a button to add more tabs.
+ * 
+ * Used for the chat tabs.
+ */
 export function TabManager<T, Key extends React.Key>(
   { active, tabs, keygen, onRemove, onSelect, renderLabel, buttons = [] }: Props<T, Key>,
 ) {
@@ -176,22 +161,37 @@ 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 appearance="text" icon="TimesMini" aria-label={t.close} title={t.close} onClick={() => onRemove(tab)} />}
     </li>
   )), [tabs, active])
 
-  const extras = useMemo(() => buttons.map(({ label, onClick, icon, className, style }) => (
-    <IconButton
-      key={label}
-      aria-label={label}
-      title={label}
+  const extras = useMemo(() => buttons.map(({
+    ariaLabel, title, label, onClick, group, icon, appearance, size, className, style, disabled }) => label
+    ? <Button 
+      style={{ marginRight: '4px', ...style }}
+      colorScheme="light"
+      size="md"
+      key={ariaLabel} 
+      title={title || label} 
+      onClick={onClick}
+      disabled={disabled}
+    >
+      <Icon group={group} icon={icon as any} />
+      {label} 
+    </Button>
+    : <IconButton
+      key={ariaLabel}
+      group={group}
+      icon={icon as any}
+      aria-label={ariaLabel}
+      title={title}
+      size={size}
       className={listToClass([className, 'extra'])}
       style={style}
       onClick={onClick}
-    >
-      {icon}
-    </IconButton>
-  )), [buttons])
+      appearance={appearance}
+    />), [buttons])
 
   // when a new tab is added, we should scroll to it if there are more tabs that we can show.
   useEffect(() => {
@@ -203,7 +203,7 @@ export function TabManager<T, Key extends React.Key>(
   }, [tabs])
 
   return (
-    <Tabs $numberOfExtraButtons={buttons.length}>
+    <Tabs $numberOfExtraButtons={buttons.length} className="tabs">
       <FadingOverflow className="list-overflow" scroll="arrows" enableHorizontalScrollWithVerticalWheel>
         <ul ref={tabList}>{tabItems}</ul>
       </FadingOverflow>