@stack-spot/ai-chat-widget 1.24.4 → 1.25.0

package/src/components/FileDescription.tsx

@@ -0,0 +1,114 @@
+import { IconBox, Text } from '@citric/core'
+import { Document, Sync, TimesMini } from '@citric/icons'
+import { IconButton, LoadingCircular } from '@citric/ui'
+import { theme } from '@stack-spot/portal-theme'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { styled } from 'styled-components'
+import { FileUploadStatus } from '../utils/upload/types'
+
+export interface FileDescriptionProps {
+  fileName: string,
+  icon?: React.ReactNode,
+  status?: FileUploadStatus,
+  onRemove?: () => void,
+  onRetry?: () => void,
+}
+
+const Styled = styled.div`
+  padding: 4px;
+  border-radius: 4px;
+  display: flex;
+  gap: 8px;
+  background-color: ${theme.color.light[600]};
+  box-sizing: border-box;
+  &.error {
+    border: 1px solid ${theme.color.danger[500]};
+  }
+  &.pending .status {
+    cursor: progress;
+  }
+  .image {
+    border-radius: 4px;
+    overflow: hidden;
+    background-color: ${theme.color.light[500]};
+    width: 28px;
+    aspect-ratio: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    img {
+      width: 100%;
+    }
+    .status {
+      position: absolute;
+      background-color: rgba(0, 0, 0, 0.3);
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      button {
+        padding: 2px;
+      }
+    }
+  }
+  .details {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    small {
+      max-width: 100px;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      line-height: 1;
+    }
+  }
+  button {
+    padding: 0;
+    margin: -2px -2px 0 0;
+  }
+`
+
+export const FileDescription = ({ fileName, icon, status, onRemove, onRetry }: FileDescriptionProps) => {
+  const t = useTranslate(dictionary)
+  const [, name, extension] = fileName.match(/(.+)\.([^.]+)$/) ?? ['', 'Unknown', 'Unknown']
+  return (
+    <Styled className={status} aria-busy={status === 'pending'}>
+      <div className="image">
+        {icon ?? <IconBox><Document /></IconBox>}
+        {status === 'pending' && <div className="status" aria-label={t.loading}>
+          <LoadingCircular size="xs" />
+        </div>}
+        {status === 'error' && <div className="status" aria-label={t.error}>
+          <IconButton onClick={onRetry}><Sync /></IconButton>
+        </div>}
+      </div>
+      <div className="details">
+        <Text appearance="microtext1" className="name" title={name}>{name}</Text>
+        <Text appearance="microtext1" colorScheme="light.700">{extension.toUpperCase()}</Text>
+      </div>
+      {onRemove && <IconButton onClick={onRemove} title={t.remove} arial-label={`${t.remove} ${name}`}>
+        <TimesMini />
+      </IconButton>}
+    </Styled>
+  )
+}
+
+const dictionary = {
+  en: {
+    loading: 'Uploading file',
+    retry: 'Retry',
+    remove: 'Remove',
+    error: 'Error while uploading file',
+  },
+  pt: {
+    loading: 'Carregando arquivo',
+    retry: 'Tentar novamente',
+    remove: 'Remover',
+    error: 'Erro ao carregar o arquivo',
+  },
+} satisfies Dictionary

package/src/state/ChatEntry.ts

@@ -65,6 +65,12 @@ export interface ChatTool {
   description: string,
 }
 
+export interface UploadedFile {
+  id: string,
+  name: string,
+  image?: string,
+}
+
 export interface TextChatEntry {
   /**
    * "text" for simple unformatted paragraphs. "md" for markdown. 
@@ -165,6 +171,10 @@ export interface TextChatEntry {
    * Valid for input types.
    */
   initialValue?: string[],
+  /**
+   * If this chat entry contains any uploaded file, these are the files being uploaded along the message.
+   */
+  upload?: UploadedFile[],
 }
 
 type ChatEntryListener = (value: TextChatEntry) => void

package/src/state/ChatState.ts

@@ -2,7 +2,9 @@ import { dropRight, last, pull } from 'lodash'
 import { ulid } from 'ulid'
 import { AbortedError } from '../AbortedError'
 import { ChatFeatures, getFeaturesWithDefaults } from '../features'
+import { UploadManager } from '../utils/upload/UploadManager'
 import { ChatEntry } from './ChatEntry'
+import { acceptedFileTypes, maxFileSize, maxUploadItems } from './constants'
 import { ObservableState } from './ObservableState'
 import { Labeled, LabeledAgent } from './types'
 
