@stack-spot/ai-chat-widget 0.1.0

package/src/context/hooks.ts

@@ -0,0 +1,93 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import { useContext, useEffect, useMemo, useState } from 'react'
+import { ChatEntry } from '../state/ChatEntry'
+import { ChatProperties, ChatState, MessageInterceptor } from '../state/ChatState'
+import { ObservableState } from '../state/ObservableState'
+import { WidgetProperties, WidgetState } from '../state/WidgetState'
+import { createNewChat } from '../utils/chat'
+import { AIWidgetContext } from './AIWidgetProvider'
+
+let globalWidgetState: WidgetState | undefined
+
+export function useWidget(): WidgetState {
+  const fromContext = useContext(AIWidgetContext)
+  if (fromContext) return fromContext
+  globalWidgetState ??= new WidgetState()
+  return globalWidgetState
+}
+
+function useObservableState<T, K extends keyof T>(state: ObservableState<T>, key: K): T[K] {
+  const [value, setValue] = useState(state.get(key))
+  useEffect(() => {
+    setValue(state.get(key))
+    return state.onChange(key, setValue)
+  }, [state])
+  return value
+}
+
+export function useWidgetState<K extends keyof WidgetProperties>(key: K): WidgetProperties[K] {
+  const widget = useWidget()
+  return useObservableState(widget, key)
+}
+
+export function useChatTabs(): { chats: ChatState[], active: string } {
+  const widget = useWidget()
+  const [tabs, setTabs] = useState<{ chats: ChatState[], active: string }>({
+    chats: widget.chatTabs.getAll(), 
+    active: widget.chatTabs.getActiveChatId(),
+  })
+  useEffect(() => widget.chatTabs.onChange((chats, active) => setTabs({ chats, active })), [])
+  return tabs
+}
+
+export function useChat(chatId: string): ChatState {
+  const widget = useWidget()
+  const chat = widget.chatTabs.get(chatId)
+  if (!chat) throw new Error(`No chat with id ${chatId} was found. Maybe there are no chats opened, try to call useFirstChat first.`)
+  return chat
+}
+
+export function useCurrentChat(): ChatState {
+  const { active } = useChatTabs()
+  return useChat(active)
+}
+
+export function useChatState<K extends keyof ChatProperties>(chatId: string, key: K): ChatProperties[K] {
+  const chat = useChat(chatId)
+  return useObservableState(chat, key)
+}
+
+export function useCurrentChatState<K extends keyof ChatProperties>(key: K): ChatProperties[K] {
+  const chat = useCurrentChat()
+  return useObservableState(chat, key)
+}
+
+export function useChatMessages(chatId: string): ChatEntry[] {
+  const chat = useChat(chatId)
+  const [entries, setEntries] = useState(chat.getMessages())
+  useEffect(() => {
+    setEntries(chat.getMessages())
+    return chat.onChangeMessages(setEntries)
+  }, [chat])
+  return entries
+}
+
+export function useCurrentChatMessages(): ChatEntry[] {
+  const { active } = useChatTabs()
+  return useChatMessages(active)
+}
+
+export function useChatEntry(entry: ChatEntry) {
+  const immutable = useMemo(() => entry.hasFinished(), [])
+  // the following condition is not a problem for react hooks, it will always be true or always false.
+  if (immutable) return entry.getValue()
+  const [content, setContent] = useState(entry.getValue())
+  useEffect(() => entry.onChange(setContent), [])
+  return content
+}
+
+export function useFirstChat(interceptors: MessageInterceptor[]) {
+  const widget = useWidget()
+  const tabs = widget.chatTabs
+  if (!tabs.getAll().length) createNewChat(widget, interceptors)
+}

package/src/features.ts

