@stack-spot/ai-chat-widget 0.10.0 → 1.0.0-dev.1768314799914

package/src/utils/programming-languages.ts

@@ -1,3 +1,5 @@
+export const defaultLanguage = 'python'
+
 export const languages = [
   {
     'value': 'abap',
@@ -79,6 +81,11 @@ export const languages = [
     'label': 'CSS',
     'extensions': ['.css'],
   },
+  {
+    'value': 'csv',
+    'label': 'CSV',
+    'extensions': ['.csv'],
+  },
   {
     'value': 'd',
     'label': 'D',
@@ -349,6 +356,11 @@ export const languages = [
     'label': 'Redshift',
     'extensions': ['.sql'],
   },
+  {
+    'value': 'rego',
+    'label': 'Rego',
+    'extensions': ['.rego'],
+  },
   {
     'value': 'restructuredtext',
     'label': 'Restructured Text',

package/src/utils/string.ts

@@ -0,0 +1,10 @@
+/**
+ * Gets the size of a string removing control characters and spaces
+ * @param str the string to count.
+ * @returns the count value.
+ */
+export function getSizeOfString(str: string): number {
+  // eslint-disable-next-line no-control-regex
+  const withoutSpacesAndControls = str.replace(/[\u0000-\u001F\u007F-\u009F\u061C\u200E\u200F\u202A-\u202E\u2066-\u2069\s]/g, '')
+  return withoutSpacesAndControls.length
+}

package/src/utils/tools.ts

@@ -0,0 +1,32 @@
+
+export type ToolWithImage = { id?: string, image?: string, name: string, description?: string }
+
+interface Toolkit {
+  id?: string | null,
+  tools?: { id?: string, name?: string, description?: string, function?: { name: string, description?: string } }[] | null,
+  image_url?: string | null,
+  avatar?: string | null,
+}
+
+function findToolById(id: string, toolkits: Toolkit[]) {
+  for (const tk of toolkits ?? []) {
+    for (const t of tk.tools ?? []) {
+      if (t.id === id) return { tool: t, toolkit: tk }
+    }
+  }
+}
+
+export function toolById(id: string, toolkits: Toolkit[] | undefined): ToolWithImage {
+  // mcp tools are identified by "{toolkitId}/{functionName}"
+  const mcp = id.match(/(\w+)\/(.+)/)
+  if (mcp) {
+    const [, toolkitId, toolName] = mcp
+    const toolkit = toolkits?.find(tk => tk.id === toolkitId)
+    const tool = toolkit?.tools?.find(t => t.name === toolName)
+    return { id, image: toolkit?.avatar ?? undefined, name: toolName, description: tool?.function?.description }
+  }
+  const { tool, toolkit } = findToolById(id, toolkits ?? []) ?? {}
+  return (tool && toolkit)
+    ? { id, image: toolkit.avatar ?? toolkit.image_url ?? undefined, name: tool.name || id, description: tool?.description }
+    : { id, name: id }
+}

package/src/utils/update-tool-step.tsx

@@ -0,0 +1,27 @@
+import { ChatEntry, TextChatEntry } from '../state/ChatEntry'
+import { planningToolDictionaryHelper } from './planning-tool'
+
+export const updateToolStep = (messages: ChatEntry[], executionId: string, 
+  newStatus: 'pending' | 'running' | 'success' | 'error' | 'awaiting_approval') => {
+  
+  // if last message is a user message, no update in tool status is needed
+  if (messages[messages.length-1].getValue().agentType === 'user') return
+  
+  const messageId = planningToolDictionaryHelper.getMessageIdPlanningStepFromToolExecutionId(executionId)
+  const message = messages.find((message) => `${message.id}` === messageId)
+  let update = false
+  const messageValue = message?.getValue()
+  messageValue?.steps?.map((step) => {
+    if (step.type === 'step') {
+      const tool = step.attempts?.[0].tools?.[0]
+      if (tool?.executionId === executionId && step.status !== newStatus) {
+        step.status = newStatus
+        update = true
+      }
+    }
+  })
+  
+  if (update) {
+    message?.setValue({ ...messageValue as TextChatEntry })
+  }
+}

package/src/utils/upload/FileUpload.ts

@@ -0,0 +1,63 @@
+import { dataIntegrationClient } from '@stack-spot/portal-network'
+import { FileUploadType } from '@stack-spot/portal-network/api/dataIntegration'
+import { pull } from 'lodash'
+import { FileUploadStatus } from './types'
+
+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.type = type
+    this.id = `${Date.now()}-${Math.random()}`
+    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,156 @@
+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 processFiles(files: FileList | File[]) {
+    const newFiles: FileUpload[] = []
+    const errors: UploadError[] = []
+    for (const f of 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))
+    }
+  }
+
+  private attachEventListeners() {
+    const handleChange = () => {
+      this.processFiles(this.input?.files || [])
+      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()
+  }
+
+  add(files: File | File[] = []) {
+    const fileList = Array.isArray(files) ? files : [files]
+    this.processFiles(fileList)
+  }
+
+  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/use-paste-upload.tsx

@@ -0,0 +1,30 @@
+import { useEffect } from 'react'
+
+interface UsePasteUploadProps {
+  textAreaRef: React.RefObject<HTMLTextAreaElement>,
+  onUploadFiles: (files: File[]) => void,
+  enabled?: boolean,
+}
+
+export const usePasteUpload = ({
+  textAreaRef,
+  onUploadFiles,
+  enabled = true,
+}: UsePasteUploadProps) => {
+  useEffect(() => {
+    const textarea = textAreaRef.current
+    if (!textarea || !enabled) return
+
+    const handlePaste = (e: ClipboardEvent) => {
+      if (e.clipboardData?.files?.length) {
+        onUploadFiles(Array.from(e.clipboardData.files))
+        e.preventDefault()
+      }
+    }
+
+    textarea.addEventListener('paste', handlePaste)
+    return () => {
+      textarea.removeEventListener('paste', handlePaste)
+    }
+  }, [onUploadFiles, textAreaRef, enabled])
+}

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/utils/url.ts

@@ -0,0 +1,8 @@
+const stkAIDomain = /^https:\/\/ai(\.\w+)?\.stackspot\.com$/
+const localhostDomain = /^http:\/\/localhost:\d+$/
+const aiPrd = 'https://ai.stackspot.com'
+
+export function getUrlToStackSpotAI() {
+  const current = location.origin
+  return stkAIDomain.test(current) || localhostDomain.test(current) ? current : aiPrd
+}

package/src/views/Agents/AgentDescription.tsx

@@ -0,0 +1,107 @@
+import { Icon } from '@stack-spot/citric-icons'
+import { AsyncContent, Badge, Card, IconBox, ImageBox, ImageWithFallback, Text } from '@stack-spot/citric-react'
+import { agentToolsClient } from '@stack-spot/portal-network'
+import { useMemo } from 'react'
+import { useAgentsDictionary } from './dictionary'
+import { AgentDescriptionBox } from './styled'
+
+export const AgentDescription = ({ agentId }: { agentId?: string }) => {
+  const t = useAgentsDictionary()
+  const [agent,, error, { isLoading }] = agentToolsClient.agent.useStatefulQuery({ agentId: agentId! }, { enabled: !!agentId })
+  const numberOfKnowledgeSources = agent?.knowledge_sources_config?.knowledge_sources.length ?? 0
+  
+  const knowledgeSources = useMemo(
+    () => agent?.knowledge_sources_config?.knowledge_sources_details?.map((ks, index) => (
+      <li key={index}>
+        <Card gap="10px" direction="row" flex={1} size="xxs" bgLevel={500} justifyContent="space-between">
+          <Text color="light.contrastText">{ks.name}</Text>
+          <Badge colorScheme="inverse" appearance="square">{ks.type}</Badge>
+        </Card>
+      </li>
+    )),
+    [agent],
+  )
+  
+  const { tools, multiAgents } = useMemo(() => {
+    const tools: React.ReactElement[] = [] 
+    const multiAgents: React.ReactElement[] = [] 
+    const builtInTools = agent?.toolkits?.builtin_toolkits ?? []
+    const customToolkits = agent?.toolkits?.custom_toolkits ?? []
+    for (const toolkit of builtInTools) {
+      for (const tool of toolkit.tools ?? []) {
+        if (toolkit.id == 'UTILITIES'){ 
+          tools.push(
+            <li key={tool.id}>
+              <Card gap="10px" direction="row" flex={1} size="xxs" bgLevel={500}>
+                <ImageBox><ImageWithFallback src={toolkit.image_url} fallback={<Icon icon="Cog" />} /></ImageBox>
+                <Text color="light.contrastText">{tool?.name || tool?.id || 'unknown'}</Text>
+              </Card>
+            </li>,
+          )
+        }
+        if (toolkit.id == 'MULTI_AGENTS'){
+          multiAgents.push(
+            <li key={tool.id}>
+              <Card gap="10px" direction="row" flex={1} size="xxs" bgLevel={500}>
+                <IconBox icon="Agent" />
+                <Text color="light.contrastText">{tool.name}</Text>
+              </Card>
+            </li>,
+          )
+        }
+      }
+    }
+    for (const toolkit of customToolkits) {
+      for (const tool of toolkit.tools) {
+        tools.push(
+          <li key={tool.id}>
+            <Card gap="10px" direction="row" flex={1} size="xxs" bgLevel={500}>
+              <ImageBox><ImageWithFallback src={toolkit.avatar ?? undefined} fallback={<Icon icon="Cog" />} /></ImageBox>
+              <Text color="light.contrastText">{tool.name}</Text>
+            </Card>
+          </li>,
+        )
+      }
+    }
+    return { tools, multiAgents }
+  }, [agent])
+
+  const mcpToolkits = useMemo(() => agent?.toolkits?.mcp_toolkits?.map(t => (
+    <li key={`mcp-${t.id}`}>
+      <Card gap="10px" direction="row" flex={1} size="xxs" bgLevel={500}>
+        <ImageBox><ImageWithFallback src={t.avatar ?? undefined} fallback={<Icon icon="Cog" />} /></ImageBox>
+        <Text color="light.contrastText">{t.name}</Text>
+      </Card>
+    </li>
+  )), [agent?.toolkits?.mcp_toolkits])
+
+  return (
+    <AsyncContent loading={isLoading} error={error}>
+      <AgentDescriptionBox>
+        {agent?.description && <section>
+          <Text appearance="microtext1" className="title">{t.description}</Text>
+          <Text>{agent?.description}</Text>
+        </section>}
+        {(!!numberOfKnowledgeSources || !!knowledgeSources?.length) && <section>
+          <Text appearance="microtext1" className="title">Knowledge sources</Text>
+          <ul>{knowledgeSources}</ul>
+        </section>}
+        {!!tools?.length && <section>
+          <Text appearance="microtext1" className="title">{t.tools}</Text>
+          <ul>
+            {tools}
+            {mcpToolkits}
+          </ul>
+        </section>}
+        {!!multiAgents?.length && <section>
+          <Text appearance="microtext1" className="title">{t.multiAgent}</Text>
+          <ul>{multiAgents}</ul>
+        </section>}
+        {agent?.model_name && <section>
+          <Text appearance="microtext1" className="title">LLM</Text>
+          <Badge colorPalette="orange" appearance="square">{agent?.model_name}</Badge>
+        </section>}
+      </AgentDescriptionBox>
+    </AsyncContent>
+  )
+}

package/src/views/Agents/AgentsPanel.tsx

@@ -0,0 +1,57 @@
+import { Tab } from '@stack-spot/citric-react'
+import { agentToolsClient } from '@stack-spot/portal-network'
+import { useEffect, useRef } from 'react'
+import { RightPanelContentList } from '../../components/RightPanelContentList'
+import { RightPanelTabs } from '../../components/RightPanelTabs'
+import { useCurrentChat, useWidgetState } from '../../context/hooks'
+import { Scope } from '../../features'
+import { checkIsTrial } from '../../utils/check-is-trial'
+import { AgentsTab, AgentsTabWorkspace } from './AgentsTab'
+import { useAgentsDictionary } from './dictionary'
+
+/**
+ * Renders the Agent selection form in the Right Panel if this is the panel that is currently opened.
+ */
+export const AgentsPanel = () => {
+  const t = useAgentsDictionary()
+  const chat = useCurrentChat()
+  const isTrial = checkIsTrial()
+  const agent = useRef(chat.get('agent'))
+  const features = useWidgetState('features')
+  const isGroupResourcesByScope = features?.groupResourcesByScope
+  const scopes = features?.scopes ?? []
+  const spotId = features?.workspaceId
+
+  useEffect(() => {
+    if (agentToolsClient.agentDefaultSlug !== chat.get('agent')?.slug) {
+      agent.current = chat.get('agent')
+    }
+  }, [chat])
+
+  const allTabsMap: Record<Scope, Omit<Tab, 'key'>> = {
+    favorite: { label: t.favorites, content: <AgentsTab key="favorite" visibility="favorite" agent={agent} /> },
+    builtin: { label: t.builtin, content: <AgentsTab key="builtin" visibility="built_in" agent={agent} /> },
+    personal: { label: t.personal, content: <AgentsTab key="personal" visibility="personal" agent={agent} /> },
+    shared: { label: t.shared, content: <AgentsTab key="shared" visibility="shared" agent={agent} /> },
+    workspace: { label: t.spots, content: <AgentsTabWorkspace key="workspace" visibility="workspace" agent={agent} /> },
+    account: { label: t.account, content: <AgentsTab key="account" visibility="account" agent={agent} /> },
+  }
+   
+  const defaultScopes: Scope[] = ['favorite', 'builtin', 'personal', 'shared', 'workspace', 'account']
+
+  const rawScopes: Scope[] = scopes?.length ? scopes : defaultScopes
+
+  const scopesToRender: Scope[] = isTrial
+    ? ['favorite', 'builtin', 'personal']
+    : rawScopes
+
+  const tabs = scopesToRender
+    .map(scope => scope in allTabsMap ? ({ key: scope, ...allTabsMap[scope] }) : undefined)
+    .filter(Boolean) as Tab[]
+
+  return (isGroupResourcesByScope ? (
+    <RightPanelTabs key={chat.id} tabs={tabs} />
+  ) : (
+    <RightPanelContentList><AgentsTab workspaceId={spotId} agent={agent} /></RightPanelContentList>
+  ))
+}