@stack-spot/ai-chat-widget 1.28.1-beta.3 → 1.28.1

package/src/views/Chat/ChatMessage.tsx

@@ -1,7 +1,7 @@
 import { Box, Button, Checkbox, Flex, IconBox, Input, Label, Radio, Text } from '@citric/core'
 import { Check, Cog, Copy, Dislike, DislikeFill, Like, LikeFill, TimesCircle } from '@citric/icons'
 import { Badge, IconButton, Tooltip } from '@citric/ui'
-import { agentToolsClient } from '@stack-spot/portal-network'
+import { agentClient } from '@stack-spot/portal-network'
 import { listToClass } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { groupBy } from 'lodash'
@@ -193,7 +193,7 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage }: Pr
   const widget = useWidget()
   const chat = useCurrentChat()
   const agentId = entry.agent?.id ?? ''
-  const [toolKits] = agentToolsClient.tools.useStatefulQuery({}, { enabled: !!agentId })
+  const [agent] = agentClient.agentById.useStatefulQuery({ agentId, builtIn: !!entry?.agent?.builtIn }, { enabled: !!agentId  })
   const [copied, setCopied] = useState(false)
   const [showUserButtonCopy, setShowUserButtonCopy] = useState(false)
 
@@ -348,7 +348,7 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage }: Pr
           className="tools-badge"
           label={t.tools}
           images={entry.tools.slice(0, 3).map((id) => {
-            const tool = toolById(id, toolKits)
+            const tool = toolById(id, agent?.toolkits)
             return { key: id, name: tool?.name || id, icon: <Cog />, url: tool?.image }
           })}
           onClick={openToolsPanel}

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/dictionary.ts