@@ -0,0 +1,18 @@
+export interface MessageInputFeatures {
+  stack?: boolean,
+  workspace?: boolean,
+  knowledgeSource?: boolean,
+  agent?: boolean,
+  quickCommands?: boolean,
+}
+
+export interface AIWidgetFeatures extends MessageInputFeatures {
+  editor?: boolean,
+  chatHistory?: boolean,
+}
+
+export const defaultFeatures: AIWidgetFeatures = {
+  stack: true,
+  workspace: true,
+  knowledgeSource: true,
+}

package/src/hooks/chat-scroll.ts

@@ -0,0 +1,14 @@
+import { useEffect } from 'react'
+
+/**
+ * Scrolls the closest chat (upwards in the tree) to its bottom.
+ * @param ref the reference element.
+ * @param deps when the deps changes, the chat is scrolled.
+ */
+export function useChatScrollToBottomEffect(ref: React.RefObject<HTMLElement>, deps: any[]) {
+  useEffect(() => {
+    const chat = ref.current?.closest('.chat-content')
+    if (!chat) return
+    chat.scrollTop = chat.scrollHeight
+  }, deps)
+}

package/src/index.ts

@@ -0,0 +1,8 @@
+export { AIWidgetProvider } from './context/AIWidgetProvider'
+export * from './context/hooks'
+export { StackspotAIWidget } from './StackspotAIWidget'
+export { ChatEntry } from './state/ChatEntry'
+export { ChatState } from './state/ChatState'
+export { ChatTabsController } from './state/ChatTabsController'
+export { ObservableState } from './state/ObservableState'
+export { WidgetState } from './state/WidgetState'

package/src/layout.css

@@ -0,0 +1,119 @@
+@font-face {
+  font-family: "San Francisco";
+  font-weight: 400;
+  src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff");
+}
+
+/* Scroll bars */
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+::-webkit-scrollbar {
+  width: 0.25rem;
+  height: 0.5rem;
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--light-600);
+}
+
+::-webkit-scrollbar-corner {
+  background-color: transparent; 
+}
+
+/* Classes */
+
+.ai-chat-widget {
+  border: 1px solid var(--light-600);
+  background-color: var(--light-400);
+  border-radius: 4px;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+
+  &.minimized {
+    .chat-container {
+      padding: 10px;
+      width: calc(100% - 20px);
+    }
+    .minimized-header {
+      padding: 0 10px;
+      width: calc(100% - 20px);
+    }
+    .home-page {
+      .title {
+        margin-top: 40px;
+        font-size: 18px;
+      }
+      .subtitle {
+        font-size: 14px;
+      }
+      .title, .subtitle {
+        display: block;
+        text-align: center;
+        margin-left: 20px;
+        margin-right: 20px;
+      }
+      .shortcuts {
+        display: none;
+      }
+    }
+    .message-input .action-box{
+      .feature-buttons, .expand {
+        display: none;
+      }
+    }
+  }
+}
+
+.chat-window {
+  transition: width 0.3s;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
+
+  &.narrow {
+    width: 50%;
+  }
+}
+
+.chat-container {
+  padding: 20px;
+  max-width: 1200px;
+  width: calc(100% - 40px);
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.chat-content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  flex-basis: 0;
+  overflow: auto;
+}
+
+.chat-right-panel {
+  position: absolute;
+  width: 50%;
+  left: 100%;
+  top: 0;
+  bottom: 0;
+  transition: left 0.3s ease-in-out;
+  background-color: var(--light-300);
+  border-radius: 4px;
+  border-left: 2px solid var(--light-600);
+  display: flex;
+  flex-direction: column;
+
+  &.visible {
+    left: 50%;
+  }
+}

package/src/right-panel/DefaultPanel.tsx

