@stack-spot/ai-chat-widget 0.1.0

package/src/components/FadingOverflow.tsx

@@ -0,0 +1,234 @@
+import { IconBox } from '@citric/core'
+import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from '@citric/icons'
+import { listToClass, theme, WithStyle } from '@stack-spot/portal-theme'
+import { debounce } from 'lodash'
+import { useEffect, useRef } from 'react'
+import { styled } from 'styled-components'
+import { WithChildren } from '../types'
+
+type Side = 'top' | 'right' | 'left' | 'bottom'
+type ScrollType = 'none' | 'wheel' | 'bar' | 'arrows'
+
+interface Props extends WithChildren, WithStyle {
+  scroll?: ScrollType,
+  enableHorizontalScrollWithVerticalWheel?: boolean,
+  sides?: Side[],
+}
+
+const MIN_CHECK_INTERVAL_MS = 20
+const masks = {
+  right: 'linear-gradient(to left, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgba(0, 0, 0) 100%)',
+  left: 'linear-gradient(to right, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgba(0, 0, 0) 100%)',
+  top: 'linear-gradient(to bottom, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgba(0, 0, 0) 100%)',
+  bottom: 'linear-gradient(to top, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgba(0, 0, 0) 100%)',
+  horizontal: 'linear-gradient(to left, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgb(0, 0, 0) max(70%, calc(100% - 100px)), rgba(0, 0, 0, 0) 100%)',
+  vertical: 'linear-gradient(to top, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgb(0, 0, 0) max(70%, calc(100% - 100px)), rgba(0, 0, 0, 0) 100%)',
+}
+
+const OverflowBox = styled.div`
+  &.hidden-scroll-bars::-webkit-scrollbar, &.scroll-arrows ::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+
+  &.scroll-arrows {
+    position: relative;
+
+    > .content {
+      width: 100%;
+    }
+  }
+
+  .scroll-to-left, .scroll-to-right, .scroll-to-top, .scroll-to-bottom {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s;
+
+    ${IconBox} {
+      background-color: ${theme.color.light[300]};
+      border-radius: 50%;
+      width: 16px;
+      height: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    &.visible {
+      opacity: 0.6;
+      pointer-events: auto;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+
+  .scroll-to-left {
+    right: unset;
+    height: unset;
+  }
+  
+  .scroll-to-right {
+    left: unset;
+    height: unset;
+  }
+  
+  .scroll-to-top {
+    bottom: unset;
+    width: unset;
+  }
+  
+  .scroll-to-bottom {
+    top: unset;
+    width: unset;
+  }
+`
+
+const SCROLL_INTERVAL_MS = 20
+const SCROLL_PX = 4
+
+export const FadingOverflow = (
+  { children, scroll = 'none', sides, enableHorizontalScrollWithVerticalWheel, className, ...props }: Props,
+) => {
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!ref.current) return
+    const element = ref.current
+    const fadeTop = !sides || sides.includes('top')
+    const fadeRight = !sides || sides.includes('right')
+    const fadeBottom = !sides || sides.includes('bottom')
+    const fadeLeft = !sides || sides.includes('left')
+    let intervalId: number | undefined
+    const overflow = scroll === 'none' ? 'clip' : 'auto'
+    element.style.overflowX = (fadeLeft || fadeRight) ? overflow : ''
+    element.style.overflowY = (fadeTop || fadeBottom) ? overflow : ''
+    if (scroll === 'arrows' || scroll === 'wheel') element.classList.add('hidden-scroll-bars')
+
+    function stopScrolling() {
+      clearInterval(intervalId)
+    }
+
+    function checkOverflow() {
+      // masking (fading)
+      const overflowsRight = element.clientWidth < element.scrollWidth && element.scrollLeft < (element.scrollWidth - element.clientWidth)
+      const overflowsLeft = element.scrollLeft > 0
+      const overflowsTop = element.clientHeight < element.scrollHeight && element.scrollTop < (element.scrollHeight - element.clientHeight)
+      const overflowsBottom = element.scrollTop > 0
+      const masksToApply: string[] = []
+      if (overflowsLeft && fadeLeft && overflowsRight && fadeRight) masksToApply.push(masks.horizontal)
+      else {
+        if (overflowsRight && fadeRight) masksToApply.push(masks.right)
+        if (overflowsLeft && fadeLeft) masksToApply.push(masks.left)
+      }
+      if (overflowsTop && fadeTop && overflowsBottom && fadeBottom) masksToApply.push(masks.vertical)
+      else {
+        if (overflowsTop && fadeTop) masksToApply.push(masks.top)
+        if (overflowsBottom && fadeBottom) masksToApply.push(masks.bottom)
+      }
+      element.style.maskImage = masksToApply.join(', ')
+
+      // arrow buttons
+      if (scroll !== 'arrows') return
+
+      function startScrolling(side: Side) {
+        stopScrolling()
+        const direction = side === 'bottom' || side === 'top' ? 'scrollTop' : 'scrollLeft'
+        const multiplier = side === 'bottom' || side === 'right' ? 1 : -1
+        intervalId = window.setInterval(() => {
+          element[direction] += SCROLL_PX * multiplier
+        }, SCROLL_INTERVAL_MS)
+      }
+  
+      const startScrollingBySide = {
+        left: () => startScrolling('left'),
+        right: () => startScrolling('right'),
+        top: () => startScrolling('top'),
+        bottom: () => startScrolling('bottom'),
+      }
+
+      const scrollToMaxBySide = {
+        left: () => element.scrollLeft = 0,
+        right: () => element.scrollLeft = element.scrollWidth - element.clientWidth,
+        top: () => element.scrollTop = 0,
+        bottom: () => element.scrollTop = element.scrollHeight - element.clientHeight,
+      }
+  
+      function enableArrowButton(side: Side) {
+        const button = element.parentNode?.querySelector(`.scroll-to-${side}`)
+        if (button?.classList.contains('visible')) return
+        button?.classList.add('visible')
+        button?.addEventListener('mouseenter', startScrollingBySide[side])
+        button?.addEventListener('mouseleave', stopScrolling)
+        button?.addEventListener('click', scrollToMaxBySide[side])
+      }
+  
+      function disableArrowButton(side: Side) {
+        const button = element.parentNode?.querySelector(`.scroll-to-${side}`)
+        if (!button?.classList.contains('visible')) return
+        button?.classList.remove('visible')
+        stopScrolling()
+        button?.removeEventListener('mouseenter', startScrollingBySide[side])
+        button?.removeEventListener('mouseleave', stopScrolling)
+        button?.removeEventListener('click', scrollToMaxBySide[side])
+      }
+      
+      if (overflowsRight && fadeRight) enableArrowButton('right')
+      else disableArrowButton('right')
+      if (overflowsLeft && fadeLeft) enableArrowButton('left')
+      else disableArrowButton('left')
+      if (overflowsTop && fadeTop) enableArrowButton('top')
+      else disableArrowButton('top')
+      if (overflowsBottom && fadeBottom) enableArrowButton('bottom')
+      else disableArrowButton('bottom')
+    }
+
+    const debouncedCheck = debounce(checkOverflow, MIN_CHECK_INTERVAL_MS)
+    const resizeObserver = new ResizeObserver(debouncedCheck)
+    resizeObserver.observe(element)
+    element.addEventListener('scroll', debouncedCheck)
+
+    return () => {
+      stopScrolling()
+      resizeObserver.disconnect()
+      element.removeEventListener('scroll', debouncedCheck)
+    }
+  }, [sides, ref.current, scroll])
+
+  useEffect(() => {
+    if (!enableHorizontalScrollWithVerticalWheel || !ref.current) return
+    const element = ref.current
+
+    function scrollWithWheel(event: WheelEvent) {
+      if (event.deltaY) {
+        element.scrollLeft += event.deltaY
+        event.preventDefault()
+        event.stopPropagation()
+      }
+    }
+
+    element.addEventListener('wheel', scrollWithWheel)
+    return () => element.removeEventListener('wheel', scrollWithWheel)
+  }, [ref.current, enableHorizontalScrollWithVerticalWheel])
+
+  return scroll === 'arrows' ? (
+    <OverflowBox {...props} className={listToClass(['scroll-arrows', className])}>
+      <div className="content" ref={ref}>{children}</div>
+      <div className="scroll-to-left" aria-hidden><IconBox size="xs"><ChevronLeft /></IconBox></div>
+      <div className="scroll-to-right" aria-hidden><IconBox size="xs"><ChevronRight /></IconBox></div>
+      <div className="scroll-to-top" aria-hidden><IconBox size="xs"><ChevronUp /></IconBox></div>
+      <div className="scroll-to-bottom" aria-hidden><IconBox size="xs"><ChevronDown /></IconBox></div>
+    </OverflowBox>
+  ) : <OverflowBox {...props} className={className} ref={ref}>{children}</OverflowBox>
+}

