next.tsx

Overview

next.tsx defines a React functional component named NextMessageInput designed for message input in chat or conversation interfaces within a web application. It integrates rich file upload capabilities alongside text input, enabling users to compose messages with attachments. The component handles file drag-and-drop, file selection via a button trigger, file preview and removal, message submission (including handling keyboard shortcuts), and upload progress indication.

Key features include:

• Drag-and-drop file upload with validation and rejection feedback.

• Display of uploaded file previews with progress bars and delete options.

• Multi-line text input with customizable behavior on pressing Enter.

• Conditional rendering of upload and send buttons with loading and disable states.

• Support for stopping ongoing message output (e.g., streaming message content).

This component relies on several UI and utility components from the codebase, such as FileUpload and its subcomponents, buttons, textareas, and icons.

Detailed API Documentation

Component: NextMessageInput

A React functional component that renders a message input area with file upload support.

Props (IProps)

Description and Usage

The component manages an internal state files (array of File objects) representing currently selected files to upload.

Core Behaviors:

• File Upload and Validation:

  • Uses the FileUpload component from the app's design system.

  • Supports drag-and-drop and manual selection via an icon button.

  • Enforces file rejection with toast notifications if validation fails.

  • Displays file previews with progress bars and a delete button for each file.

• Message Input:

  • Contains a textarea for multi-line input.

  • Pressing Enter without Shift submits the message.

  • Submission clears the selected files.

  • The send button is disabled if the input is empty, sending is disabled, or upload/uploading is in progress.

• Buttons:

  • Upload trigger button (paperclip icon) shows if showUploadIcon is true.

  • Send button shows a loading spinner or a stop button if sending is in progress.

  • Stop button calls stopOutputMessage to abort ongoing message output.

Internal Methods

onFileReject(file: File, message: string): void

• Purpose: Handles rejected files by showing a toast notification with an error message.

• Parameters:

  • file - The rejected file object.

  • message - The reason for rejection.

• Returns: void

• Usage: Passed as a callback to FileUpload's onFileReject prop.

submit(): void

• Purpose: Submits the message by invoking onPressEnter and clears the file list.

• Behavior: Does nothing if isUploading is true to prevent duplicate submissions.

• Returns: void

handleKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>): void

• Purpose: Handles keyboard events in the textarea.

• Behavior: Submits the message if Enter is pressed without Shift.

• Returns: void

onSubmit(event: React.FormEvent<HTMLFormElement>): void

• Purpose: Handles form submission event.

• Behavior: Prevents default form submit and calls submit().

• Returns: void

handleRemoveFile(file: File): () => void

• Purpose: Returns a callback function that removes a specific file from the upload list by calling the removeFile prop.

• Returns: A function that when invoked calls removeFile(file) if provided.

JSX Structure and Interaction

• FileUpload: Wraps the entire input and upload UI, managing file state and upload lifecycle.

• FileUploadDropzone: Invisible overlay enabling drag-and-drop file upload.

• form: Contains the message textarea and buttons; handles submit event.

• FileUploadList: Horizontally scrollable list showing all selected files.

• FileUploadItem: Displays each file preview, progress, metadata, and delete button.

• Textarea: The text input area.

• Buttons:

  • Attachment button triggers file selection UI.

  • Send button submits the message.

  • Stop button cancels ongoing output.

Usage Example

<NextMessageInput
  disabled={false}
  value={message}
  sendDisabled={false}
  sendLoading={isSending}
  conversationId="12345"
  onPressEnter={() => sendMessage(message)}
  onInputChange={(e) => setMessage(e.target.value)}
  isUploading={uploadingFiles}
  onUpload={handleFileUpload}
  removeFile={handleFileRemove}
  stopOutputMessage={cancelMessageStreaming}
  showUploadIcon={true}
/>

Implementation Details

• File Upload Handling:
  Uses a controlled file list state internally, synchronizing with the parent via onUpload and removeFile callbacks.

• Form Submission Logic:
  The component prevents form submission via Enter key if Shift is not held, enabling quick message sending without new lines.

• Accessibility:
  Buttons have sr-only spans for screen reader labeling.

• Visual Feedback:
  The dropzone gives a semi-transparent overlay when dragging files. File upload items display progress bars and allow removal.

• Localization:
  Uses t from i18next for the textarea placeholder text.

• Toast Notifications:
  Invalid files trigger a toast with a truncated filename for better UX.

Interaction with Other Parts of the System

• File Upload Components:
  Relies heavily on a custom FileUpload component and its subcomponents (FileUploadItem, FileUploadDropzone, etc.) from the /components/file-upload module to manage file input and display.

• UI Components:
  Uses UI primitives such as Button and Textarea from /components/ui.

• Icons:
  Uses icons from the lucide-react library.

• Localization:
  Integrates with the i18next localization framework for dynamic text.

• Toasts:
  Uses the sonner toast library for notifications.

• Parent Component:
  Expects callbacks (onPressEnter, onInputChange, onUpload, removeFile) to be passed from the parent to handle message sending and file management at the application level.

Mermaid Component Diagram

componentDiagram
    component NextMessageInput {
        +files: File[]
        +onFileReject(file, message): void
        +submit(): void
        +handleKeyDown(e): void
        +onSubmit(event): void
        +handleRemoveFile(file): () => void
    }
    component FileUpload {
        +value
        +onValueChange
        +onUpload
        +onFileReject
    }
    component FileUploadDropzone
    component FileUploadList
    component FileUploadItem
    component FileUploadItemPreview
    component FileUploadItemProgress
    component FileUploadItemMetadata
    component FileUploadItemDelete
    component FileUploadTrigger
    component Textarea
    component Button
    NextMessageInput --> FileUpload
    FileUpload --> FileUploadDropzone
    FileUpload --> FileUploadList
    FileUploadList --> FileUploadItem
    FileUploadItem --> FileUploadItemPreview
    FileUploadItemPreview --> FileUploadItemProgress
    FileUploadItem --> FileUploadItemMetadata
    FileUploadItem --> FileUploadItemDelete
    FileUpload --> FileUploadTrigger
    NextMessageInput --> Textarea
    NextMessageInput --> Button

Summary

The NextMessageInput component is a sophisticated UI control for chat-like applications that require combined text and file message input. It cleanly encapsulates file handling, user interaction, and message submission logic, while delegating actual upload and message sending to parent handlers. The component is highly reusable and integrates seamlessly with a design system and localization framework.