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

package/src/components/FallbackBoundary/ErrorBoundary.tsx

@@ -0,0 +1,71 @@
+import { IconBox, Text } from '@citric/core'
+import { TimesCircle } from '@citric/icons'
+import { ErrorDescription, ErrorFeedback } from '@stack-spot/portal-components/error'
+import { StackspotAPIError } from '@stack-spot/portal-network'
+import { Component } from 'react'
+import { styled } from 'styled-components'
+
+interface State extends ErrorDescription {
+  hasError: boolean,
+}
+
+interface Props {
+  mini?: boolean,
+  message?: string,
+  children: React.ReactNode,
+}
+
+const ErrorBox = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`
+
+/**
+ * An Error Boundary that renders an ErrorFeedback instead of its content if any of its children throws.
+ * 
+ * To customize what properties are passed to the ErrorFeedback component, setup an error descriptor for the ErrorManager class. If you're
+ * using the component `Layout` or `RawLayout`, you can use the property `errorDescriptor`.
+ * 
+ * To run an error handler every time an error is catch by this boundary, setup an error handler for the ErrorManager class. If you're
+ * using the component `Layout` or `RawLayout`, you can use the property `onError`.
+ */
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props)
+    this.state = { hasError: false }
+  }
+
+  static getDerivedStateFromError(error: any) {
+    const message = error instanceof StackspotAPIError ? error.translate() : (error.message ?? `${error}`)
+    const code = error instanceof StackspotAPIError ? error.status : undefined
+    return { hasError: true, message, code }
+  }
+
+  componentDidCatch(error: any, errorInfo: any) {
+    // eslint-disable-next-line no-console
+    console.error(error, errorInfo)
+  }
+
+  componentDidUpdate(prevProps: Readonly<Props>) {
+    if (this.props.children !== prevProps.children) this.setState({ hasError: false })
+  }
+
+  private renderError() {
+    return this.props.mini
+      ? (
+        <ErrorBox className="error">
+          <IconBox size="lg" colorIcon="danger.500"><TimesCircle /></IconBox>
+          <Text colorScheme="light.700">{this.props.message || this.state.message}</Text>
+        </ErrorBox>
+      )
+      : <ErrorFeedback className="error" code={this.state.code} message={this.props.message || this.state.message} />
+  }
+
+  render() {
+    return this.state.hasError ? this.renderError() : this.props.children
+  }
+}

package/src/components/FallbackBoundary/Loading.tsx

@@ -0,0 +1,14 @@
+import { LoadingCircular } from '@citric/ui'
+import styled from 'styled-components'
+
+const LoadingBox = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
+
+export const Loading = () => (
+  <LoadingBox className="loading"><LoadingCircular /></LoadingBox>
+)

package/src/components/FallbackBoundary/index.tsx

@@ -0,0 +1,26 @@
+import { Suspense } from 'react'
+import { WithChildren } from '../../types'
+import { ErrorBoundary } from './ErrorBoundary'
+import { Loading } from './Loading'
+
+interface Props extends WithChildren {
+  /**
+   * Use this to show errors in small spaces.
+   */
+  mini?: boolean,
+  /**
+   * Replaces the error message with this text.
+   */
+  message?: string,
+}
+
+/**
+ * Fallbacks for errors and loadings (suspense).
+ */
+export const FallbackBoundary = ({ children, mini, message }: Props) => (
+  <ErrorBoundary mini={mini} message={message}>
+    <Suspense fallback={<Loading />}>
+      {children}
+    </Suspense>
+  </ErrorBoundary>
+)

package/src/components/FileDescription.tsx

@@ -1,5 +1,6 @@
-import { Icon } from '@stack-spot/citric-icons'
-import { IconButton, ProgressCircular, Text } from '@stack-spot/citric-react'
+import { IconBox, Text } from '@citric/core'
+import { Document, Sync, TimesMini } from '@citric/icons'
+import { IconButton, LoadingCircular } from '@citric/ui'
 import { theme } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { styled } from 'styled-components'
@@ -78,26 +79,21 @@ export const FileDescription = ({ fileName, icon, status, onRemove, onRetry }: F
   return (
     <Styled className={status} aria-busy={status === 'pending'}>
       <div className="image">
-        {icon ?? <Icon icon="Document" />}
+        {icon ?? <IconBox><Document /></IconBox>}
         {status === 'pending' && <div className="status" aria-label={t.loading}>
-          <ProgressCircular size="xs" />
+          <LoadingCircular size="xs" />
         </div>}
         {status === 'error' && <div className="status" aria-label={t.error}>
-          <IconButton icon="Sync" appearance="circle" color="danger" title={t.retry} aria-label={t.retry} onClick={onRetry} />
+          <IconButton appearance="circle" color="danger" title={t.retry} aria-label={t.retry} onClick={onRetry}><Sync /></IconButton>
         </div>}
       </div>
       <div className="details">
         <Text appearance="microtext1" className="name" title={name}>{name}</Text>
-        <Text appearance="microtext1" color="light.700">{extension.toUpperCase()}</Text>
+        <Text appearance="microtext1" colorScheme="light.700">{extension.toUpperCase()}</Text>
       </div>
-      {onRemove && <IconButton
-        icon="TimesMini"
-        onClick={onRemove}
-        title={t.remove}
-        arial-label={`${t.remove} ${name}`}
-        style={{ alignSelf: 'start' }}
-        size="xs"
-      />}
+      {onRemove && <IconButton onClick={onRemove} title={t.remove} aria-label={`${t.remove} ${name}`}>
+        <TimesMini />
+      </IconButton>}
     </Styled>
   )
 }

package/src/components/HistoryList.tsx

@@ -1,4 +1,4 @@
-import { Text } from '@stack-spot/citric-react'
+import { Text } from '@citric/core'
 import { theme, WithStyle } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { groupBy, map } from 'lodash'

package/src/components/IconInput.tsx

@@ -0,0 +1,73 @@
+import { IconBox } from '@citric/core'
+import { listToClass, theme } from '@stack-spot/portal-theme'
+import { useMemo, useState } from 'react'
+import { styled } from 'styled-components'
+
+interface Props extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+  icon: React.ReactElement,
+  onChange?: (value: string) => void,
+}
+
+const InputBox = styled.div`
+  display: flex;
+  flex-direction: row;
+  transition: border-color 0.3s, box-shadow 0.3s;
+  border: 1px solid ${theme.color.light[600]};
+  border-radius: 0.25rem;
+  background-color: ${theme.color.light[300]};
+  overflow: hidden;
+  flex-shrink: 0;
+
+  &.focused {
+    border-color: ${theme.color.primary[500]};
+    box-shadow: 0 0 0 1px ${theme.color.primary[500]};
+  }
+
+  &.disabled {
+      background-color: ${theme.color.light[500]};
+    }
+
+  ${IconBox} {
+    width: 40px;
+    height: 40px;
+    border-radius: 0;
+    background-color: ${theme.color.light[600]};
+  }
+
+  input {
+    padding: 8px;
+    border: none;
+    background-color: transparent;
+    flex: 1;
+    color: ${theme.color.light.contrastText};
+
+    &:focus {
+      outline: none;
+    }
+  }
+`
+
+/**
+ * A text input with an icon at the left side.
+ */
+export const IconInput = ({ icon, onChange, style, className, disabled, onFocus, onBlur, ...props }: Props) => {
+  const [focused, setFocused] = useState(false)
+
+  const { focus, blur } = useMemo(() => ({
+    focus: (e: React.FocusEvent<HTMLInputElement, Element>) => {
+      setFocused(true)
+      onFocus?.(e)
+    },
+    blur: (e: React.FocusEvent<HTMLInputElement, Element>) => {
+      setFocused(false)
+      onBlur?.(e)
+    },
+  }), [])
+
+  return (
+    <InputBox style={style} className={listToClass([className, focused && !disabled && 'focused', disabled && 'disabled'])}>
+      <IconBox>{icon}</IconBox>
+      <input {...props} disabled={disabled} onFocus={focus} onBlur={blur} onChange={e => onChange?.(e.target.value)} />
+    </InputBox>
+  )
+}

package/src/components/ListResource.tsx

@@ -1,4 +1,4 @@
-import { Row, Text } from '@stack-spot/citric-react'
+import { Box, Flex, Text } from '@citric/core'
 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)}>
-          <Row>
+          <Flex alignItems="center">
             {renderBeforeElement?.(listItem)}
             {content}
             {renderAfterElement?.(listItem)}
-          </Row>
+          </Flex>
         </li>
       )
     }), [list])
     
   return (
-    <ul style={{ margin: 0, padding: 0, width: '100%', ...style }} className={className}>
+    <Box as="ul" m={0} p={0} w={12} style={style} className={className}>
       {items}
-    </ul>
+    </Box>
   )
 }

package/src/components/Markdown.tsx

@@ -32,7 +32,7 @@ export const Markdown = (
 ) => (
   <>
     <ReactMarkdown
-      className="markdown apply-citric"
+      className="markdown"
       remarkPlugins={[[remarkGfm]]}
       components={{
         a: props => <a target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'underline' }} {...props} />,

package/src/components/Modal.tsx

@@ -1,4 +1,6 @@
-import { IconButton, Text } from '@stack-spot/citric-react'
+import { Text } from '@citric/core'
+import { Times } from '@citric/icons'
+import { IconButton } from '@citric/ui'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
@@ -17,7 +19,7 @@ const ModalContent = ({ title, children, onClose }: Omit<Props, 'open'>) => {
     <div className="chat-modal">
       <header>
         {typeof title === 'string' ? <Text appearance="h6">{title}</Text> : title}
-        <IconButton icon="Times" aria-label={t.close} title={t.close} onClick={onClose} />
+        <IconButton aria-label={t.close} title={t.close} appearance="circle" onClick={onClose}><Times /></IconButton>
       </header>
       <article>{children}</article>
     </div>

package/src/components/OverlayMenu.tsx

@@ -0,0 +1,133 @@
+/* eslint-disable react/display-name */
+import { IconBox, Text } from '@citric/core'
+import { useKeyboardControls } from '@stack-spot/portal-components'
+import { theme, WithStyle } from '@stack-spot/portal-theme'
+import { forwardRef, RefObject, useCallback, useRef } from 'react'
+import { styled } from 'styled-components'
+import { ButtonAction, WithChildren } from '../types'
+import { Tooltip } from './Tooltip'
+import { useTooltip } from './Tooltip/context'
+import { TooltipPosition } from './Tooltip/types'
+
+interface Props extends WithStyle, WithChildren {
+  /**
+   * The position of the menu relative to its children.
+   */
+  position?: TooltipPosition,
+  /**
+   * The actions of the menu.
+   */
+  actions: ButtonAction[],
+}
+
+interface MenuProps {
+  /**
+   * The actions of the menu.
+   */
+  actions: ButtonAction[],
+  /**
+   * A reference to the HTML element that triggered the menu.
+   */
+  trigger: RefObject<HTMLDivElement>,
+}
+
+const MenuList = styled.ul`
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  border-radius: 8px;
+  background-color: ${theme.color.light[400]};
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  > li {
+    display: flex;
+    flex-direction: column;
+
+    > button {
+      padding: 8px 12px;
+      transition: background-color 0.2s;
+      cursor: pointer;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 8px;
+      background-color: transparent;
+      border: none;
+      outline: none;
+
+      &:hover, &:focus {
+        background-color: ${theme.color.light[500]};
+      }
+    }
+  }
+`
+
+const StyledButton = styled.button<{ $color: string | undefined }>`
+  color: ${({ $color }) => $color || theme.color.light.contrastText};
+
+  svg {
+    fill: ${({ $color }) => $color || theme.color.light.contrastText};
+  }
+`
+
+const Menu = ({ actions, trigger }: MenuProps) => {
+  const tooltip = useTooltip()
+  const ref = useRef<HTMLUListElement>(null)
+
+  useKeyboardControls({
+    querySelectors: 'button',
+    onPressEscape: () => {
+      tooltip.hide()
+      trigger.current?.focus()
+    },
+    ref,
+  }, [])
+
+  return (
+    <MenuList ref={ref}>
+      {actions.map(({ label, onClick, className, color, icon, style }) => (
+        <li key={label} className={className} style={style}>
+          <StyledButton $color={color} onClick={() => {
+            onClick()
+            tooltip.hide()
+          }}>
+            <IconBox>{icon}</IconBox>
+            <Text>{label}</Text>
+          </StyledButton>
+        </li>
+      ))}
+    </MenuList>
+  )
+}
+
+/**
+ * A floating menu that shows up when the user clicks the children.
+ * 
+ * This uses the tooltip component to build the menu.
+ */
+export const OverlayMenu = forwardRef<HTMLDivElement, Props>(({ actions, children, className, position, style }, externalRef) => {
+  const localRef = useRef<HTMLDivElement>(null)
+  const ref = externalRef as RefObject<HTMLDivElement> ?? localRef
+  const tooltip = useTooltip()
+
+  const onShow = useCallback(() => {
+    tooltip.tooltipRef.current?.querySelector('button')?.focus()
+  }, [])
+
+  return (
+    <Tooltip
+      content={<Menu actions={actions} trigger={ref} />}
+      custom
+      position={position}
+      className={className}
+      style={style}
+      triggeredBy="click"
+      onShow={onShow}
+      ref={ref}
+    >
+      {children}
+    </Tooltip>
+  )
+})

package/src/components/ProgressBar.tsx

@@ -0,0 +1,183 @@
+import { listToClass, theme, WithStyle } from '@stack-spot/portal-theme'
+import { styled } from 'styled-components'
+
+interface Props extends WithStyle {
+  /**
+   * Apply animation effects to the progress bar.
+   */
+  animate?: boolean,
+  /**
+   * Whether or not the progress bar is visible.
+   */
+  visible?: boolean,
+  /**
+   * When true, the progress bar becomes very colorful and bright.
+   */
+  shimmer?: boolean,
+  /**
+   * Color to use in the progress bar that appears in the foreground. Arrays create linear gradients.
+   * @default primary.500 if shimmer is false, white otherwise.
+   */
+  foregroundColor?: string | string[],
+  /**
+   * Color to use in the progress bar that appears in the background. Arrays create linear gradients.
+   * @default light.500 if shimmer is false, a transparent white otherwise.
+   */
+  backgroundColor?: string | string[],
+  /**
+   * Only useful if `shimmer` is true. This allows to customize the colors in the shimmering effect. Arrays create linear gradients.
+   * @default ['#ff6633', '#d668cd', '#ff6633', '#FFF8', '#299cf4']
+   */
+  shimmerColor?: string | string[],
+}
+
+function gradientFromColorArray(colors: string[]) {
+  if (colors.length === 1) return colors[0]
+  const step = 100 / (colors.length - 1)
+  const partials: string[] = []
+  let current = 0
+  for (const color of colors) {
+    partials.push(`${color} ${Math.ceil(current)}%`)
+    current += step
+  }
+  return `linear-gradient(to right, ${partials.join(', ')})`
+}
+
+// the shimmering effect requires more space
+const SHIMMER_PADDING = '10px'
+
+const Styled = styled.div<{ $bg: string[], $fg: string[], $shimmer: string[], $animate?: boolean }>`
+  /* margin: ${({ $shimmer }) => $shimmer.length > 0 ? '7px 0' : '0'}; */
+  opacity: 0;
+  transition: opacity 0.5s;
+
+  &.visible {
+    opacity: 1;
+  }
+
+  .shimmer {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: 10px;
+    position: relative;
+    padding: 0 ${SHIMMER_PADDING};
+    margin: 3px 0;
+
+    .progress-glow {
+      filter: blur(2px);
+      position: absolute;
+      top: 0;
+      left: ${SHIMMER_PADDING};
+      bottom: 0;
+      right: ${SHIMMER_PADDING};
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      overflow: hidden;
+
+      &::before {
+        content: '';
+        height: 3px;
+        display: block;
+        width: 33%;
+        display: block;
+        animation: slide 3s infinite forwards;
+        background: ${({ $fg }) => gradientFromColorArray($fg)};
+      }
+    }
+
+    .colors {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      overflow: hidden;
+      filter: blur(10px);
+
+      ${({ $shimmer }) => `
+        &:before {
+          content: '';
+          position: absolute;
+          top: 0;
+          bottom: 0;
+          width: ${$shimmer.length * 100}%;
+          background: ${gradientFromColorArray($shimmer)};
+          ${$shimmer.length > 2 ? `animation: shimmer-slide ${$shimmer.length}s ease-in infinite alternate;` : ''}
+        }
+          
+        @keyframes shimmer-slide {
+          from {
+            left: 0;
+          }
+          to {
+            left: -${($shimmer.length - 1) * 100}%;
+          }
+        }
+      `}
+    }
+  }
+
+  .progress-bar {
+    height: 2px;
+    width: 100%;
+    background: ${({ $bg }) => gradientFromColorArray($bg)};
+    position: relative;
+    overflow-x: clip;
+
+    &:before {
+      content: '';
+      display: block;
+      width: 100%;
+      height: 100%;
+      background: ${({ $fg, $animate, $bg }) => $animate ? gradientFromColorArray($fg) : $bg};
+      animation: ${({ $animate }) => $animate ? 'slide .5s infinite forwards' : 'none'};
+    }
+
+    @keyframes slide {
+      from {
+        margin-left: -100%;
+      }
+      to {
+        margin-left: 100%;
+      }
+    }
+  }
+`
+
+/**
+ * A progress bar with indefinite progress report. This renders a narrower bar on top of larger one that animates from the left to the
+ * right.
+ */
+export const ProgressBar = ({
+  animate,
+  visible = true,
+  shimmer,
+  backgroundColor = shimmer ? 'rgba(255, 255, 255, 0.4)' : theme.color.light[500],
+  foregroundColor = shimmer ? ['#FFF0', '#FFF', '#FFF0'] : theme.color.primary[500],
+  shimmerColor = ['#ff6633', '#d668cd', '#ff6633', '#FFF8', '#299cf4'],
+  className,
+  style,
+}: Props) => {
+  const $bg = Array.isArray(backgroundColor) ? backgroundColor : [backgroundColor]
+  const $fg = Array.isArray(foregroundColor) ? foregroundColor : [...$bg, foregroundColor, ...$bg]
+  const $shimmer = Array.isArray(shimmerColor) ? shimmerColor : [shimmerColor]
+  const progress = <div className="progress-bar"></div>
+  const result = shimmer 
+    ? (
+      <div className={listToClass([shimmer && 'shimmer'])}>
+        <div className="colors"></div>
+        <div className="progress-glow"></div>
+        {progress}
+      </div>
+    )
+    : progress
+  return (
+    <Styled 
+      className={listToClass([className, visible && 'visible'])} 
+      style={style} $fg={$fg} $bg={$bg} $shimmer={$shimmer} $animate={animate}>
+      {result}
+    </Styled>
+  )
+}

package/src/components/QuickStartButton.tsx

@@ -1,13 +1,12 @@
-import { Icon } from '@stack-spot/citric-icons'
-import { Button, Text } from '@stack-spot/citric-react'
+import { Button, IconBox, Text } from '@citric/core'
 import { WithStyle } from '@stack-spot/portal-theme'
 import { ButtonAction } from '../types'
 
-type Props = ButtonAction & WithStyle
+interface Props extends ButtonAction, WithStyle { }
 
-export const QuickStartButton = ({ label, onClick, className, group, icon, style }: Props) => {
+export const QuickStartButton = ({ label, onClick, className, icon, style }: Props) => {
   const content = <>
-    {icon && <Icon group={group} icon={icon} aria-hidden />}
+    {icon && <IconBox color="light" aria-hidden>{icon}</IconBox>}
     <Text nowrapEllipsis>{label}</Text>
   </>
 

package/src/components/RightPanelForm.tsx

@@ -1,9 +1,10 @@
-import { FallbackBoundary } from '@stack-spot/citric-react'
+import { Card } from '@citric/ui'
 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;
@@ -13,7 +14,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;
@@ -51,30 +52,22 @@ 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;
-        }
-      }
-    }
   }
 
-  .filtered-out {
+  li.filtered-out {
     opacity: 0.5;
   }
+
+  ${Card} svg {
+    fill: transparent;
+  }
 `
 
 /**