@@ -0,0 +1,67 @@
+import { Text } from '@citric/core'
+import { Times } from '@citric/icons'
+import { IconButton } from '@citric/ui'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { styled } from 'styled-components'
+import { WithChildren } from '../types'
+
+interface Props extends WithChildren {
+  title: string,
+  description: string,
+  onClose: () => void,
+}
+
+const PanelBox = styled.div`
+  padding: 25px;
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+  flex: 1;
+  overflow: hidden;
+
+  header {
+    display: flex;
+    flex-direction: row;
+
+    .title {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      flex: 1;
+    }
+  }
+
+  article {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+  }
+` 
+
+export const DefaultPanel = ({ description, onClose, title, children }: Props) => {
+  const t = useTranslate(dictionary)
+  return (
+    <PanelBox>
+      <header>
+        <div className="title">
+          <Text appearance="h5">{title}</Text>
+          <Text colorScheme="light.700">{description}</Text>
+        </div>
+        <IconButton title={t.close} aria-label={t.close} onClick={onClose}>
+          <Times />
+        </IconButton>
+      </header>
+      <article>{children}</article>
+    </PanelBox>
+  )
+}
+
+const dictionary = {
+  en: {
+    close: 'Close',
+  },
+  pt: {
+    close: 'Fechar',
+  },
+} satisfies Dictionary

package/src/right-panel/RightPanel.tsx

@@ -0,0 +1,6 @@
+import { useRightPanelContent } from './hooks'
+
+export const RightPanel = () => {
+  const content = useRightPanelContent()
+  return content
+}

package/src/right-panel/RightPanelProvider.tsx

@@ -0,0 +1,20 @@
+import { createContext, useMemo, useRef, useState } from 'react'
+
+interface ContextValue {
+  content?: React.ReactNode,
+  setContent?: (content: React.ReactNode) => void,
+  panel?: React.RefObject<HTMLDivElement>,
+  chatWindow?: React.RefObject<HTMLDivElement>,
+  onCloseNext: React.MutableRefObject<(() => void) | undefined>,
+}
+
+export const RightPanelContext = createContext<ContextValue>({ onCloseNext: { current: undefined } })
+
+export const RightPanelProvider = (
+  { panel, chatWindow, children }: Pick<ContextValue, 'panel' | 'chatWindow'> & { children: React.ReactNode },
+) => {
+  const [content, setContent] = useState<React.ReactNode>()
+  const onCloseNext = useRef<(() => void) | undefined>()
+  const value = useMemo<ContextValue>(() => ({ content, setContent, panel, chatWindow, onCloseNext }), [content, panel, chatWindow])
+  return <RightPanelContext.Provider value={value}>{children}</RightPanelContext.Provider>
+}

package/src/right-panel/hooks.tsx

@@ -0,0 +1,47 @@
+import { useContext, useMemo } from 'react'
+import { DefaultPanel } from './DefaultPanel'
+import { RightPanelContext } from './RightPanelProvider'
+
+interface RightPanelOptions {
+  title: string,
+  description: string,
+  onClose?: () => void,
+}
+
+export function useRightPanelContent() {
+  const { content } = useContext(RightPanelContext)
+  return content
+}
+
+export function useRightPanel() {
+  const ctx = useContext(RightPanelContext)
+  const { panel, chatWindow, setContent } = ctx
+
+  return useMemo(() => {
+    if (!setContent) throw new Error('No RightPanelProvider found.')
+
+    function open(content: React.ReactNode, options?: RightPanelOptions) {
+      if (!panel?.current || !chatWindow?.current || !setContent) return
+      setContent(options ? <DefaultPanel {...options} onClose={close}>{content}</DefaultPanel> : content)
+      panel.current.classList.add('visible')
+      chatWindow.current.classList.add('narrow')
+      ctx.onCloseNext.current = options?.onClose
+    }
+    
+    function close() {
+      if (!panel?.current || !chatWindow?.current || !setContent) return
+      panel.current.classList.remove('visible')
+      chatWindow.current.classList.remove('narrow')
+      ctx.onCloseNext.current?.()
+      setTimeout(() => {
+        setContent(null)
+      }, 300)
+    }
+
+    function isOpen() {
+      return !!panel?.current?.classList.contains('visible')
+    }
+
+    return { open, close, isOpen }
+  }, [])
+}