@@ -124,6 +126,10 @@ export class ChatState extends ObservableState<ChatProperties> {
    * Abort signals currently active.
    */
   private abortions: AbortController[] = []
+  /**
+   * Used to manage uploads for this Chat.
+   */
+  readonly uploadManager = new UploadManager({ maxSize: maxFileSize, accept: acceptedFileTypes, maxItems: maxUploadItems })
   untitled: boolean
 
   constructor({ id, initial, entries = [], interceptors = [], untitled = false }: Options) {

package/src/state/constants.ts

@@ -0,0 +1,12 @@
+import { FileSize } from './types'
+
+export const acceptedFileTypes = [
+  'json', 'yaml', 'txt', 'md', 'json', 'yaml', 'pdf', 'xls', 'xlsx', 'csv', 'cbl', 'cpp', 'cxx', 'cc', 'c', 'hpp', 'hxx', 'hh', 'h', 'cs',
+  'go', 'html', 'htm', 'kt', 'kts', 'md', 'php', 'proto', 'py', 'java', 'js', 'jsx', 'ts', 'tsx', 'rst', 'rb', 'rs', 'scala', 'swift',
+  'sql', 'yaml', 'yml', 'tf', 'sh', 'ps1', 'psd1', 'psm1', 'bat', 'cmd', 'rego', 'f', 'for', 'r', 'pl', 'vb', 'dart', 'hs', 'lua',
+  'asm', 'groovy', 'gvy', 'gy', 'mat', 'clj', 'lisp', 'm', 'cls', 'css', 'scss', 'json', 'jpg', 'jpeg', 'png',
+]
+
+export const maxFileSize: FileSize = { value: 10, unit: 'MB' }
+
+export const maxUploadItems = 5

package/src/state/types.ts

@@ -12,3 +12,8 @@ export interface LabeledAgent extends LabeledWithImage {
   slug?: string,
   visibility_level?: string,
 }
+
+export interface FileSize {
+  value: number,
+  unit: 'B' | 'KB' | 'MB' | 'GB',
+}

package/src/utils/chat.ts

@@ -1,5 +1,6 @@
 import { FixedChatRequest } from '@stack-spot/portal-network'
 import appData from '../app-metadata.json'
+import { ChatEntry } from '../state/ChatEntry'
 import { ChatState } from '../state/ChatState'
 import { defaultLanguage } from './programming-languages'
 
@@ -11,13 +12,14 @@ import { defaultLanguage } from './programming-languages'
  * @param state the ChatState to build the context from.
  * @returns the conversation context ready to be sent to the backend.
  */
-export function buildConversationContext(state: ChatState): FixedChatRequest['context'] {
+export function buildConversationContext(state: ChatState, message?: ChatEntry): FixedChatRequest['context'] {
   return {
     workspace: state.get('workspace')?.id,
     conversation_id: state.id,
     stack_id: state.get('stack')?.id,
     language: state.get('codeLanguage') || (state.get('codeSelection') ? defaultLanguage : undefined),
     knowledge_sources: state.get('knowledgeSources')?.map(ks => ks.id),
+    upload_ids: message?.getValue().upload?.map(f => f.id),
     agent_id: state.get('agent')?.id,
     agent_built_in: state.get('agent')?.builtIn,
     os: navigator.userAgent,

package/src/utils/upload/FileUpload.ts

@@ -0,0 +1,64 @@
+import { dataIntegrationClient } from '@stack-spot/portal-network'
+import { FileUploadType } from '@stack-spot/portal-network/api/dataIntegration'
+import { pull } from 'lodash'
+import { FileUploadStatus } from './types'
+import { getFileId } from './utils'
+
+export type FileUploadChangeListener = (status: FileUploadStatus) => void
+
+export class FileUpload {
+  readonly file: File
+  status: FileUploadStatus = 'pending'
+  readonly id: string
+  readonly type: FileUploadType
+  error?: any
+  uploadId?: string
+  private listeners: FileUploadChangeListener[] = []
+  private abortController = new AbortController()
+
+  constructor(file: File, type: FileUploadType = 'CONTEXT') {
+    this.file = file
+    this.id = getFileId(file)
+    this.type = type
+    this.upload()
+  }
+
+  private runListeners() {
+    this.listeners.forEach(l => l(this.status))
+  }
+
+  private async upload() {
+    try {
+      const [id] = await dataIntegrationClient.uploadFiles.mutate({ files: [this.file], type: this.type }, this.abortController.signal)
+      this.uploadId = id
+      this.status = 'success'
+    } catch (error) {
+      this.error = error
+      this.status = 'error'
+    }
+    this.runListeners()
+  }
+
+  stop() {
+    this.abortController.abort()
+  }
+
+  retry() {
+    if (this.status != 'error') return
+    this.status = 'pending'
+    this.runListeners()
+    this.upload()
+  }
+
+  onChange(listener: FileUploadChangeListener) {
+    this.listeners.push(listener)
+    return () => {
+      pull(this.listeners, listener)
+    }
+  }
+
+  destroy() {
+    this.listeners = []
+    this.stop()
+  }
+}

package/src/utils/upload/UploadManager.ts

@@ -0,0 +1,147 @@
+import { pull } from 'lodash'
+import { FileSize } from '../../state/types'
+import { FileAlreadyExists, FileIsTooLarge, MaxFilesReached, UploadError } from './errors'
+import { FileUpload } from './FileUpload'
+import { getFileId, unitPower } from './utils'
+
+export type UploadChangeListener = (files: FileUpload[]) => void
+export type UploadStatusChangeListener = (status: UploadManagerStatus) => void
+export type UploadErrorListener = (errors: UploadError[]) => void
+export type UploadManagerStatus = 'idle' | 'uploading' | 'error'
+
+export class UploadManager {
+  private changeListeners: UploadChangeListener[] = []
+  private statusListeners: UploadStatusChangeListener[] = []
+  private errorListeners: UploadErrorListener[] = []
+  private input: HTMLInputElement | null = null
+  private value: FileUpload[] = []
+  private maxSize?: FileSize
+  private maxItems: number
+  private accept: string[]
+  private onDestroy: () => void = () => {}
+  status: UploadManagerStatus = 'idle'
+
+  constructor(options?: { maxSize?: FileSize, accept?: string[], maxItems?: number }) {
+    this.maxSize = options?.maxSize
+    this.accept = options?.accept ?? []
+    this.maxItems = options?.maxItems ?? 0
+  }
+
+  private runChangeListeners() {
+    this.changeListeners.forEach(l => l(this.value))
+  }
+
+  private runStatusListeners() {
+    const status = this.computeStatus()
+    if (status === this.status) return
+    this.status = status
+    this.statusListeners.forEach(l => l(status))
+  }
+
+  private hasEquivalentFile(file: File) {
+    const id = getFileId(file)
+    return this.value.some(f => id === f.id)
+  }
+
+  private attachEventListeners() {
+    const handleChange = () => {
+      const newFiles: FileUpload[] = []
+      const errors: UploadError[] = []
+      for (const f of this.input?.files ?? []) {
+        if (this.maxSize && f.size > this.maxSize.value * Math.pow(1024, unitPower[this.maxSize?.unit])) {
+          errors.push(new FileIsTooLarge(f.name, this.maxSize))
+        } else if (this.maxItems && this.value.length + newFiles.length === this.maxItems) {
+          errors.push(new MaxFilesReached(f.name, this.maxItems))
+        } else if (this.hasEquivalentFile(f)) {
+          errors.push(new FileAlreadyExists(f.name))
+        } else {
+          const upload = new FileUpload(f)
+          newFiles.push(upload)
+          upload.onChange(() => this.runStatusListeners())
+        }
+      }
+      if (newFiles.length) {
+        this.value = [...this.value, ...newFiles]
+        this.runChangeListeners()
+        this.runStatusListeners()
+      }
+      if (errors.length) {
+        this.errorListeners.forEach(l => l(errors))
+      }
+      this.destroy()
+    }
+    this.onDestroy = () => this.input?.removeEventListener('change', handleChange)
+    this.input?.addEventListener('change', handleChange)
+  }
+
+  private createInput() {
+    this.input = document.createElement('input')
+    this.input.setAttribute('type', 'file')
+    this.input.setAttribute('multiple', '')
+    this.input.setAttribute('style', 'display: none')
+    this.input.setAttribute('accept', `.${this.accept.join(',.')}`)
+    document.body.append(this.input)
+    this.attachEventListeners()
+  }
+
+  private computeStatus(): UploadManagerStatus {
+    let uploading = false
+    for (const f of this.value) {
+      if (f.status === 'error') return 'error'
+      if (f.status === 'pending') uploading = true
+    }
+    return uploading ? 'uploading' : 'idle'
+  }
+
+  open() {
+    this.createInput()
+    this.input?.click()
+  }
+
+  get(): FileUpload[] {
+    return this.value
+  }
+
+  reset() {
+    this.value.forEach(f => f.destroy())
+    this.value = []
+    this.runChangeListeners()
+  }
+
+  remove(file: FileUpload) {
+    file.destroy()
+    this.value = this.value.filter(f => f !== file)
+    this.runChangeListeners()
+    this.runStatusListeners()
+  }
+
+  onChange(listener: UploadChangeListener) {
+    this.changeListeners.push(listener)
+    return () => {
+      pull(this.changeListeners, listener)
+    }
+  }
+
+  onChangeStatus(listener: UploadStatusChangeListener) {
+    this.statusListeners.push(listener)
+    return () => {
+      pull(this.statusListeners, listener)
+    }
+  }
+
+  onError(listener: UploadErrorListener) {
+    this.errorListeners.push(listener)
+    return () => {
+      pull(this.errorListeners, listener)
+    }
+  }
+
+  isFull() {
+    return !!this.maxItems && this.value.length === this.maxItems
+  }
+
+  destroy() {
+    this.onDestroy()
+    this.input?.remove()
+  }
+}

package/src/utils/upload/context.tsx

@@ -0,0 +1,44 @@
+import { useEffectOnce } from '@stack-spot/portal-components'
+import { createContext, ReactNode, useContext, useEffect, useState } from 'react'
+import { UploadError } from './errors'
+import { FileUpload } from './FileUpload'
+import { FileUploadStatus } from './types'
+import { UploadManager, UploadManagerStatus } from './UploadManager'
+
+const context = createContext<UploadManager | undefined>(undefined)
+
+export const UploadProvider = ({ value = new UploadManager(), children }: { value: UploadManager, children: ReactNode }) => {
+  useEffectOnce(() => () => value.destroy())
+  return <context.Provider value={value}>{children}</context.Provider>
+}
+
+export function useUploadManager() {
+  const manager = useContext(context)
+  if (!manager) throw new Error('"useUploadManager()" must be used only within the context of an <UploadProvider>.')
+  return manager
+}
+
+export function useUploads(): FileUpload[] {
+  const manager = useUploadManager()
+  const [files, setFiles] = useState<FileUpload[]>([])
+  useEffect(() => manager.onChange(setFiles))
+  return files
+}
+
+export function useUploadErrorEffect(effect: (errors: UploadError[]) => void) {
+  const manager = useUploadManager()
+  useEffect(() => manager.onError(effect))
+}
+
+export function useUploadManagerStatus() {
+  const manager = useUploadManager()
+  const [status, setStatus] = useState<UploadManagerStatus>(manager.status)
+  useEffect(() => manager.onChangeStatus(setStatus))
+  return status
+}
+
+export function useUploadStatus(file: FileUpload) {
+  const [status, setStatus] = useState<FileUploadStatus>(file.status)
+  useEffect(() => file.onChange(setStatus))
+  return status
+}

package/src/utils/upload/errors.ts

@@ -0,0 +1,34 @@
+import { FileSize } from '../../state/types'
+
+export class UploadError extends Error {
+  readonly fileName: string
+
+  constructor(fileName: string, message?: string) {
+    super(message || `There was an error while uploading ${fileName}`)
+    this.fileName = fileName
+  }
+}
+
+export class FileIsTooLarge extends UploadError {
+  readonly maxSize: FileSize
+
+  constructor(fileName: string, maxSize: FileSize) {
+    super(fileName, `Can't upload ${fileName} because it exceeds the maximum file size of ${maxSize.value} ${maxSize.unit}.`)
+    this.maxSize = maxSize
+  }
+}
+
+export class FileAlreadyExists extends UploadError {
+  constructor(fileName: string) {
+    super(fileName, `Can't upload ${fileName} because it is already on the list.`)
+  }
+}
+
+export class MaxFilesReached extends UploadError {
+  readonly maxFiles: number
+
+  constructor(fileName: string, maxFiles: number) {
+    super(fileName, `Can't upload ${fileName} because the maximum number of files (${maxFiles}) has been reached.`)
+    this.maxFiles = maxFiles
+  }
+}

package/src/utils/upload/types.ts

@@ -0,0 +1,7 @@
+export interface FileDescription {
+  id: string,
+  name: string,
+  extension: string,
+}
+
+export type FileUploadStatus = 'pending' | 'success' | 'error'

package/src/utils/upload/utils.ts

@@ -0,0 +1,12 @@
+import { FileSize } from '../../state/types'
+
+export function getFileId(file: File) {
+  return `${file.name}|${file.lastModified}|${file.size}`
+}
+
+export const unitPower: Record<FileSize['unit'], number> = {
+  B: 0,
+  KB: 1,
+  MB: 2,
+  GB: 3,
+}

package/src/views/Chat/AgentInfo.tsx

@@ -4,16 +4,17 @@ import { LabeledWithImage } from '../../state/types'
 
 interface Props {
   agent?: LabeledWithImage,
+  icon?: React.ReactElement,
 }
 
 /**
  * Renders the avatar of an agent in a message.
  */
-export const AgentInfo = ({ agent }: Props) => (
+export const AgentInfo = ({ agent, icon }: Props) => (
   <>
     {agent?.image
       ? <img src={agent.image} className="custom-agent-image" />
-      : <IconBox className="default-image-wrapper" colorIcon="light.700"><Agent className="agent-image" /></IconBox>
+      : <IconBox className="default-image-wrapper" colorIcon="light.700">{icon ?? <Agent className="agent-image" />}</IconBox>
     }
     <Text appearance="body2">{agent?.label}</Text>
   </>