@stack-spot/ai-chat-widget 1.29.1-beta.0 → 1.29.1

package/src/views/ChatHistory/HistoryItem.tsx

@@ -2,7 +2,7 @@ import { IconBox, Input } from '@citric/core'
 import { Check, Download, EllipsisHorizontal, Pencil, Trash } from '@citric/icons'
 import { IconButton, LoadingCircular } from '@citric/ui'
 import { focusNextIgnoringChildren } from '@stack-spot/portal-components'
-import { agentToolsClient, aiClient } from '@stack-spot/portal-network'
+import { aiClient } from '@stack-spot/portal-network'
 import { ConversationResponse } from '@stack-spot/portal-network/api/ai'
 import { theme } from '@stack-spot/portal-theme'
 import { last } from 'lodash'
@@ -11,13 +11,12 @@ import { OverlayMenu } from '../../components/OverlayMenu'
 import { useWidget } from '../../context/hooks'
 import { ChatEntry } from '../../state/ChatEntry'
 import { ChatState } from '../../state/ChatState'
-import { LabeledAgent } from '../../state/types'
 import { ButtonAction } from '../../types'
 import { download } from '../../utils/download'
 import { genericSourcesToKnowledgeSources } from '../../utils/knowledge-source'
 import { useHistoryDictionary } from './dictionary'
 import { HistoryItemBox } from './styled'
-import { findStack, findWorkspace } from './utils'
+import { findStack, findWorkspace, getAllAgents } from './utils'
 
 /**
  * Renders an item of the list of conversations (history).
@@ -89,16 +88,12 @@ export const HistoryItem = ({ item }: { item: ConversationResponse }) => {
     setLoading(true)
     try {
       const chat = await aiClient.chat.query({ conversationId: item.id })
-      const historyAgentIds = chat.history?.map(item => item.custom_agent?.id).filter(Boolean) as string[] ?? []
       const [stack, workspace, agents] = await Promise.all([
         findStack(chat.ai_stack_id),
         findWorkspace(chat.workspace_id),
-        agentToolsClient.agentsByIds.query({ searchAgentsRequest: { ids: historyAgentIds } }),
+        getAllAgents(),
       ])
-      const agentsAsLabeledAgents: LabeledAgent[] = agents
-        .map((a) => ({ ...a, label: a.name, image: a.avatar ?? '', builtIn: a.visibility_level === 'built_in' }))
-      
-      const agent = agentsAsLabeledAgents.find(a => a.id === last(chat.history)?.custom_agent?.id)
+      const agent = agents.find(a => a.id === last(chat.history)?.custom_agent?.id)
       const builtIn = !!last(chat.history ?? [])?.custom_agent?.built_in
       widget.chatTabs.add(new ChatState({
         id: chat.id,
@@ -108,7 +103,7 @@ export const HistoryItem = ({ item }: { item: ConversationResponse }) => {
           agentType: item.agent === 'USER' ? 'user' : 'bot',
           content: item.content,
           type: 'md',
-          agent: agentsAsLabeledAgents.find(a => a.id === item.custom_agent?.id),
+          agent: agents.find(a => a.id === item.custom_agent?.id),
           messageId: item.message_id,
           knowledgeSources: item.agent === 'USER' ? undefined : genericSourcesToKnowledgeSources(item.sources),
           updated: item.updated,

package/src/views/ChatHistory/utils.ts

@@ -1,5 +1,6 @@
-import { aiClient, workspaceClient } from '@stack-spot/portal-network'
+import { agentClient, aiClient, workspaceClient } from '@stack-spot/portal-network'
 import { ChatProperties } from '../../state/ChatState'
+import { LabeledWithImage } from '../../state/types'
 
 /**
  * Finds a stack by its id.
@@ -35,3 +36,19 @@ export async function findWorkspace(id: string | null): Promise<ChatProperties['
     return { id, label: id }
   }
 }
+
+
+/**
+ * Finds all the agents, including common agents and public agents.
+ * @returns an array with every agent.
+ */
+export async function getAllAgents(): Promise<LabeledWithImage[]> {
+  try {
+    const agents = await agentClient.allAgents.query({ visibilities: ['ALL'] })
+    return agents.map(a => ({ id: a.id, label: a.name, image: a.avatar, slug: a.slug, builtIn: a.builtIn }))
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error(error)
+    return []
+  }
+}

package/src/views/Home/CustomAgent.tsx

@@ -1,6 +1,6 @@
 import { IconBox, Text } from '@citric/core'
 import { Agent } from '@citric/icons'