package/src/state/ChatEntry.ts

@@ -0,0 +1,95 @@
+import { pull } from 'lodash'
+
+export interface SerializableAction {
+  title: string,
+  type: 'link' | 'command',
+  /**
+   * The URL if the action is a link or a chat command otherwise (/command).
+   */
+  exec: string,
+}
+
+export interface ChatAction extends SerializableAction {
+  /**
+   * @default primary
+   */
+  appearance?: 'primary' | 'secondary',
+}
+
+export interface TextChatEntry {
+  type: 'text' | 'md',
+  agent: 'bot' | 'user' | 'system',
+  // image?: string,
+  actions?: ChatAction[],
+  subtitle?: string,
+  content: string,
+  // knowledgeSources?: KnowledgeSource[],
+  updated?: string,
+  agentId?: string,
+  messageId?: string,
+  error?: string,
+  // customInput?: CustomInputResponse,
+}
+
+type ChatEntryListener = (value: TextChatEntry) => void
+
+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 = () => {}) {
+    this.id = nextId++
+    this.value = value
+    this.streamFinished = !isStreamed
+    this.abort = abort
+  }
+
+  static createUserEntry(content: string) {
+    return new ChatEntry({
+      agent: 'user',
+      type: 'text',
+      content,
+      updated: new Date().toISOString(),
+    })
+  }
+
+  static createStreamedBotEntry(abort: () => void) {
+    return new ChatEntry({ agent: 'bot', type: 'md', content: '' }, true, abort)
+  }
+
+  setValue(value: TextChatEntry) {
+    if (this.streamFinished) return
+    this.value = value
+    this.listeners.forEach(l => l(this.value))
+  }
+
+  getValue() {
+    return this.value
+  }
+
+  finish() {
+    this.streamFinished = true
+    this.listeners = []
+  }
+
+  hasFinished() {
+    return this.streamFinished
+  }
+
+  onChange(listener: ChatEntryListener) {
+    if (!this.streamFinished) this.listeners.push(listener)
+    return () => {
+      pull(this.listeners, listener)
+    }
+  }
+}

package/src/state/ChatState.ts

@@ -0,0 +1,85 @@
+import { dropRight, last, pull } from 'lodash'
+import { ChatEntry } from './ChatEntry'
+import { ObservableState } from './ObservableState'
+
+interface Labeled {
+  id: string,
+  label: string,
+}
+
+export interface ChatProperties {
+  label: string,
+  agent?: Labeled,
+  workspace?: Labeled,
+  stack?: Labeled,
+  knowledgeSources?: Labeled[],
+  isLoading?: boolean,
+  nextMessage?: string,
+}
+
+type ChatMessagesListener = (chat: ChatEntry[]) => void
+
+export type MessageInterceptor = (entry: ChatEntry, chat: ChatState) => boolean | undefined | void | Promise<boolean | undefined | void>
+
+interface Options {
+  id: string,
+  initial: ChatProperties,
+  interceptors?: MessageInterceptor[],
+  entries?: ChatEntry[],
+}
+
+export class ChatState extends ObservableState<ChatProperties> {
+  readonly id: string
+  private entries: ChatEntry[]
+  private messagesListeners: ChatMessagesListener[] = []
+  private readonly interceptors: MessageInterceptor[]
+
+  /**
+   * @param id the id of the chat.
+   * @param initial the initial state.
+   * @param interceptors a list of interceptors to run whenever a new message (entry) is added to the chat. If an interception function
+   * returns false, the next interceptors are not run. Attention: when multiple messages are added at once, only the last goes through the
+   * interceptors. Furthermore, messages created by the constructor don't go through the interceptors, only messages added via `pushMessage`
+   * do.
+   */
+  constructor({ id, initial, entries = [], interceptors = [] }: Options) {
+    super(initial)
+    this.id = id
+    this.interceptors = interceptors
+    this.entries = entries
+  }
+
+  private runMessagesListeners() {
+    this.messagesListeners.forEach(l => l(this.entries))
+  }
+
+  private async runInterceptors(entry: ChatEntry) {
+    for (const interceptor of this.interceptors) {
+      const result = await interceptor(entry, this)
+      if (result === false) break
+    }
+  }
+
+  pushMessage(...entries: ChatEntry[]) {
+    if (!entries.length) return
+    this.entries = [...this.entries, ...entries]
+    this.runMessagesListeners()
+    this.runInterceptors(last(entries)!)
+  }
+
+  popMessage(quantity = 1) {
+    this.entries = dropRight(this.entries, quantity)
+    this.runMessagesListeners()
+  }
+
+  getMessages() {
+    return this.entries
+  }
+
+  onChangeMessages(listener: ChatMessagesListener) {
+    this.messagesListeners.push(listener)
+    return () => {
+      pull(this.messagesListeners, listener)
+    }
+  }
+}