package/src/components/FallbackBoundary/ErrorBoundary.tsx

@@ -0,0 +1,48 @@
+import { ErrorDescription, ErrorFeedback } from '@stack-spot/portal-components/error'
+import { StackspotAPIError } from '@stack-spot/portal-network'
+import { Component } from 'react'
+
+interface State extends ErrorDescription {
+  hasError: boolean,
+}
+
+interface Props {
+  children: React.ReactNode,
+}
+
+/**
+ * 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 })
+  }
+
+  render() {
+    return this.state.hasError
+      ? <ErrorFeedback code={this.state.code} message={this.state.message} />
+      : 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><LoadingCircular /></LoadingBox>
+)

package/src/components/FallbackBoundary/index.tsx

@@ -0,0 +1,15 @@
+import { Suspense } from 'react'
+import { WithChildren } from '../../types'
+import { ErrorBoundary } from './ErrorBoundary'
+import { Loading } from './Loading'
+
+/**
+ * Fallbacks for errors and loadings (suspense).
+ */
+export const FallbackBoundary = ({ children }: WithChildren) => (
+  <ErrorBoundary>
+    <Suspense fallback={<Loading />}>
+      {children}
+    </Suspense>
+  </ErrorBoundary>
+)

package/src/components/HistoryList.tsx