-import { agentToolsClient } from '@stack-spot/portal-network'
+import { agentClient } from '@stack-spot/portal-network'
 import { useMemo } from 'react'
 import { QuickStartButton } from '../../components/QuickStartButton'
 import { useCurrentChat, useCurrentChatState } from '../../context/hooks'
@@ -12,15 +12,15 @@ import { HomeBox } from './styled'
  */
 export const CustomAgent = () => {
   const { id, label, image } = useCurrentChatState('agent') ?? {}
-  const [agent] = agentToolsClient.agent.useStatefulQuery({ agentId: id! })
+  const [agent] = agentClient.agent.useStatefulQuery({ agentId: id! })
   const chat = useCurrentChat()
-  const suggestions = useMemo(() => agent?.conversation_starter?.map((prompt, index) => (
+  const suggestions = useMemo(() => agent?.suggested_prompts?.map((prompt, index) => (
     <QuickStartButton
       key={index}
       label={prompt}
       onClick={() => send(prompt)}
     />
-  )), [agent?.conversation_starter])
+  )), [agent?.suggested_prompts])
 
   function send(message: string) {
     chat.pushMessage(ChatEntry.createUserEntry(message))

package/src/views/MessageInput/AgentSelector.tsx

@@ -1,6 +1,6 @@
 import { Flex, IconBox, Image } from '@citric/core'
 import { Agent } from '@citric/icons'
-import { AgentResponseWithBuiltIn, agentToolsClient } from '@stack-spot/portal-network'
+import { agentClient, AgentResponseWithBuiltIn } from '@stack-spot/portal-network'
 import { useCallback } from 'react'
 import { Selector } from '../../components/Selector'
 import { useCurrentChat, useCurrentChatState } from '../../context/hooks'
@@ -53,9 +53,9 @@ export const AgentSelector = ({ inputRef, isTrial }: {
 
   const getAgents = () => {
     if (isTrial) {
-      return agentToolsClient.allAgents.useQuery({ visibilities: ['personal', 'built_in'] })
+      return agentClient.allAgents.useQuery({ visibilities: ['PERSONAL', 'BUILT-IN'] }) 
     }
-    return agentToolsClient.allAgents.useQuery({ visibilities: ['account', 'shared', 'personal', 'built_in', 'workspace'] })
+    return agentClient.allAgents.useQuery({ visibilities: ['ACCOUNT', 'SHARED', 'PERSONAL', 'BUILT-IN', 'WORKSPACE'] })
   }
 
   return <Selector
@@ -68,7 +68,7 @@ export const AgentSelector = ({ inputRef, isTrial }: {
       regex: agentRegex,
       urlBuilder: (agent) => `/agents/${agent?.id}`,
       searchProp: 'name',
-      sections: isTrial ? ['favorite', 'personal', 'built_in'] : ['favorite', 'personal', 'workspace', 'account', 'shared', 'built_in'],
+      sections: isTrial ? ['favorite', 'personal', 'built-in'] : ['favorite', 'personal', 'workspace', 'account', 'shared', 'built-in'],
       renderComponentItem: AgentItem,
       isEnabled: isAgentEnabled,
       onSelect: onSelectItem,

package/src/views/MessageInput/ButtonAgent.tsx

@@ -2,14 +2,14 @@ import { Flex, IconBox } from '@citric/core'
 import { Agent, TimesMini } from '@citric/icons'
 import { IconButton, Tooltip } from '@citric/ui'
 import { MiniLogo } from '@stack-spot/portal-components/svg'
-import { agentToolsClient } from '@stack-spot/portal-network'
+import { agentClient } from '@stack-spot/portal-network'
 import { useEffect } from 'react'
 import { useCurrentChat, useCurrentChatState, useWidget } from '../../context/hooks'
 import { useMessageInputDictionary } from './dictionary'
 
 export const ButtonAgent = () => {
   const t = useMessageInputDictionary()
-  const agentDefault = agentToolsClient.agentDefault.useQuery()
+  const agentDefault = agentClient.agentDefault.useQuery({})
   const widget = useWidget()
   const chat = useCurrentChat()
   const agent = useCurrentChatState('agent')

package/src/views/MessageInput/UploadDragNDrop.tsx

@@ -60,18 +60,17 @@ export const UploadDragNDrop = ({ isDragging, onDrop, onDragLeave }: UploadDragN
   return (
     <div
       className="upload-drag-drop"
-      data-active={isDragging}
       role="dialog"
       aria-modal="true"
       aria-labelledby="upload-drag-drop-title"
       aria-describedby="upload-drag-drop-description"
+      tabIndex={-1}
       onDrop={onDrop}
       onDragLeave={onDragLeave}
       onDragOver={e => {
         e.preventDefault()
         e.stopPropagation()
       }}
-      tabIndex={-1}
     >
       <IconBox size="lg" aria-hidden={true}>
         <Document />

package/src/views/MessageInput/dictionary.ts

@@ -25,8 +25,9 @@ const dictionary = {
     uploadItemLimitError: 'The following files were not added because no more than $1 items may be uploaded at a time:',
     uploadError: 'An error occurred while uploading the file "$0".',
     uploadDragging: 'Drop the file here to upload',
-    uploadDragDropTitle: 'Arraste e solte arquivos',
-    uploadDragDropDescription: 'Solte arquivos aqui para enviá-los na conversa',
+    uploadDragDropTitle: 'Drop your files here',
+    uploadDragDropDescription: 'Drag or drop files to share in the conversation',
+    unknownUploadError: 'An error occurred while uploading the files.',
     cantSendBecauseOfUploadError: 'Can\'t send the message because one of the files in the upload list could not be uploaded. Please, retry it or remove it from the list.',
     cantSendBecauseOfUploadProgress: 'Please wait until all files are uploaded before sending the message. You can also cancel the upload by removing it from the list of uploads.',
     cantSendBecauseOfEmptyContent: 'You can\'t send empty messages. Please write some text or upload a file.',

package/src/views/MessageInput/index.tsx

@@ -25,7 +25,7 @@ import { UploadDragNDrop, useUploadDragDrop } from './UploadDragNDrop'
  * going to be used for the question and the buttons to send, cancel, set the workspace, among others. This also includes the Quick
  * Commands panel for auto completing.
  */
-export const MessageInput = ({ containerRef }: { containerRef?: React.RefObject<HTMLElement> }) => {
+export const MessageInput = ({ chatWindowRef }: { chatWindowRef?: React.RefObject<HTMLElement> }) => {
   const t = useMessageInputDictionary()
   const [focused, setFocused] = useState(false)
   const [, setExpanded] = useState(true)
@@ -119,7 +119,7 @@ export const MessageInput = ({ containerRef }: { containerRef?: React.RefObject<
           <div className={listToClass(['action-box', focused && 'focused', isLoading && 'disabled'])}>
             <ButtonAgent />
             <AdaptiveTextArea
-              containerRef={containerRef}
+              chatWindowRef={chatWindowRef}
               ref={textAreaRef}
               placeholder={
                 agentLabel

package/src/views/Tools.tsx

@@ -1,4 +1,4 @@
-import { agentToolsClient } from '@stack-spot/portal-network'
+import { agentClient } from '@stack-spot/portal-network'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { useEffect, useMemo } from 'react'
 import styled from 'styled-components'
@@ -40,9 +40,8 @@ const ToolsPanel = () => {
     const chat = widget.chatTabs.getAll().find(c => c.id === chatId)
     return chat?.getMessages().find(m => m.id === messageId)?.getValue()
   }, [messageId])
-
-  const [toolKits] = agentToolsClient.tools.useStatefulQuery({}, { enabled: !!message?.agent?.id })
-  const tools = useMemo(() => message?.tools?.map(id => toolById(id, toolKits) ?? { id }), [messageId, toolKits])
+  const [agent] = agentClient.agent.useStatefulQuery({ agentId: message?.agent?.id ?? '' }, { enabled: !!message?.agent?.id })
+  const tools = useMemo(() => message?.tools?.map(id => toolById(id, agent?.toolkits) ?? { id }), [messageId, agent])
 
   return !!tools?.length && (
     <ToolList>

package/src/views/Workspaces/WorkspacesTab.tsx

@@ -60,7 +60,7 @@ export const WorkspaceResources = ({ workspaceId, allKS, agent, stack }: Omit<Ta
   const handleNavigate = (resource: WorkspaceResource) => {
     startTransition(() => {
       if (resource.resourceType === 'agent')
-        navigate({ component: 'agent', props: { visibility: 'workspace', agent, workspaceId, showSubmitButton }, fullScreen: true })
+        navigate({ component: 'agent', props: { visibility: 'WORKSPACE', agent, workspaceId, showSubmitButton }, fullScreen: true })
 
       if (resource.resourceType === 'ks')
         navigate({ component: 'ks', props: { visibility: 'workspace', allKS, workspaceId, showSubmitButton }, fullScreen: true })