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

package/src/views/MessageInput/ModelSwitcher/index.tsx

@@ -0,0 +1,69 @@
+import { CitricIconOutline, CitricIconSocial } from '@stack-spot/citric-icons'
+import { AsyncContent, Button, Column, FieldGroup, Icon, Input, Row } from '@stack-spot/citric-react'
+import { SelectionList } from '@stack-spot/portal-components/SelectionList'
+import { agentToolsClient, genAiInferenceClient } from '@stack-spot/portal-network'
+import { useMemo, useState } from 'react'
+import { CSSProperties } from 'styled-components'
+import { useCurrentChat, useCurrentChatState } from '../../../context/hooks'
+import { useMessageInputDictionary } from '../dictionary'
+import { RowWrapperStyled, stylesModelSwitcher } from '../styled'
+import { getListModelsData, handleFilterTypeModel, providerIcon } from './utils'
+
+export const ModelSwitcher = () => {
+  const t = useMessageInputDictionary()
+  const agentCurrentChat = useCurrentChatState('agent')
+  const chat = useCurrentChat()
+  const [filter, setFilter] = useState('')
+  const [visibleMenu, setVisibleMenu] = useState(false)
+  const [agentData, isLoadingAgentData] = agentToolsClient.agent.useStatefulQuery({ agentId: agentCurrentChat?.id || '' }, 
+    { enabled: !!agentCurrentChat?.id })
+  const [models, isLoadingModels] = 
+    genAiInferenceClient.listModels.useStatefulQuery({ pageSize: 999, active: true })
+
+  const { modelName, modelProviderType, listItemsData } = 
+    getListModelsData(chat, setVisibleMenu, agentData, models)
+
+  const data = useMemo(() => {
+    const items = listItemsData ?? []
+    return handleFilterTypeModel(items, t, filter)
+  }, [agentCurrentChat?.id, listItemsData, filter])
+
+  return (
+    <RowWrapperStyled>
+      <AsyncContent loading={isLoadingAgentData && isLoadingModels}>
+        <Button
+          className="button-select-model"
+          colorScheme="light"
+          size="sm"
+          aria-label={t.agent}
+          title={t.agent}
+          onClick={() => setVisibleMenu(state => !state)}
+        >
+          <Icon
+            icon={providerIcon[modelProviderType as CitricIconOutline | CitricIconSocial]} 
+            group={modelProviderType === 'stackspot' ? 'outline' : 'social'} 
+          />
+          {modelName}
+          <Icon icon="ChevronDown" group="fill" size="sm" />
+        </Button>
+      </AsyncContent>
+      <SelectionList
+        id="menuModelSwitcher"
+        items={data || []}
+        visible={visibleMenu}
+        onHide={() => setVisibleMenu(false)}
+        showListAsCard
+        style={stylesModelSwitcher.selection as CSSProperties}
+        before={
+          <Column>
+            <FieldGroup fullWidth style={{ marginTop: '8px' }}>
+              <Icon icon="Search" />
+              <Input type="search" value={filter} onChange={(value) => (setFilter(value))} />
+            </FieldGroup>
+            {!data.length ? <Row m="16px 8px">{t.nothingFound}</Row> : undefined}
+          </Column>
+        }
+      />
+    </RowWrapperStyled>
+  )
+}

package/src/views/MessageInput/ModelSwitcher/utils.tsx