package/src/state/ChatTabsController.ts

@@ -0,0 +1,55 @@
+import { last, pull } from 'lodash'
+import { ChatState } from './ChatState'
+
+type TabChangeListener = (chats: ChatState[], activeId: string) => void
+
+export class ChatTabsController {
+  private chats: ChatState[] = []
+  private activeChatId = ''
+  private listeners: TabChangeListener[] = []
+
+  private runListeners() {
+    this.listeners.forEach(l => l(this.chats, this.activeChatId))
+  }
+
+  add(...chats: ChatState[]) {
+    if (!chats.length) return
+    this.chats = [...this.chats, ...chats]
+    this.runListeners()
+  }
+
+  remove(...ids: string[]) {
+    if (this.chats.length <= 1 || !ids.length) return
+    const currentActiveIndex = this.chats.findIndex(c => c.id === this.activeChatId)
+    this.chats = this.chats.filter(c => !ids.includes(c.id))
+    if (ids.includes(this.activeChatId)) {
+      if (currentActiveIndex === -1) this.activeChatId = this.chats[0]?.id
+      this.activeChatId = currentActiveIndex < this.chats.length ? this.chats[currentActiveIndex].id : last(this.chats)?.id ?? ''
+    }
+    this.runListeners()
+  }
+
+  get(id: string) {
+    return this.chats.find(c => c.id === id)
+  }
+
+  getActiveChatId() {
+    return this.activeChatId
+  }
+
+  getAll() {
+    return this.chats
+  }
+
+  onChange(listener: TabChangeListener) {
+    this.listeners.push(listener)
+    return () => {
+      pull(this.listeners, listener)
+    }
+  }
+
+  select(id: string) {
+    this.activeChatId = id
+    this.runListeners()
+  }
+}

package/src/state/ObservableState.ts

@@ -0,0 +1,35 @@
+import { pull } from 'lodash'
+
+export type ObservableStateListener<T, K extends keyof T> = (value: T[K]) => void
+
+type Listeners<T> = {
+  [K in keyof T]?: ((value: T[K]) => void)[]
+}
+
+export class ObservableState<T> {
+  private state: T
+  private listeners: Listeners<T> = {}
+
+  constructor(initial: T) {
+    this.state = { ...initial }
+  }
+
+  set<K extends keyof T>(key: K, value: T[K]) {
+    if (this.state[key] !== value) {
+      this.state[key] = value
+      this.listeners[key]?.forEach(l => l(value))
+    }
+  }
+
+  get<K extends keyof T>(key: K): T[K] {
+    return this.state[key]
+  }
+
+  onChange<K extends keyof T>(key: K, listener: (value: T[K]) => void) {
+    this.listeners[key] ??= []
+    this.listeners[key]!.push(listener)
+    return () => {
+      pull(this.listeners[key]!, listener)
+    }
+  }
+}