@stack-spot/ai-chat-widget 0.1.0

package/src/components/RightPanelForm.tsx

@@ -0,0 +1,55 @@
+import { Card } from '@citric/ui'
+import { styled } from 'styled-components'
+import { PropsOf } from '../types'
+import { FallbackBoundary } from './FallbackBoundary'
+
+const Form = styled.form`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  overflow: hidden;
+  flex: 1;
+  gap: 20px;
+
+  > .content {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    flex: 1;
+    overflow: hidden;
+  }
+
+  > button {
+    margin-right: auto;
+  }
+
+  .search {
+    margin-bottom: 8px;
+  }
+
+  .option-list {
+    overflow: auto;
+  }
+
+  li.filtered-out {
+    opacity: 0.5;
+  }
+
+  ${Card} svg {
+    fill: transparent;
+  }
+`
+
+export const RightPanelForm = ({ children, onSubmit, ...props }: PropsOf<typeof Form>) => (
+  <FallbackBoundary>
+    <Form
+      {...props}
+      onSubmit={(e) => {
+        e.preventDefault()
+        onSubmit?.(e)
+      }}
+    >
+      {children}
+    </Form>
+  </FallbackBoundary>
+)

package/src/components/RightPanelTabs.tsx

@@ -0,0 +1,39 @@
+import { Tabs, TabsItem } from '@citric/ui'
+import { useMemo, useState } from 'react'
+import styled from 'styled-components'
+import { RightPanelForm } from './RightPanelForm'
+
+interface Tab {
+  title: string,
+  content: React.ReactNode,
+}
+
+interface Props {
+  tabs: Tab[],
+}
+
+const StyledTabs = styled(Tabs)`
+  > button {
+    flex: 1;
+  }
+`
+
+const StyledTabsItem = styled(TabsItem)`
+  flex: 1;
+  overflow: hidden;
+`
+
+export const RightPanelTabs = ({ tabs }: Props) => {
+  const [currentTab, setCurrentTab] = useState(0)
+  const tabItems = useMemo(() => tabs.map(({ content, title }) => (
+    <StyledTabsItem key={title} title={title}>
+      <RightPanelForm>{content}</RightPanelForm>
+    </StyledTabsItem>
+  )), [tabs])
+
+  return (
+    <StyledTabs activeIndex={currentTab} onChange={setCurrentTab}>
+      {tabItems}
+    </StyledTabs>
+  )
+}

package/src/components/TabManager.tsx