@@ -0,0 +1,143 @@
+import { CitricIconOutline, CitricIconSocial } from '@stack-spot/citric-icons'
+import { IconBox } from '@stack-spot/citric-react'
+import { AgentModel } from '@stack-spot/portal-network/api/agent-tools'
+import { LlmModelsResponse, PaginatedResponseLlmModelsResponse } from '@stack-spot/portal-network/api/genAiInference'
+import { theme } from '@stack-spot/portal-theme'
+import { Dispatch, ReactElement } from 'react'
+import { ChatState } from '../../../state/ChatState'
+
+export interface ItemProps {
+    active?: boolean, 
+    label?: string, 
+    icon?: ReactElement, 
+    self_hosted?: boolean,
+    onClick?: VoidFunction, 
+  }
+
+export const providerIcon: Record<string, CitricIconSocial | CitricIconOutline> = {
+  openai: 'OpenAI',
+  bedrock: 'AWSBedrock',
+  azure: 'Azure',
+  stackspot: 'StackSpot',
+  gemini: 'Gemini',
+  deepseek: 'DeepSeek',
+  anthropic: 'Anthropic',
+}
+
+export function getListModelsData(
+  chat: ChatState, 
+  setVisibleMenu: Dispatch<React.SetStateAction<boolean>>, 
+  agent?: AgentModel,
+  models?: PaginatedResponseLlmModelsResponse) {
+
+  const chatSelectedModelId = chat.get('selected_model_id')
+  
+  const listModelsToShow = agent?.visibility_level !== 'built_in' && !!agent?.model_id ? 
+    models?.items.filter((model) => agent?.available_llm_models?.find((modelAvailable) => modelAvailable.model_id === model.id)) : 
+    models?.items
+
+  const modelAvailableDefault = agent?.available_llm_models?.find((model) => (model.is_default || model.model_id === agent.model_id))
+  const modelListData = parseModelList(chat, setVisibleMenu, listModelsToShow, modelAvailableDefault?.model_id)
+  
+  if (agent?.visibility_level === 'built_in' || !agent?.model_id) {
+    
+    const modelDefaultProviderType = models?.items.find((modelAccount) => 
+      chatSelectedModelId ? modelAccount.id === chatSelectedModelId : 
+        modelAccount.resources.find((resource) => resource.is_default))?.model_configuration.provider.provider_type
+    
+    const modelDefaultActive = modelListData.find((model) => model?.active)
+    
+    return { modelName: modelDefaultActive?.label, modelProviderType: modelDefaultProviderType, listItemsData: modelListData }
+  }
+
+  const modelAccount = models?.items.find((modelAccount) => modelAccount.id === (chatSelectedModelId || agent.model_id))
+  const modelProviderType = modelAccount?.model_configuration.provider.provider_type
+  const modelSelectedName = modelAccount?.display_name || modelAvailableDefault?.model_name || agent?.model_name
+
+  const listItemsData = 
+    modelListData && modelListData?.length > 0 ? modelListData : 
+      [{ 
+        active: true, 
+        label: modelSelectedName || '', 
+        icon: <IconBox icon={providerIcon[modelProviderType || 'stackspot']} 
+          appearance="square"
+          group={modelProviderType === 'stackspot' ? 'outline' : 'social'} />, 
+        self_hosted: modelAccount?.self_hosted || false,
+        onClick: () => {
+          chat.set('selected_model_id', modelAvailableDefault?.model_id)
+          setVisibleMenu(false)
+        },
+      }]
+
+
+  return { modelName: modelSelectedName, modelProviderType, listItemsData }
+}
+
+function parseModelList(
+  chat: ChatState,
+  setVisibleMenu: Dispatch<React.SetStateAction<boolean>>, 
+  listModel?: LlmModelsResponse[], 
+  modelAvailableDefaultId?: string,
+) {
+
+  const data = Array<ItemProps>()
+  const chatModelId = chat.get('selected_model_id')
+
+  listModel?.forEach((model) => {
+    data.push({
+      active: chatModelId ? chatModelId === model.id : modelAvailableDefaultId === model.id || 
+        model.resources?.some((resource) => resource.is_default && resource.name === 'agents'),
+      label: model?.display_name || 'LLM',
+      icon: <IconBox 
+        style={{ backgroundColor: theme.color.light[300] }}
+        appearance="square"
+        icon={providerIcon[model.model_configuration.provider.provider_type]} 
+        group={model.model_configuration.provider.provider_type === 'stackspot' ? 'outline' : 'social'} 
+      />,
+      self_hosted: model.self_hosted,
+      onClick: () => {
+        chat.set('selected_model_id', model.id)
+        setVisibleMenu(false)
+      },
+    })
+  })
+  return data
+}
+
+export function handleFilterTypeModel(items: ItemProps[], t: Record<string, string>, filter?: string) {
+  const filterLower = filter?.toLocaleLowerCase()
+  const filteredItens = items.filter((item) => filterLower ? item?.label?.toLocaleLowerCase().includes(filterLower) : item)
+
+  const { selfHosted, hosted } = filteredItens.reduce(
+    (acc, model) => {
+      if (model?.self_hosted) {
+        acc.selfHosted.push(model)
+      } else {
+        acc.hosted.push(model)
+      }
+      return acc
+    },
+    { selfHosted: [], hosted: [] } as { selfHosted: typeof items, hosted: typeof items },
+  )
+
+  const sections = [
+    { 
+      label: t.hosted, 
+      children:  hosted,
+    },
+    { 
+      label: t.selfHosted, 
+      children:  selfHosted, 
+    },
+  ]
+
+  const filteredByHavingItens = sections
+    .filter(section => section.children.length > 0)
+    .map(section => ({
+      type: 'section',
+      label: section.label,
+      children: section.children,
+    }))
+
+  return filteredByHavingItens
+}

