@stack-spot/ai-chat-widget 1.37.0-beta.1 → 2.0.0-betacitric.2

package/src/components/Accordion.tsx

@@ -1,75 +0,0 @@
-/* Copiar do EDP ou usar o AnimatedHeight da lib de components */
-
-import { ChevronDown } from '@citric/icons'
-import { IconButton } from '@citric/ui'
-import { AnimatedHeight } from '@stack-spot/portal-components/AnimatedHeight'
-import { theme, WithStyle } from '@stack-spot/portal-theme'
-import React, { useState } from 'react'
-import { styled } from 'styled-components'
-import { WithChildren } from '../types'
-
-interface Props extends WithStyle, Required<WithChildren> {
-  /**
-   * The header of the accordion (always rendered). The body (hidden part) must be passed as the children.
-   */
-  header: React.ReactNode,
-  /**
-   * Whether or not to start expanded.
-   * @default false
-   */
-  startExpanded?: boolean,
-}
-
-const StyledAccordion = styled.div`
-  > header {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    padding: 10px;
-    background-color: ${theme.color.light[400]}; 
-
-    > button {
-      transition: transform 0.3s ease-out;
-      background: transparent;
-      border: none;
-      padding: 0;
-
-      &:hover {
-        background: transparent;
-      }
-
-      svg {
-        width: 16px;
-        height: 16px;
-        margin: 4px;
-      }
-    }
-
-    &.expanded > button {
-      transform: rotate(180deg);
-    }
-  }
-
-  > .accordion-content {
-    padding: 10px;
-  }
-`
-
-/**
- * A component that can have it's content shown or hidden (animated).
- */
-export const Accordion = ({ children, header, className, startExpanded, style }: Props) => {
-  const [expanded, setExpanded] = useState(startExpanded)
-  return (
-    <AnimatedHeight style={style} className={className} outerStyle={{ width: '100%' }}>
-      <StyledAccordion>
-        <header className={expanded ? 'expanded' : ''}>
-          {header}
-          <IconButton onClick={() => setExpanded(v => !v)}><ChevronDown /></IconButton>
-        </header>
-        {expanded ? <div className="accordion-content">{children}</div> : null}
-      </StyledAccordion>
-    </AnimatedHeight>
-  )
-}

package/src/components/FallbackBoundary/ErrorBoundary.tsx

@@ -1,71 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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/IconInput.tsx

@@ -1,73 +0,0 @@
-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/OverlayMenu.tsx

@@ -1,133 +0,0 @@
-/* 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

@@ -1,183 +0,0 @@
-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/Tooltip/Tooltip.tsx

@@ -1,78 +0,0 @@
-/* eslint-disable react/display-name */
-import { Text } from '@citric/core'
-import { WithStyle } from '@stack-spot/portal-theme'
-import { forwardRef } from 'react'
-import { WithChildren } from '../../types'
-import { useTooltip } from './context'
-import { DefaultTooltip } from './style'
-import { TooltipPosition } from './types'
-
-interface Props extends WithChildren, WithStyle {
-  /**
-   * The content of the tooltip. Can be either a string or a Rect Element.
-   */
-  content: React.ReactNode,
-  /**
-   * Where to position the tooltip relative to the element that triggered it.
-   */
-  position?: TooltipPosition,
-  /**
-   * A tooltip can be triggered either by hovering an element or by clicking it.
-   * @default 'hover'
-   */
-  triggeredBy?: 'click' | 'hover',
-  /**
-   * If true, no style is applied to the tooltip, letting you customize it however you want to.
-   */
-  custom?: boolean,
-  /**
-   * Function to run whenever the tooltip is shown.
-   */
-  onShow?: () => void,
-  /**
-   * Function to run whenever the tooltip is hidden.
-   */
-  onHide?: () => void,
-}
-
-/**
- * Shows a tooltip for its children. This tooltip element is always reused and placed at a root level in order to not be cut out by
- * hidden overflows in the children and its ascendants.
- */
-export const Tooltip = forwardRef<HTMLDivElement, Props>((
-  { content, custom, position, triggeredBy = 'hover', onHide, onShow, children, className, style },
-  ref,
-) => {
-  const api = useTooltip()
-
-  async function show(e: React.UIEvent, hideOnClickOutside?: boolean) {
-    await api.show({
-      content: custom ? content : <DefaultTooltip><Text appearance="microtext1">{content}</Text></DefaultTooltip>,
-      anchor: e.target as HTMLElement,
-      position,
-      hideOnClickOutside,
-    })
-    onShow?.()
-  }
-
-  function hide() {
-    api.hide()
-    onHide?.()
-  }
-
-  return (
-    <div
-      {...(triggeredBy === 'hover'
-        ? { onMouseEnter: show, onMouseLeave: hide }
-        : { onClick: (e) => show(e, true), onKeyDown: (e) => e.key === 'Enter' && show(e, true) }
-      )}
-      className={className}
-      style={style}
-      tabIndex={triggeredBy === 'click' ? 0 : undefined}
-      role={triggeredBy === 'click' ? 'button' : undefined}
-      ref={ref}
-    >
-      {children}
-    </div>
-  )
-})