@@ -0,0 +1,223 @@
+/* Tabs to select chat and add new chats */
+
+import { TimesMini } from '@citric/icons'
+import { IconButton } from '@citric/ui'
+import { listToClass, theme } from '@stack-spot/portal-theme'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { last } from 'lodash'
+import { useCallback, useEffect, useMemo, useRef } from 'react'
+import { styled } from 'styled-components'
+import { ButtonAction } from '../types'
+import { FadingOverflow } from './FadingOverflow'
+
+interface Props<T, Key extends React.Key> {
+  /**
+   * The list of tabs.
+   */
+  tabs: T[],
+  /**
+   * Function to generate a unique id for a tab.
+   */
+  keygen: (tab: T) => Key,
+  /**
+   * The key corresponding to the tab currently active.
+   */
+  active: Key,
+  /**
+   * Function to call once a tab is selected.
+   */
+  onSelect: (tab: T) => void,
+  /**
+   * Function to run once a tab is closed.
+   */
+  onRemove: (tab: T) => void,
+  /**
+   * Extra buttons that goes in the far-end of the tab manager.
+   */
+  buttons?: ButtonAction[],
+  /**
+   * Function to render the label inside the tab.
+   */
+  renderLabel: (tab: T) => React.ReactElement,
+}
+
+const EXTRA_BTN_SIZE = 24
+const EXTRA_BTN_MARGIN = 8
+
+const Tabs = styled.nav<{ $numberOfExtraButtons: number }>`
+  width: 100%;
+  background-color: ${theme.color.light[400]};
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  border-bottom: 1px solid ${theme.color.light[500]};
+
+  button {
+    cursor: pointer;
+
+    &.extra {
+      padding: 0;
+      transition: background-color 0.3s;
+      width: ${EXTRA_BTN_SIZE}px;
+      height: ${EXTRA_BTN_SIZE}px;
+      margin: 0 ${EXTRA_BTN_MARGIN}px;
+
+      &:hover {
+        background-color: ${theme.color.light[500]};
+      }
+    }
+  }
+
+  ${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)`};
+  }
+
+  ul {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    display: flex;
+    flex-direction: row;
+
+    &::-webkit-scrollbar {
+      width: 2px;
+      height: 2px;
+      opacity: 0;
+    }
+    
+    li {
+      cursor: pointer;
+      overflow-x: clip;
+      white-space: nowrap;
+      height: 39px;
+      padding: 0 12px;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 8px;
+      border-top: 1px solid transparent;
+      border-right: 1px solid ${theme.color.light[500]};
+      background-color: ${theme.color.light[400]};
+      transition: background-color 0.3s, border-color 0.3s;
+
+      &.active, &:hover {
+        button {
+          opacity: 1;
+        }
+      }
+
+      &:hover {
+        background-color: ${theme.color.light[500]};
+      }
+
+      &.active {
+        background-color: ${theme.color.light[500]};
+        border-top-color: ${theme.color.secondary[400]};
+      }
+
+      button {
+        opacity: 0.7;
+        transition: opacity 0.3s;
+      }
+
+      button.label {
+        max-width: 100px;
+        overflow: hidden;
+        text-overflow: clip;
+        background-color: transparent;
+        border: none;
+        padding: 0;
+        color: inherit;
+        position: relative;
+
+        &.overflow {
+          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]};
+        }
+      }
+    }
+  }
+`
+
+export function TabManager<T, Key extends React.Key>(
+  { active, tabs, keygen, onRemove, onSelect, renderLabel, buttons = [] }: Props<T, Key>,
+) {
+  const t = useTranslate(dictionary)
+  const tabList = useRef<HTMLUListElement>(null)
+  const lastNumberOfTabs = useRef(tabs.length)
+
+  const onClickTab = useCallback((event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+    const target = event.target as HTMLElement
+    if (target.tagName === 'LI') target.querySelector('button')?.click()
+  }, [])
+
+  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>}
+    </li>
+  )), [tabs, active])
+
+  const extras = useMemo(() => buttons.map(({ label, onClick, icon, className, style }) => (
+    <IconButton
+      key={label}
+      aria-label={label}
+      title={label}
+      className={listToClass([className, 'extra'])}
+      style={style}
+      onClick={onClick}
+    >
+      {icon}
+    </IconButton>
+  )), [buttons])
+
+  // when a new tab is added, we should scroll to it if there are more tabs that we can show.
+  useEffect(() => {
+    if (tabs.length > lastNumberOfTabs.current) {
+      const items = tabList.current?.children ?? []
+      last(items)?.scrollIntoView({ behavior: 'smooth' })
+    }
+    lastNumberOfTabs.current = tabs.length
+  }, [tabs])
+
+  return (
+    <Tabs $numberOfExtraButtons={buttons.length}>
+      <FadingOverflow className="list-overflow" scroll="arrows" enableHorizontalScrollWithVerticalWheel>
+        <ul ref={tabList}>{tabItems}</ul>
+      </FadingOverflow>
+      {extras}
+    </Tabs>
+  )
+}
+
+const dictionary = {
+  en: {
+    close: 'Close',
+  },
+  pt: {
+    close: 'Fechar',
+  },
+} satisfies Dictionary
+

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,30 @@
+import { Text } from '@citric/core'
+import { WithStyle } from '@stack-spot/portal-theme'
+import { WithChildren } from '../../types'
+import { useTooltip } from './context'
+import { DefaultTooltip } from './style'
+import { TooltipPosition } from './types'
+
+interface Props extends WithChildren, WithStyle {
+  content: React.ReactNode,
+  position?: TooltipPosition,
+  custom?: boolean,
+}
+
+export const Tooltip = ({ content, custom, position = 'bottom', children, className, style }: Props) => {
+  const api = useTooltip()
+  return (
+    <div
+      onMouseEnter={e => api.show(
+        custom ? content : <DefaultTooltip><Text appearance="microtext1">{content}</Text></DefaultTooltip>,
+        e.target as HTMLElement,
+        position,
+      )}
+      onMouseLeave={() => api.hide()}
+      className={className}
+      style={style}
+    >
+      {children}
+    </div>
+  )
+}

package/src/components/Tooltip/TooltipAPI.ts

@@ -0,0 +1,46 @@
+import { animationTimeMS } from './style'
+import { TooltipPosition } from './types'
+
+
+export class TooltipAPI {
+  private tooltipRef: React.RefObject<HTMLDivElement>
+  private setContent: React.Dispatch<React.SetStateAction<React.ReactNode>>
+  private hideTimeoutId: number | undefined
+
+  constructor(tooltipRef: React.RefObject<HTMLDivElement>, setContent: React.Dispatch<React.SetStateAction<React.ReactNode>>) {
+    this.tooltipRef = tooltipRef
+    this.setContent = setContent
+  }
+
+  show(content: React.ReactNode, anchor: HTMLElement, position: TooltipPosition): void {
+    window.clearTimeout(this.hideTimeoutId)
+    this.hideTimeoutId = undefined
+    this.setContent(content)
+    setTimeout(() => {
+      if (!this.tooltipRef.current) return
+      const rect = 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 = rect.top + rect.height / 2 - tooltipHeight / 2
+        if (position === 'left') left = rect.left - tooltipWidth
+        else left = rect.left + rect.width
+      } else {
+        left = rect.left + rect.width / 2 - tooltipWidth / 2
+        if (position === 'top') top = rect.top - tooltipHeight
+        else top = rect.top + rect.height
+      }
+      this.tooltipRef.current.style.top = `${top}px`
+      this.tooltipRef.current.style.left = `${left}px`
+    }, 10)
+  }
+
+  hide(): void {
+    if (!this.tooltipRef.current) return
+    this.tooltipRef.current.classList.remove('visible')
+    this.hideTimeoutId = window.setTimeout(() => this.setContent(undefined), animationTimeMS)
+  }
+}

package/src/components/Tooltip/context.tsx

@@ -0,0 +1,24 @@
+import { createContext, useContext, useMemo, useRef, useState } from 'react'
+import { WithChildren } from '../../types'
+import { TooltipBox } from './style'
+import { TooltipAPI } from './TooltipAPI'
+
+const Context = createContext<TooltipAPI | undefined>(undefined)
+
+export const TooltipProvider = ({ children }: Required<WithChildren>) => {
+  const ref = useRef<HTMLDivElement>(null)
+  const [content, setContent] = useState<React.ReactNode>()
+  const api = useMemo(() => new TooltipAPI(ref, setContent), [])
+  return (
+    <Context.Provider value={api}>
+      {children}
+      <TooltipBox ref={ref} aria-hidden>{content}</TooltipBox>
+    </Context.Provider>
+  )
+}
+
+export function useTooltip() {
+  const api = useContext(Context)
+  if (!api) throw new Error('In order to use tooltips, you must wrap your content in a <TooltipProvider>.')
+  return api
+}

package/src/components/Tooltip/index.ts

@@ -0,0 +1,2 @@
+export { TooltipProvider } from './context'
+export { Tooltip } from './Tooltip'

package/src/components/Tooltip/style.tsx

@@ -0,0 +1,25 @@
+import { theme } from '@stack-spot/portal-theme'
+import { styled } from 'styled-components'
+
+export const animationTimeMS = 300
+
+export const TooltipBox = styled.div`
+  position: absolute;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity ${animationTimeMS/ 1000}s;
+  top: 0;
+  left: 0;
+
+  &.visible {
+    opacity: 1;
+  }
+`
+
+export const DefaultTooltip = styled.div`
+  padding: 4px 8px;
+  background-color: ${theme.color.inverse[500]};
+  color: ${theme.color.inverse.contrastText};
+  border-radius: 6px;
+  margin: 6px;
+`

package/src/components/Tooltip/types.ts

@@ -0,0 +1,8 @@
+export type TooltipPosition = 'left' | 'right' | 'top' | 'bottom'
+
+export interface BoxPosition {
+  x1: number,
+  x2: number,
+  y1: number,
+  y2: number,
+}

package/src/components/form/DescribedCheckboxGroup.tsx

@@ -0,0 +1,39 @@
+import { Checkbox, Text } from '@citric/core'
+import { listToClass } from '@stack-spot/portal-theme'
+import { useMemo } from 'react'
+import { Accordion } from '../Accordion'
+import { RadioCheckBox } from './styled'
+import { CheckProps } from './types'
+
+export function DescribedCheckboxGroup<T>(
+  { keygen, onChange, options, renderDescription, renderLabel, optionClassName, optionStyle, value, className, style }: CheckProps<T>,
+) {
+  const items = useMemo(() => options.map((option) => {
+    const label = renderLabel(option)
+    const description = renderDescription(option)
+    const header = (
+      <label>
+        <Checkbox
+          checked={value.includes(option)}
+          onChange={(e) => {
+            if (e.target.checked && !value.includes(option)) onChange([...value, option])
+            else onChange(value.filter(item => item !== option)) 
+          }}
+        />
+        {typeof label === 'string' ? <Text>{label}</Text> : label}
+      </label>
+    )
+    return (
+      <li key={keygen(option)} className={listToClass(['radio-group-item', optionClassName?.(option)])} style={optionStyle?.(option)}>
+        <Accordion header={header}>
+          {typeof description === 'string'
+            ? <Text appearance="microtext1" colorScheme="light.700">{description}</Text>
+            : description as any
+          }
+        </Accordion>
+      </li>
+    )
+  }), [options, value])
+
+  return <RadioCheckBox style={style} className={className}>{items}</RadioCheckBox>
+}

package/src/components/form/DescribedRadioGroup.tsx

@@ -0,0 +1,33 @@
+import { Radio, Text } from '@citric/core'
+import { listToClass } from '@stack-spot/portal-theme'
+import { useMemo } from 'react'
+import { Accordion } from '../Accordion'
+import { RadioCheckBox } from './styled'
+import { RadioProps } from './types'
+
+export function DescribedRadioGroup<T>(
+  { keygen, onChange, options, renderDescription, renderLabel, optionClassName, optionStyle, value, className, style }: RadioProps<T>,
+) {
+  const items = useMemo(() => options.map((option) => {
+    const label = renderLabel(option)
+    const description = renderDescription(option)
+    const header = (
+      <label>
+        <Radio checked={option === value} onChange={() => onChange(option)} />
+        {typeof label === 'string' ? <Text>{label}</Text> : label}
+      </label>
+    )
+    return (
+      <li key={keygen(option)} className={listToClass(['radio-group-item', optionClassName?.(option)])} style={optionStyle?.(option)}>
+        <Accordion header={header}>
+          {typeof description === 'string'
+            ? <Text appearance="microtext1" colorScheme="light.700">{description}</Text>
+            : description as any
+          }
+        </Accordion>
+      </li>
+    )
+  }), [options, value])
+
+  return <RadioCheckBox style={style} className={className}>{items}</RadioCheckBox>
+}

package/src/components/form/styled.ts

@@ -0,0 +1,41 @@
+import { theme } from '@stack-spot/portal-theme'
+import { styled } from 'styled-components'
+
+export const RadioCheckBox = styled.ul`
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+
+  li {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    border-radius: 6px;
+    background-color: ${theme.color.light[400]};
+
+    label {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 8px;
+    }
+
+    input[type="radio"], input[type="checkbox"] {
+      border-color: ${theme.color.light[700]};
+      background-color: transparent;
+    }
+
+    input[type="checkbox"]:checked {
+      background-color: ${theme.color.inverse[500]};
+    }
+
+    input[type="radio"] {
+      &:after {
+        background-color: ${theme.color.light[700]};
+      }
+    }
+  }
+`

package/src/components/form/types.ts

@@ -0,0 +1,21 @@
+import { WithStyle } from '@stack-spot/portal-theme'
+
+interface RadioCheckProps<T> extends WithStyle {
+  options: T[],
+  renderLabel: (option: T) => React.ReactNode,
+  renderDescription: (option: T) => React.ReactNode,
+  optionClassName?: (option: T) => string | undefined,
+  optionStyle?: (option: T) => React.CSSProperties | undefined,
+  keygen: (option: T) => React.Key,
+  
+}
+
+export interface RadioProps<T> extends RadioCheckProps<T> {
+  value: T | undefined,
+  onChange: (option: T) => void,
+}
+
+export interface CheckProps<T> extends RadioCheckProps<T> {
+  value: T[],
+  onChange: (option: T[]) => void,
+}

package/src/context/AIWidgetProvider.tsx

@@ -0,0 +1,6 @@
+import { createContext } from 'react'
+import { WidgetState } from '../state/WidgetState'
+
+export const AIWidgetContext = createContext<WidgetState | undefined>(undefined)
+
+export const AIWidgetProvider = AIWidgetContext.Provider