package/src/views/MessageInput/QuickCommandSelector.tsx

@@ -0,0 +1,137 @@
+import { Icon } from '@stack-spot/citric-icons'
+import { AgentVisibilityLevel, aiClient, workspaceAiClient } from '@stack-spot/portal-network'
+import { QuickCommandResponse, VisibilityLevelEnum } from '@stack-spot/portal-network/api/ai'
+import { useCallback } from 'react'
+import { Selector } from '../../components/Selector'
+import { useCurrentChat, useCurrentChatState, useWidgetState } from '../../context/hooks'
+import { quickCommandRegex } from '../../regex'
+
+type QuickCommandResponseWithSpaceName = QuickCommandResponse & { spaceName?: string }
+
+export const QuickCommandSelector = ({ inputRef, isTrial }:
+  { isTrial: boolean, inputRef: React.RefObject<HTMLTextAreaElement | HTMLInputElement> }) => {
+  const chat = useCurrentChat()
+  const isQuickCommandEnabled = useCurrentChatState('features').quickCommands
+  const spotId = useWidgetState('features')?.workspaceId
+
+  const [addFavorite, pendingAddFav] = aiClient.addFavoriteQuickCommand.useMutation()
+  const [removeFavorite, pendingRemoveFav] = aiClient.removeFavoriteQuickCommand.useMutation()
+
+  const addFavoriteQc = async (idOrSlug?: string) => {
+    try {
+      await addFavorite({ slug: idOrSlug || '' })
+      await aiClient.allQuickCommands.invalidate()
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error)
+    }
+  }
+
+  // eslint-disable-next-line no-async-promise-executor
+  const onAddFavorite = (idOrSlug?: string) => new Promise<boolean>(async (resolve, reject) => {
+    try {
+      await addFavoriteQc(idOrSlug)
+      if (!pendingAddFav) {
+        resolve(true)
+      }
+
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error)
+      reject(error)
+    }
+  })
+
+  const removeFavoriteQc = async (idOrSlug?: string) => {
+    try {
+      await removeFavorite({ slug: idOrSlug || '' })
+      await aiClient.allQuickCommands.invalidate()
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error)
+    }
+  }
+
+  // eslint-disable-next-line no-async-promise-executor
+  const onRemoveFavorite = (idOrSlug?: string) => new Promise<boolean>(async (resolve, reject) => {
+    try {
+      await removeFavoriteQc(idOrSlug)
+      if (!pendingRemoveFav) {
+        resolve(true)
+      }
+
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error)
+      reject(error)
+    }
+  })
+
+  const onSelectItem = useCallback((qc: QuickCommandResponseWithSpaceName) => {
+    const newValue = `/${qc.slug}`
+    chat.set('nextMessage', newValue)
+
+    if (!inputRef.current) return
+    inputRef.current.value = newValue
+    inputRef.current.focus()
+  }, [chat, inputRef])
+
+  const getQuickCommands = ({ filter, visibility }: { filter?: string, visibility?: AgentVisibilityLevel[] | VisibilityLevelEnum[] }) => {
+
+    if (spotId) {
+      return { data: workspaceAiClient.getQCFromWorkspaceAi.useQuery({ workspaceId: spotId, name: filter }) }
+    }
+
+    const [quickCommands, { fetchNextPage, hasNextPage }] = aiClient.allQuickCommandsV3.useInfiniteQuery({
+      order: 'a-to-z',
+      visibilityList: visibility as VisibilityLevelEnum[],
+      name: filter,
+      page: 1, size: 20,
+    })
+
+    const quickCommandsFiltered = quickCommands.filter(
+      (qc) => qc.visibility_level.toLowerCase() !== 'workspace',
+    )
+
+    const workspaceQuickCommands = workspaceAiClient.workspacesContentsByType.useQuery({
+      contentType: 'quick_command',
+    })
+
+    const workspaceQuickCommandsWithWorkspaceName: QuickCommandResponseWithSpaceName[] =
+      workspaceQuickCommands.flatMap(({ qcs, space_name }) =>
+        qcs?.map((qc) => ({ ...qc, spaceName: space_name })),
+      ) as QuickCommandResponseWithSpaceName[]
+
+    const filteredWorkspaceQuickCommand = filter ? workspaceQuickCommandsWithWorkspaceName?.filter((qc) => 
+      qc.name?.toLowerCase().includes(filter!)) : workspaceQuickCommandsWithWorkspaceName
+
+    const data = !visibility ? [...quickCommandsFiltered, ...filteredWorkspaceQuickCommand] : (
+      visibility.includes('workspace') ? filteredWorkspaceQuickCommand : quickCommandsFiltered
+    )
+    return { data, fetchNextPage: fetchNextPage, hasNextPage }
+  }
+
+  const QuickCommandItem = ({ slug, description, spaceName }: QuickCommandResponseWithSpaceName) => <>
+    <p className="selector-description">{spaceName}</p>
+    <p className="selector-title">/{slug?.toUpperCase()}</p>
+    <p className="selector-description">{description}</p>
+  </>
+
+  return <Selector
+    inputRef={inputRef}
+    favorite={{ onAddFavorite, onRemoveFavorite, favoriteIsSlug: true }}
+    selectorConfig={{
+      resourceName: 'Quick Command',
+      shortcut: '/',
+      icon: <Icon icon="QuickCommand" />,
+      searchProp: 'slug',
+      urlBuilder: (qc) => `/quick-command/${qc?.slug}`,
+      regex: quickCommandRegex,
+      sections: isTrial ? ['favorite', 'personal'] : ['favorite', 'personal', 'workspace', 'account', 'shared'],
+      isEnabled: isQuickCommandEnabled,
+      onSelect: onSelectItem,
+      renderComponentItem: QuickCommandItem,
+      useData: getQuickCommands,
+    }}
+  />
+}