@@ -0,0 +1,16 @@
+/* eslint-disable no-empty-pattern */
+import { WithStyle } from '@stack-spot/portal-theme'
+import { ButtonAction } from '../types'
+
+interface Props<T> extends WithStyle {
+  items: T[],
+  renderLabel: (item: T) => React.ReactElement,
+  getDate: (item: T) => Date,
+  keygen: (item: T) => React.Key,
+  getActions?: (item: T) => ButtonAction[],
+  onSelect?: (item: T) => void,
+}
+
+export function HistoryList<T>({}: Props<T>) {
+  return null
+}

package/src/components/IconInput.tsx

@@ -0,0 +1,70 @@
+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;
+    }
+  }
+`
+
+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/Markdown.tsx

@@ -0,0 +1,53 @@
+/**
+ * Copied from the extension's webview.
+ */
+
+import { Children, Fragment } from 'react'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import { WithChildren } from '../types'
+import { Code, Props as CodeProps } from './Code'
+
+type Props = Omit<CodeProps, 'language'> & WithChildren<string>
+
+const renderP = (child: any, key: number) => (
+  <Fragment key={key}>
+    {typeof child === 'string'
+      ? child.split('\n').map((content, subKey, array) => (
+        <Fragment key={subKey}>
+          {content}
+          {subKey < array.length - 1 ? <br /> : null}
+        </Fragment>
+      )) : child}
+  </Fragment>
+)
+
+export const Markdown = (
+  {
+    onInsertCode,
+    onNewFile,
+    onCopyCode,
+    children,
+  }: Props,
+) => (
+  <>
+    <ReactMarkdown
+      remarkPlugins={[[remarkGfm]]}
+      components={{
+        a: props => <a target="_blank" rel="noopener noreferrer" {...props} />,
+        code: props =>
+          <Code
+            {...props}
+            onInsertCode={onInsertCode}
+            onNewFile={onNewFile}
+            onCopyCode={onCopyCode}
+            showActionBar
+          />,
+        pre: ({ children }) => <>{children}</>,
+        p: ({ children }) => <p>{Children.map(children, renderP)}</p>,
+      }}
+    >
+      {children}
+    </ReactMarkdown>
+  </>
+)

package/src/components/OverlayMenu.tsx

@@ -0,0 +1,10 @@
+/* eslint-disable no-empty-pattern */
+import { WithStyle } from '@stack-spot/portal-theme'
+import { ButtonAction, WithChildren } from '../types'
+
+interface Props extends WithStyle, WithChildren {
+  position?: 'left' | 'top' | 'bottom' | 'right',
+  actions: ButtonAction[],
+}
+
+export const OverlayMenu = ({}: Props) => null

package/src/components/ProgressBar.tsx

@@ -0,0 +1,153 @@
+import { listToClass, theme, WithStyle } from '@stack-spot/portal-theme'
+import { styled } from 'styled-components'
+
+interface Props extends WithStyle {
+  visible?: boolean,
+  shimmer?: boolean,
+  foregroundColor?: string | string[],
+  backgroundColor?: string | string[],
+  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(', ')})`
+}
+
+const SHIMMER_PADDING = '10px'
+
+const Styled = styled.div<{ $bg: string[], $fg: string[], $shimmer: string[] }>`
+  margin: 7px 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: 33%;
+      height: 100%;
+      background: ${({ $fg }) => gradientFromColorArray($fg)};
+      animation: slide 3s infinite forwards;
+    }
+
+    @keyframes slide {
+      from {
+        margin-left: -33%;
+      }
+      to {
+        margin-left: 100%;
+      }
+    }
+  }
+`
+
+export const ProgressBar = ({
+  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="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}>
+      {result}
+    </Styled>
+  )
+}