@@ -9,7 +9,6 @@ const dictionary = {
     agent: 'Select agent',
     send: 'Send message',
     placeholder: 'Send a message to $0. For commands, use @ or /',
-    typing: 'Type your message...',
     cancel: 'Cancel',
     removeConfig: 'Remove all the configuration',
     removeStack: 'Stop using the current stack',
@@ -23,10 +22,6 @@ const dictionary = {
     collapse: 'Collapse options',
     uploadSizeError: 'The following files were not added to the upload list because they\'re larger than $1:',
     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',
     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.',
@@ -40,7 +35,6 @@ const dictionary = {
     agent: 'Selecionar agente',
     send: 'Enviar mensagem',
     placeholder: 'Envie uma mensagem para $0. Para comandos, use @ ou /',
-    typing: 'Digite sua mensagem...',
     cancel: 'Cancelar',
     removeConfig: 'Remover todas as configurações',
     removeStack: 'Parar de usar a stack atual',
@@ -55,9 +49,6 @@ const dictionary = {
     uploadSizeError: 'Os seguintes arquivos não foram adicionados à lista de upload porque eles são maiores que $0:',
     uploadItemLimitError: 'Os seguintes arquivos não foram adicionados à lista de upload porque é permitido enviar no máximo $0 arquivos por vez:',
     uploadError: 'Ocorreu um erro ao enviar o arquivo "$0".',
-    uploadDragging: 'Solte o arquivo aqui para fazer upload',
-    uploadDragDropTitle: 'Solte seus arquivos aqui',
-    uploadDragDropDescription: 'Arraste ou solte arquivos para compartilhar na conversa',
     unknownUploadError: 'Ocorreu um erro ao enviar os arquivos.',
     cantSendBecauseOfUploadError: 'Não é possível enviar a mensagem, pois um dos arquivos na lista de uploads não pôde ser enviado. Por favor, tente enviá-lo novamente ou remova-o da lista.',
     cantSendBecauseOfUploadProgress: 'Por favor aguarde todos os uploads de arquivos antes de enviar a mensagem. Você pode cancelar o upload removendo o arquivo da lista de uploads.',

package/src/views/MessageInput/index.tsx

@@ -8,7 +8,6 @@ import { quickCommandRegex } from '../../regex'
 import { ChatEntry } from '../../state/ChatEntry'
 import { checkIsTrial } from '../../utils/check-is-trial'
 import { UploadProvider } from '../../utils/upload/context'
-import { usePasteUpload } from '../../utils/upload/use-paste-upload'
 import { AgentSelector } from './AgentSelector'
 import { ButtonAgent } from './ButtonAgent'
 import { ButtonBar } from './ButtonBar'
@@ -18,7 +17,6 @@ import { useMessageInputDictionary } from './dictionary'
 import { QuickCommandSelector } from './QuickCommandSelector'
 import { MAX_INPUT_HEIGHT, MessageInputBox, MIN_INPUT_HEIGHT } from './styled'
 import { UploadBar } from './UploadBar'
-import { UploadDragNDrop, useUploadDragDrop } from './UploadDragNDrop'
 
 /**
  * This renders the MessageInput part of the layout which includes the progress bar, the actual textarea, the badges telling what is
@@ -38,13 +36,6 @@ export const MessageInput = () => {
   const agentLabel = useCurrentChatState('agent')?.label
   const { handleKeyDown, handleKeyUp } = useUserEntryHistoryShortcut()
   const isTrial = checkIsTrial()
-  const { isDragging, handleDrop, handleDragLeave } = useUploadDragDrop()
-
-  usePasteUpload({
-    textAreaRef,
-    onUploadFiles: files => chat.uploadManager.add(files),
-    enabled: !isLoading,
-  })
 
   const checkSendRequirements = useCallback(() => {
     if (chat.uploadManager.status === 'error') {
@@ -121,11 +112,7 @@ export const MessageInput = () => {
             <ButtonAgent />
             <AdaptiveTextArea
               ref={textAreaRef}
-              placeholder={
-                agentLabel
-                  ? interpolate(t.placeholder, agentLabel)
-                  : t.typing
-              }
+              placeholder={agentLabel && interpolate(t.placeholder, agentLabel)}
               onChange={e => chat.set('nextMessage', e.target.value)}
               value={value}
               onFocus={() => setFocused(true)}
@@ -144,7 +131,6 @@ export const MessageInput = () => {
         {chat.get('features').upload && <UploadBar />}
         <ButtonBar onSend={onSend} isLoading={isLoading} />
       </MessageInputBox>
-      <UploadDragNDrop isDragging={isDragging} onDrop={handleDrop} onDragLeave={handleDragLeave} />
     </UploadProvider>
   )
 }

package/src/views/MessageInput/styled.ts

@@ -6,7 +6,7 @@ const CONTEXT_BAR_HEIGHT = 38
 const CONTEXT_BAR_DISPLACEMENT = 4
 const UPLOAD_BAR_HEIGHT = 60
 const UPLOAD_BAR_DISPLACEMENT = 4
-export const MAX_INPUT_HEIGHT = 300
+export const MAX_INPUT_HEIGHT = 200
 export const MIN_INPUT_HEIGHT = 24
 
 export const SelectionBarWrapper = styled.div`

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 })

package/dist/utils/upload/use-paste-upload.d.ts

@@ -1,8 +0,0 @@
-interface UsePasteUploadProps {
-    textAreaRef: React.RefObject<HTMLTextAreaElement>;
-    onUploadFiles: (files: File[]) => void;
-    enabled?: boolean;
-}
-export declare const usePasteUpload: ({ textAreaRef, onUploadFiles, enabled, }: UsePasteUploadProps) => void;
-export {};
-//# sourceMappingURL=use-paste-upload.d.ts.map

package/dist/utils/upload/use-paste-upload.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-paste-upload.d.ts","sourceRoot":"","sources":["../../../src/utils/upload/use-paste-upload.tsx"],"names":[],"mappings":"AAEA,UAAU,mBAAmB;IAC3B,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,mBAAmB,CAAC,CAAC;IAClD,aAAa,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,cAAc,6CAIxB,mBAAmB,SAiBrB,CAAA"}

package/dist/utils/upload/use-paste-upload.js

@@ -1,19 +0,0 @@
-import { useEffect } from 'react';
-export const usePasteUpload = ({ textAreaRef, onUploadFiles, enabled = true, }) => {
-    useEffect(() => {
-        const textarea = textAreaRef.current;
-        if (!textarea || !enabled)
-            return;
-        const handlePaste = (e) => {
-            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]);
-};
-//# sourceMappingURL=use-paste-upload.js.map

package/dist/utils/upload/use-paste-upload.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-paste-upload.js","sourceRoot":"","sources":["../../../src/utils/upload/use-paste-upload.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAQjC,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,WAAW,EACX,aAAa,EACb,OAAO,GAAG,IAAI,GACM,EAAE,EAAE;IACxB,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,QAAQ,GAAG,WAAW,CAAC,OAAO,CAAA;QACpC,IAAI,CAAC,QAAQ,IAAI,CAAC,OAAO;YAAE,OAAM;QAEjC,MAAM,WAAW,GAAG,CAAC,CAAiB,EAAE,EAAE;YACxC,IAAI,CAAC,CAAC,aAAa,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;gBACnC,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAA;gBAChD,CAAC,CAAC,cAAc,EAAE,CAAA;YACpB,CAAC;QACH,CAAC,CAAA;QAED,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAA;QAC/C,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAA;QACpD,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,aAAa,EAAE,WAAW,EAAE,OAAO,CAAC,CAAC,CAAA;AAC3C,CAAC,CAAA"}

package/dist/views/MessageInput/UploadDragNDrop.d.ts

@@ -1,14 +0,0 @@
-import { DragEvent } from 'react';
-export declare function useUploadDragDrop(containerSelector?: string): {
-    isDragging: boolean;
-    handleDrop: (e: DragEvent) => void;
-    handleDragLeave: (e: DragEvent) => void;
-};
-interface UploadDragNDropProps {
-    isDragging?: boolean;
-    onDrop?: (e: DragEvent) => void;
-    onDragLeave?: (e: DragEvent) => void;
-}
-export declare const UploadDragNDrop: ({ isDragging, onDrop, onDragLeave }: UploadDragNDropProps) => import("react/jsx-runtime").JSX.Element | null;
-export {};
-//# sourceMappingURL=UploadDragNDrop.d.ts.map

package/dist/views/MessageInput/UploadDragNDrop.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"UploadDragNDrop.d.ts","sourceRoot":"","sources":["../../../src/views/MessageInput/UploadDragNDrop.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAoC,MAAM,OAAO,CAAA;AAInE,wBAAgB,iBAAiB,CAAC,iBAAiB,GAAE,MAA0B;;oBAI1C,SAAS;yBASJ,SAAS;EA2BlD;AAED,UAAU,oBAAoB;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,CAAC;IAChC,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,CAAC;CACtC;AAED,eAAO,MAAM,eAAe,wCAAyC,oBAAoB,mDA4BxF,CAAA"}

package/dist/views/MessageInput/UploadDragNDrop.js

@@ -1,52 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { IconBox } from '@citric/core';
-import { Document } from '@citric/icons';
-import { useCallback, useEffect, useState } from 'react';
-import { useCurrentChat } from '../../context/hooks.js';
-import { useMessageInputDictionary } from './dictionary.js';
-export function useUploadDragDrop(containerSelector = '.chat-container') {
-    const [isDragging, setIsDragging] = useState(false);
-    const chat = useCurrentChat();
-    const handleDrop = useCallback((e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        setIsDragging(false);
-        if (e.dataTransfer?.files?.length) {
-            chat.uploadManager.add(Array.from(e.dataTransfer.files));
-        }
-    }, [chat]);
-    const handleDragLeave = useCallback((e) => {
-        e.preventDefault();
-        if (e.currentTarget && !e.currentTarget.contains(e.relatedTarget)) {
-            setIsDragging(false);
-        }
-    }, []);
-    useEffect(() => {
-        const container = document.querySelector(containerSelector);
-        if (!container)
-            return;
-        const nativeHandleDragEnter = (e) => {
-            e.preventDefault();
-            setIsDragging(true);
-        };
-        container.addEventListener('dragenter', nativeHandleDragEnter);
-        return () => {
-            container.removeEventListener('dragenter', nativeHandleDragEnter);
-        };
-    }, [containerSelector]);
-    return {
-        isDragging,
-        handleDrop,
-        handleDragLeave,
-    };
-}
-export const UploadDragNDrop = ({ isDragging, onDrop, onDragLeave }) => {
-    const t = useMessageInputDictionary();
-    if (!isDragging)
-        return null;
-    return (_jsxs("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", onDrop: onDrop, onDragLeave: onDragLeave, onDragOver: e => {
-            e.preventDefault();
-            e.stopPropagation();
-        }, tabIndex: -1, children: [_jsx(IconBox, { size: "lg", "aria-hidden": true, children: _jsx(Document, {}) }), _jsx("h2", { id: "upload-drag-drop-title", children: t.uploadDragDropTitle }), _jsx("p", { id: "upload-drag-drop-description", children: t.uploadDragDropDescription })] }));
-};
-//# sourceMappingURL=UploadDragNDrop.js.map

package/dist/views/MessageInput/UploadDragNDrop.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"UploadDragNDrop.js","sourceRoot":"","sources":["../../../src/views/MessageInput/UploadDragNDrop.tsx"],"names":[],"mappings":"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"}

package/src/utils/upload/use-paste-upload.tsx

@@ -1,30 +0,0 @@
-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/views/MessageInput/UploadDragNDrop.tsx

@@ -1,83 +0,0 @@
-import { IconBox } from '@citric/core'
-import { Document } from '@citric/icons'
-import { DragEvent, useCallback, useEffect, useState } from 'react'
-import { useCurrentChat } from '../../context/hooks'
-import { useMessageInputDictionary } from './dictionary'
-
-export function useUploadDragDrop(containerSelector: string = '.chat-container') {
-  const [isDragging, setIsDragging] = useState(false)
-  const chat = useCurrentChat()
-
-  const handleDrop = useCallback((e: DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    setIsDragging(false)
-    if (e.dataTransfer?.files?.length) {
-      chat.uploadManager.add(Array.from(e.dataTransfer.files))
-    }
-  }, [chat])
-
-  const handleDragLeave = useCallback((e: DragEvent) => {
-    e.preventDefault()
-    if (e.currentTarget && !e.currentTarget.contains(e.relatedTarget as Node)) {
-      setIsDragging(false)
-    }
-  }, [])
-
-  useEffect(() => {
-    const container = document.querySelector(containerSelector) as HTMLDivElement | null
-    if (!container) return
-
-    const nativeHandleDragEnter = (e: Event) => {
-      e.preventDefault()
-      setIsDragging(true)
-    }
-
-    container.addEventListener('dragenter', nativeHandleDragEnter)
-    return () => {
-      container.removeEventListener('dragenter', nativeHandleDragEnter)
-    }
-  }, [containerSelector])
-
-  return {
-    isDragging,
-    handleDrop,
-    handleDragLeave,
-  }
-}
-
-interface UploadDragNDropProps {
-  isDragging?: boolean,
-  onDrop?: (e: DragEvent) => void,
-  onDragLeave?: (e: DragEvent) => void,
-}
-
-export const UploadDragNDrop = ({ isDragging, onDrop, onDragLeave }: UploadDragNDropProps) => {
-  const t = useMessageInputDictionary()
-
-  if (!isDragging) return null
-
-  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"
-      onDrop={onDrop}
-      onDragLeave={onDragLeave}
-      onDragOver={e => {
-        e.preventDefault()
-        e.stopPropagation()
-      }}
-      tabIndex={-1}
-    >
-      <IconBox size="lg" aria-hidden={true}>
-        <Document />
-      </IconBox>
-      <h2 id="upload-drag-drop-title">{t.uploadDragDropTitle}</h2>
-      <p id="upload-drag-drop-description">{t.uploadDragDropDescription}</p>
-    </div>
-  )
-}