package/src/views/MessageInput/SelectContent.tsx

@@ -0,0 +1,99 @@
+import { Icon } from '@stack-spot/citric-icons'
+import { IconButton, ImageButton, MenuAction, MenuOverlay, MenuSection } from '@stack-spot/citric-react'
+import { useMemo } from 'react'
+import { useCurrentChat, useCurrentChatState, useWidget } from '../../context/hooks'
+import { useUploadManager } from '../../utils/upload/context'
+import { useMessageInputDictionary } from './dictionary'
+
+export const SelectContent = () => {
+  const widget = useWidget()
+  const features = useCurrentChatState('features')
+  const t = useMessageInputDictionary()
+  const uploadManager = useUploadManager()
+  const hasFeatureButtons = features.workspace || features.knowledgeSource || features.stack || features.upload
+  const chat = useCurrentChat()
+
+  const itemConfigs = useMemo<(MenuAction & { key: keyof typeof features, section: 0 | 1 })[]>(() => ([
+    {
+      role: 'button',
+      key: 'agent',
+      section: 0,
+      label: t.chatAgent,
+      icon: <Icon icon="Agent" />,
+      onClick: (event?: React.MouseEvent) => {
+        event?.stopPropagation()
+        chat.set('nextMessage', '@')
+      },
+    },
+    {
+      role: 'button',
+      key: 'quickCommands',
+      section: 0,
+      label: 'Quick Commands',
+      icon: <Icon icon="QuickCommand" />,
+      onClick: (event?: React.MouseEvent) => {
+        event?.stopPropagation()
+        chat.set('nextMessage', '/')
+      },
+    },
+    {
+      role: 'button',
+      key: 'knowledgeSource',
+      section: 0,
+      label: 'Knowledge Sources',
+      icon: <Icon icon="KnowledgeSource" />,
+      onClick: () => widget.set('panel', 'ks'),
+    },
+    {
+      role: 'button',
+      key: 'stack',
+      section: 0,
+      label: 'Stacks AI',
+      icon: <Icon icon="Stack" />,
+      onClick: () => widget.set('panel', 'stack'),
+    },
+    {
+      role: 'button',
+      key: 'workspace',
+      section: 0,
+      label: 'Spots',
+      icon: <Icon icon="Spaces" />,
+      onClick: () => widget.set('panel', 'workspace'),
+    },
+    {
+      role: 'button',
+      key: 'upload',
+      section: 1,
+      label: t.upload,
+      onClick: () => uploadManager.open(),
+      className: 'upload-item',
+      icon: <Icon icon="DocumentUpload" />,
+    },
+  ] as const).filter(({ key }) => features[key]), [features, widget])
+
+  const listItems = useMemo(() => {
+    const sections: [MenuSection, MenuSection] = [
+      { type: 'section', children: [] },
+      { type: 'section', children: [] },
+    ]
+    itemConfigs.forEach(item => sections[item.section].children.push(item))
+    return sections.filter(s => !!s.children.length)
+  }, [itemConfigs])
+
+  if (!hasFeatureButtons) return null
+
+  return itemConfigs.length > 1 ? (
+    <MenuOverlay items={listItems} position="right" bgLevel={500} roundedItems  menuClass="menu-citric-hr" alignment="end">
+      <IconButton icon="Plus" />
+    </MenuOverlay>
+  ) : (
+    <ImageButton
+      appearance="square"
+      title={`${itemConfigs[0].label}`}
+      aria-label={`${itemConfigs[0].label}`}
+      onClick={itemConfigs[0].onClick}
+    >
+      {itemConfigs[0].icon}
+    </ImageButton>
+  )
+}