package/src/components/QuickStartButton.tsx

@@ -0,0 +1,51 @@
+import { IconBox, Text } from '@citric/core'
+import { theme, WithStyle } from '@stack-spot/portal-theme'
+import { styled } from 'styled-components'
+import { ButtonAction } from '../types'
+
+interface Props extends ButtonAction, WithStyle {
+  background?: string,
+}
+
+const QuickButton = styled.button<{ $color?: string, $bg?: string }>`
+  display: flex;
+  flex-direction: column;
+  padding: 12px;
+  gap: 12px;
+  background-color: ${theme.color.light[500]};
+  border: none;
+  color: inherit;
+  flex: 1;
+  border-radius: 4px;
+  border: 2px solid;
+  border-color: ${theme.color.light[500]};
+  transition: border-color 0.3s;
+  cursor: pointer;
+  text-align: left;
+
+  &:hover {
+    border-color: ${theme.color.light[600]};
+  }
+  
+  i {
+    border-radius: 2px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: ${({ $bg }) => $bg || 'transparent'};
+    ${({ $color }) => $color
+    ? `
+      svg {
+        fill: ${$color};
+      }`
+    : ''
+};
+  }
+`
+
+export const QuickStartButton = ({ label, onClick, background, className, color, icon, style }: Props) => (
+  <QuickButton className={className} style={style} onClick={onClick} $color={color} $bg={background}>
+    <IconBox aria-hidden>{icon}</IconBox>
+    <Text>{label}</Text>
+  </QuickButton>
+)