@stack-spot/ai-chat-widget 0.10.0 → 1.0.0

package/src/components/AdaptiveTextArea.tsx

@@ -1,5 +1,6 @@
+/* eslint-disable react/display-name */
 import { Textarea } from '@citric/core'
-import { useEffect, useRef } from 'react'
+import { forwardRef, useEffect, useRef } from 'react'
 import { PropsOf } from '../types'
 
 interface Props extends PropsOf<typeof Textarea> {
@@ -8,8 +9,12 @@ interface Props extends PropsOf<typeof Textarea> {
   maxHeight?: number,
 }
 
-export const AdaptiveTextArea = ({ value, onIncreaseSize, onResetSize, maxHeight, style, ...props }: Props) => {
-  const ref = useRef<HTMLTextAreaElement>(null)
+export const AdaptiveTextArea = forwardRef<HTMLTextAreaElement, Props>((
+  { value, onIncreaseSize, onResetSize, maxHeight, style, ...props },
+  externalRef,
+) => {
+  const localRef = useRef<HTMLTextAreaElement>(null)
+  const ref = externalRef as React.RefObject<HTMLTextAreaElement> ?? localRef
 
   useEffect(() => {
     if (!ref.current) return
@@ -31,4 +36,4 @@ export const AdaptiveTextArea = ({ value, onIncreaseSize, onResetSize, maxHeight
   }, [value, maxHeight])
 
   return <Textarea {...props} ref={ref} value={value} style={{ ...style, maxHeight }} />
-}
+})

package/src/components/AutoFocus.tsx

@@ -0,0 +1,20 @@
+/* eslint-disable react/display-name */
+import { forwardRef, RefObject, useEffect, useRef } from 'react'
+
+interface Props extends React.HTMLAttributes<HTMLDivElement> {
+  delay?: number,
+}
+
+export const AutoFocus = forwardRef<HTMLDivElement, Props>(({ children, delay = 0, ...props }, externalRef) => {
+  const localRef = useRef<HTMLDivElement>(null)
+  const ref = externalRef as RefObject<HTMLDivElement> ?? localRef
+
+  useEffect(() => {
+    setTimeout(() => {
+      // fixme: we should actually call `focusFirstChild` from the component lib, but, it's bugged
+      (ref.current?.querySelector('a, button, input, select, textarea') as HTMLElement)?.focus()
+    }, delay)
+  }, [])
+
+  return <div ref={ref} {...props}>{children}</div>
+})

package/src/components/Fading.tsx

@@ -0,0 +1,46 @@
+/* eslint-disable react/display-name */
+import { WithStyle } from '@stack-spot/portal-theme'
+import { forwardRef, useEffect, useRef, useState } from 'react'
+import { WithChildren } from '../types'
+
+interface Props extends WithChildren, WithStyle {
+  visible: boolean,
+  /**
+   * Duration of the animation in ms.
+   * @default 300
+   */
+  duration?: number,
+  onFadeIn?: () => void,
+  onFadeOut?: () => void,
+}
+
+export const Fading = forwardRef<HTMLDivElement, Props>((
+  { visible, children, duration = 300, onFadeIn, onFadeOut, className, style },
+  ref,
+) => {
+  const [isOpaque, setOpaque] = useState(visible)
+  const [isRendered, setRendered] = useState(visible)
+  const previous = useRef(visible)
+  const timeout = useRef<number[]>([])
+  const opacity: React.CSSProperties = { transition: `opacity ${duration / 1000}s`, opacity: isOpaque ? 1 : 0 }
+
+  useEffect(() => {
+    if (previous.current === visible) return
+    timeout.current.forEach(window.clearTimeout)
+    timeout.current = []
+    if (visible) {
+      setRendered(true)
+      timeout.current.push(window.setTimeout(() => setOpaque(true), 0))
+      if (onFadeIn) timeout.current.push(window.setTimeout(onFadeIn, duration))
+    } else {
+      setOpaque(false)
+      timeout.current.push(window.setTimeout(() => {
+        setRendered(false)
+        onFadeOut?.()
+      }, duration))
+    }
+    previous.current = visible
+  }, [visible])
+
+  return isRendered ? <div ref={ref} className={className} style={{ ...style, ...opacity }}>{children}</div> : null
+})

package/src/components/FallbackBoundary/ErrorBoundary.tsx

@@ -1,15 +1,29 @@
+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.
  * 
@@ -40,9 +54,18 @@ export class ErrorBoundary extends Component<Props, State> {
     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
-      ? <ErrorFeedback code={this.state.code} message={this.state.message} />
-      : this.props.children
+    return this.state.hasError ? this.renderError() : this.props.children
   }
 }

package/src/components/FallbackBoundary/Loading.tsx

@@ -10,5 +10,5 @@ const LoadingBox = styled.div`
 `
 
 export const Loading = () => (
-  <LoadingBox><LoadingCircular /></LoadingBox>
+  <LoadingBox className="loading"><LoadingCircular /></LoadingBox>
 )

package/src/components/FallbackBoundary/index.tsx

@@ -3,11 +3,16 @@ import { WithChildren } from '../../types'
 import { ErrorBoundary } from './ErrorBoundary'
 import { Loading } from './Loading'
 
+interface Props extends WithChildren {
+  mini?: boolean,
+  message?: string,
+}
+
 /**
  * Fallbacks for errors and loadings (suspense).
  */
-export const FallbackBoundary = ({ children }: WithChildren) => (
-  <ErrorBoundary>
+export const FallbackBoundary = ({ children, mini, message }: Props) => (
+  <ErrorBoundary mini={mini} message={message}>
     <Suspense fallback={<Loading />}>
       {children}
     </Suspense>

package/src/components/OverlayMenu.tsx

@@ -1,7 +1,9 @@
+/* eslint-disable react/display-name */
 /* eslint-disable no-empty-pattern */
 import { IconBox, Text } from '@citric/core'
+import { useKeyboardControls } from '@stack-spot/portal-components'
 import { theme, WithStyle } from '@stack-spot/portal-theme'
-import { useMemo } from 'react'
+import { forwardRef, RefObject, useCallback, useRef } from 'react'
 import { styled } from 'styled-components'
 import { ButtonAction, WithChildren } from '../types'
 import { Tooltip } from './Tooltip'
@@ -13,6 +15,11 @@ interface Props extends WithStyle, WithChildren {
   actions: ButtonAction[],
 }
 
+interface MenuProps {
+  actions: ButtonAction[],
+  trigger: RefObject<HTMLDivElement>,
+}
+
 const MenuList = styled.ul`
   margin: 0;
   padding: 0;
@@ -37,8 +44,9 @@ const MenuList = styled.ul`
       gap: 8px;
       background-color: transparent;
       border: none;
+      outline: none;
 
-      &:hover {
+      &:hover, &:focus {
         background-color: ${theme.color.light[500]};
       }
     }
@@ -53,25 +61,57 @@ const StyledButton = styled.button<{ $color: string | undefined }>`
   }
 `
 
-export const OverlayMenu = ({ actions, children, className, position, style }: Props) => {
+const Menu = ({ actions, trigger }: MenuProps) => {
   const tooltip = useTooltip()
-  const menu = useMemo(() => {
-    const items = 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>
-    ))
-    return <MenuList>{items}</MenuList>
-  }, [actions])
+  const ref = useRef<HTMLUListElement>(null)
+
+  useKeyboardControls({
+    querySelectors: 'button',
+    onPressEscape: () => {
+      tooltip.hide()
+      trigger.current?.focus()
+    },
+    ref,
+  }, [])
+
   return (
-    <Tooltip content={menu} custom position={position} className={className} style={style} triggeredBy="click">
+    <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>
+  )
+}
+
+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/RightPanelForm.tsx

@@ -1,6 +1,7 @@
 import { Card } from '@citric/ui'
 import { styled } from 'styled-components'
 import { PropsOf } from '../types'
+import { AutoFocus } from './AutoFocus'
 import { FallbackBoundary } from './FallbackBoundary'
 
 const Form = styled.form`
@@ -42,14 +43,16 @@ const Form = styled.form`
 
 export const RightPanelForm = ({ children, onSubmit, ...props }: PropsOf<typeof Form>) => (
   <FallbackBoundary>
-    <Form
-      {...props}
-      onSubmit={(e) => {
-        e.preventDefault()
-        onSubmit?.(e)
-      }}
-    >
-      {children}
-    </Form>
+    <AutoFocus>
+      <Form
+        {...props}
+        onSubmit={(e) => {
+          e.preventDefault()
+          onSubmit?.(e)
+        }}
+      >
+        {children}
+      </Form>
+    </AutoFocus>
   </FallbackBoundary>
 )

package/src/components/Tooltip/Tooltip.tsx

@@ -1,5 +1,7 @@
+/* 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'
@@ -10,27 +12,44 @@ interface Props extends WithChildren, WithStyle {
   position?: TooltipPosition,
   triggeredBy?: 'click' | 'hover',
   custom?: boolean,
+  onShow?: () => void,
+  onHide?: () => void,
 }
 
-export const Tooltip = ({ content, custom, position, triggeredBy = 'hover', children, className, style }: Props) => {
+export const Tooltip = forwardRef<HTMLDivElement, Props>((
+  { content, custom, position, triggeredBy = 'hover', onHide, onShow, children, className, style },
+  ref,
+) => {
   const api = useTooltip()
 
-  function show(e: React.MouseEvent<HTMLDivElement, MouseEvent>, hideOnClickOutside?: boolean) {
-    api.show({
+  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: () => api.hide() } : { onClick: (e) => show(e, true) })}
+      {...(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>
   )
-}
+})

package/src/components/Tooltip/TooltipAPI.ts

@@ -1,3 +1,4 @@
+import { delay } from '@stack-spot/portal-components'
 import { animationTimeMS } from './style'
 import { ShowOptions } from './types'
 
@@ -8,7 +9,7 @@ function isRelative(element: HTMLElement) {
 }
 
 export class TooltipAPI {
-  private tooltipRef: React.RefObject<HTMLDivElement>
+  tooltipRef: React.RefObject<HTMLDivElement>
   private setContent: React.Dispatch<React.SetStateAction<React.ReactNode>>
   private hideTimeoutId: number | undefined
   private clickListener: ((e: MouseEvent) => void) | undefined
@@ -27,52 +28,51 @@ export class TooltipAPI {
     }
   }
 
-  show({ content, anchor, position = 'bottom', hideOnClickOutside }: ShowOptions): void {
+  async show({ content, anchor, position = 'bottom', hideOnClickOutside }: ShowOptions) {
     window.clearTimeout(this.hideTimeoutId)
     this.hideTimeoutId = undefined
     if (this.clickListener) document.removeEventListener('click', this.clickListener)
     this.setContent(content)
-    setTimeout(() => {
-      if (!this.tooltipRef.current) return
-      const anchorRect = anchor.getClientRects()[0]
-      this.tooltipRef.current.classList.add('visible')
-      const tooltipWidth = this.tooltipRef.current.clientWidth
-      const tooltipHeight = this.tooltipRef.current.clientHeight
-      let top = 0
-      let left = 0
-      if (position === 'left' || position === 'right') {
-        top = anchorRect.top + anchorRect.height / 2 - tooltipHeight / 2
-        if (position === 'left') left = anchorRect.left - tooltipWidth
-        else left = anchorRect.left + anchorRect.width
-      } else {
-        left = anchorRect.left + anchorRect.width / 2 - tooltipWidth / 2
-        if (position === 'top') top = anchorRect.top - tooltipHeight
-        else top = anchorRect.top + anchorRect.height
-      }
-      // takes the parent the tooltip is positioned relative to into consideration
-      this.computeRelativeTo()
-      const relativeRect = this.relativeTo?.getClientRects()[0] ?? { top: 0, left: 0 }
-      top -= relativeRect.top
-      left -= relativeRect.left
-      // adjusts positions in order to avoid overflowing the window and leaving a margin to the corners
-      if (top <= 0) top += MARGIN_TO_CORNERS_PX
-      else if (top + tooltipHeight >= document.body.clientHeight - MARGIN_TO_CORNERS_PX) {
-        top = document.body.clientHeight - MARGIN_TO_CORNERS_PX + tooltipHeight
-      }
-      if (left <= 0) left += MARGIN_TO_CORNERS_PX
-      else if (left + tooltipWidth >= document.body.clientWidth - MARGIN_TO_CORNERS_PX) {
-        left = document.body.clientWidth - MARGIN_TO_CORNERS_PX - tooltipWidth
-      }
-      this.tooltipRef.current.style.top = `${top}px`
-      this.tooltipRef.current.style.left = `${left}px`
-      if (hideOnClickOutside) {
-        this.clickListener = (e: MouseEvent) => {
-          if (this.tooltipRef.current?.contains(e.target as HTMLElement)) return
-          this.hide()
-        }
-        document.addEventListener('click', this.clickListener)
+    await delay(10)
+    if (!this.tooltipRef.current) return
+    const anchorRect = anchor.getClientRects()[0]
+    this.tooltipRef.current.classList.add('visible')
+    const tooltipWidth = this.tooltipRef.current.clientWidth
+    const tooltipHeight = this.tooltipRef.current.clientHeight
+    let top = 0
+    let left = 0
+    if (position === 'left' || position === 'right') {
+      top = anchorRect.top + anchorRect.height / 2 - tooltipHeight / 2
+      if (position === 'left') left = anchorRect.left - tooltipWidth
+      else left = anchorRect.left + anchorRect.width
+    } else {
+      left = anchorRect.left + anchorRect.width / 2 - tooltipWidth / 2
+      if (position === 'top') top = anchorRect.top - tooltipHeight
+      else top = anchorRect.top + anchorRect.height
+    }
+    // takes the parent the tooltip is positioned relative to into consideration
+    this.computeRelativeTo()
+    const relativeRect = this.relativeTo?.getClientRects()[0] ?? { top: 0, left: 0 }
+    top -= relativeRect.top
+    left -= relativeRect.left
+    // adjusts positions in order to avoid overflowing the window and leaving a margin to the corners
+    if (top <= 0) top += MARGIN_TO_CORNERS_PX
+    else if (top + tooltipHeight >= document.body.clientHeight - MARGIN_TO_CORNERS_PX) {
+      top = document.body.clientHeight - MARGIN_TO_CORNERS_PX + tooltipHeight
+    }
+    if (left <= 0) left += MARGIN_TO_CORNERS_PX
+    else if (left + tooltipWidth >= document.body.clientWidth - MARGIN_TO_CORNERS_PX) {
+      left = document.body.clientWidth - MARGIN_TO_CORNERS_PX - tooltipWidth
+    }
+    this.tooltipRef.current.style.top = `${top}px`
+    this.tooltipRef.current.style.left = `${left}px`
+    if (hideOnClickOutside) {
+      this.clickListener = (e: MouseEvent) => {
+        if (this.tooltipRef.current?.contains(e.target as HTMLElement)) return
+        this.hide()
       }
-    }, 10)
+      document.addEventListener('click', this.clickListener)
+    }
   }
 
   hide(): void {

package/src/layout.css

@@ -73,6 +73,11 @@
         display: none;
       }
     }
+    .quick-command-selector {
+      width: auto;
+      left: 10px;
+      right: 10px;
+    }
   }
 }
 

package/src/regex.ts

@@ -0,0 +1 @@
+export const quickCommandRegex = /^\/[\w\d-_]+$/

package/src/right-panel/DefaultPanel.tsx

@@ -3,7 +3,9 @@ import { Times } from '@citric/icons'
 import { IconButton } from '@citric/ui'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { styled } from 'styled-components'
+import { AutoFocus } from '../components/AutoFocus'
 import { WithChildren } from '../types'
+import { panelAnimationTime } from './constants'
 
 interface Props extends WithChildren {
   title: React.ReactNode,
@@ -42,17 +44,20 @@ const PanelBox = styled.div`
 
 export const DefaultPanel = ({ description, onClose, title, children }: Props) => {
   const t = useTranslate(dictionary)
+
   return (
     <PanelBox>
-      <header>
-        <div className="title">
-          {typeof title === 'string' ? <Text appearance="h5">{title}</Text> : title}
-          {typeof description === 'string' ? <Text colorScheme="light.700">{description}</Text> : description}
-        </div>
-        <IconButton title={t.close} aria-label={t.close} onClick={onClose}>
-          <Times />
-        </IconButton>
-      </header>
+      <AutoFocus delay={panelAnimationTime}>
+        <header>
+          <div className="title">
+            {typeof title === 'string' ? <Text appearance="h5">{title}</Text> : title}
+            {typeof description === 'string' ? <Text colorScheme="light.700">{description}</Text> : description}
+          </div>
+          <IconButton title={t.close} aria-label={t.close} onClick={onClose}>
+            <Times />
+          </IconButton>
+        </header>
+      </AutoFocus>
       <article>{children}</article>
     </PanelBox>
   )

package/src/right-panel/constants.ts

@@ -0,0 +1 @@
+export const panelAnimationTime = 300

package/src/right-panel/hooks.tsx

@@ -1,6 +1,7 @@
 import { useContext, useMemo } from 'react'
 import { DefaultPanel } from './DefaultPanel'
 import { RightPanelContext } from './RightPanelProvider'
+import { panelAnimationTime } from './constants'
 
 interface RightPanelOptions {
   title: React.ReactNode,
@@ -35,7 +36,7 @@ export function useRightPanel() {
       ctx.onCloseNext.current?.()
       setTimeout(() => {
         setContent(null)
-      }, 300)
+      }, panelAnimationTime)
     }
 
     function isOpen() {

package/src/state/ChatEntry.ts

@@ -1,3 +1,4 @@
+import { ColorPaletteName } from '@stack-spot/portal-theme'
 import { pull } from 'lodash'
 import { LabeledWithImage } from './types'
 
@@ -27,16 +28,15 @@ export interface KnowledgeSource {
 export interface TextChatEntry {
   type: 'text' | 'md',
   agentType: 'bot' | 'user' | 'system',
-  // image?: string,
   actions?: ChatAction[],
-  subtitle?: string,
   content: string,
   knowledgeSources?: KnowledgeSource[],
   updated?: string,
   agent?: LabeledWithImage,
   messageId?: string,
   error?: string,
-  // customInput?: CustomInputResponse,
+  badges?: { color?: ColorPaletteName, label: string }[],
+  card?: boolean,
 }
 
 type ChatEntryListener = (value: TextChatEntry) => void
@@ -46,20 +46,15 @@ let nextId = 0
 export class ChatEntry {
   readonly id: number
   private value: TextChatEntry
-  private streamFinished: boolean
   private listeners: ChatEntryListener[] = []
-  abort: () => void
 
   /**
    * @param value the value of the entry.
    * @param isStreamed whether or not this entry is streamed. Defaults to false.
-   * @param abort an abort function to cancel the transmission of this chat entry. Specially useful for canceling streamings.
    */
-  constructor(value: TextChatEntry, isStreamed = false, abort = () => {}) {
+  constructor(value: TextChatEntry) {
     this.id = nextId++
     this.value = value
-    this.streamFinished = !isStreamed
-    this.abort = abort
   }
 
   static createUserEntry(content: string, isMd = false) {
@@ -71,8 +66,8 @@ export class ChatEntry {
     })
   }
 
-  static createStreamedBotEntry(abort: () => void) {
-    return new ChatEntry({ agentType: 'bot', type: 'md', content: '' }, true, abort)
+  static createStreamedBotEntry() {
+    return new ChatEntry({ agentType: 'bot', type: 'md', content: '' })
   }
 
   setValue(value: TextChatEntry) {
@@ -84,16 +79,8 @@ export class ChatEntry {
     return this.value
   }
 
-  finish() {
-    this.streamFinished = true
-  }
-
-  hasFinished() {
-    return this.streamFinished
-  }
-
   onChange(listener: ChatEntryListener) {
-    if (!this.streamFinished) this.listeners.push(listener)
+    this.listeners.push(listener)
     return () => {
       pull(this.listeners, listener)
     }