package/src/views/MessageInput/UploadBar.tsx

@@ -0,0 +1,107 @@
+import { listToClass } from '@stack-spot/portal-theme'
+import { interpolate } from '@stack-spot/portal-translate'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { FadingOverflow } from '../../components/FadingOverflow'
+import { FileDescription } from '../../components/FileDescription'
+import { useCurrentChat } from '../../context/hooks'
+import { ChatEntry } from '../../state/ChatEntry'
+import { useUploadErrorEffect, useUploadManager, useUploads, useUploadStatus } from '../../utils/upload/context'
+import { FileIsTooLarge, MaxFilesReached } from '../../utils/upload/errors'
+import { FileUpload } from '../../utils/upload/FileUpload'
+import { useMessageInputDictionary } from './dictionary'
+
+interface UploadedFileProps {
+  upload: FileUpload,
+}
+
+function createImageFromFile(file: File) {
+  return <img src={URL.createObjectURL(file)} alt={file.name} />
+}
+
+const UploadItem = ({ upload }: UploadedFileProps) => {
+  const uploadManager = useUploadManager()
+  const icon = upload.file.type.toLowerCase().startsWith('image/') ? createImageFromFile(upload.file) : undefined
+  const status = useUploadStatus(upload)
+
+  return <FileDescription
+    fileName={upload.file.name}
+    icon={icon}
+    onRemove={() => uploadManager.remove(upload)}
+    onRetry={() => upload.retry()}
+    status={status}
+  />
+}
+
+export const UploadBar = () => {
+  const uploads = useUploads()
+  const listItems = useMemo(() => uploads.map((up) => <li key={up.id}><UploadItem upload={up} /></li>), [uploads])
+  const t = useMessageInputDictionary()
+  const chat = useCurrentChat()
+  const visible = !!uploads.length
+  const [ariaMessage, setAriaMessage] = useState('')
+  const prevUploadsRef = useRef<FileUpload[]>([])
+  const announcedUploadsRef = useRef(new Set())
+
+  useEffect(() => {
+    const prevUploads = prevUploadsRef.current
+    const newUploads = uploads.filter(
+      up => !prevUploads.some(prev => prev.id === up.id),
+    )
+    newUploads.forEach((up) => {
+      if (!announcedUploadsRef.current.has(up.id)) {
+        setAriaMessage('') 
+        setTimeout(() => {
+          setAriaMessage(`${t.uploadSuccessStatus}: ${up.file.name}`)
+          setTimeout(() => setAriaMessage(''), 2500) 
+        }, 100) 
+        announcedUploadsRef.current.add(up.id)
+      }
+    })
+    if (uploads.some(up => up.status === 'error')) {
+      setTimeout(() => setAriaMessage(''), 2000)
+    }
+  }, [uploads])
+
+  useUploadErrorEffect((errors) => {
+    const sizeErrors = errors.filter(e => e instanceof FileIsTooLarge)
+    const maxItemsErrors = errors.filter(e => e instanceof MaxFilesReached)
+    const maxSize = sizeErrors[0]?.maxSize
+    const maxItems = maxItemsErrors[0]?.maxFiles
+    const sizeErrorsNames = sizeErrors.map(e => e.fileName)
+    const maxItemsErrorsNames = maxItemsErrors.map(e => e.fileName)
+    const lines: string[] = []
+    if (sizeErrors.length) {
+      lines.push(`${interpolate(t.uploadSizeError, `${maxSize.value} ${maxSize.unit}`)}\n- ${sizeErrorsNames.join('\n- ')}`)
+    }
+    if (maxItemsErrors.length) {
+      lines.push(`${interpolate(t.uploadItemLimitError, maxItems)}\n- ${maxItemsErrorsNames.join('\n- ')}`)
+    }
+    if (!lines.length) return
+    setAriaMessage(lines.join(' '))
+    setTimeout(() => setAriaMessage(''), 2000)
+    chat.pushMessage(new ChatEntry({ agentType: 'system', type: 'md', content: lines.join('\n\n') }))
+
+    if (lines.length) {
+      setAriaMessage(lines.join(' '))
+      setTimeout(() => setAriaMessage(''), 2000)
+      chat.pushMessage(new ChatEntry({ agentType: 'system', type: 'md', content: lines.join('\n\n') }))
+    }
+  })
+  
+  return (
+    <div className={listToClass(['info-bar', 'upload-bar', visible && 'visible'])}>
+      <div className="aria-live"
+        aria-live="polite"
+        aria-atomic="true"
+      >
+        {ariaMessage}
+      </div>
+      <div className="space"></div>
+      <div className="content">
+        <FadingOverflow className="list-overflow" scroll="arrows" enableHorizontalScrollWithVerticalWheel>
+          <ul>{listItems}</ul>
+        </FadingOverflow>
+      </div>
+    </div>
+  )
+}

package/src/views/MessageInput/UploadDragNDrop.tsx

@@ -0,0 +1,79 @@
+import { Icon } from '@stack-spot/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"
+      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()
+      }}
+    >
+      <Icon icon="Document" size="lg" aria-hidden={true} />
+      <h2 id="upload-drag-drop-title">{t.uploadDragDropTitle}</h2>
+      <p id="upload-drag-drop-description">{t.uploadDragDropDescription}</p>
+    </div>
+  )
+}