newOS for Developers

Back to Overview

ChatInput

input685 linesPlayground

The primary AI chat interface with file attachments, @mentions, agent orchestration, and subscription-aware messaging.

Source Path
apps/web/Components/Model/folder/ChatInput.tsx
Package

@newos/web

Props Interface

type ChatInputParams = IndexedById & {
  // Callbacks
  onSubmitStart?: Callback;    // Called before message send
  onSubmitEnd?: Callback;      // Called after message send
  
  // Configuration
  id: string;                  // Folder/Mood ID to post to
  prompt?: string;             // Placeholder override
  disabled?: boolean;          // Disable input
  className: string;           // CSS class for styling
  
  // Flow Settings
  onFlowChange?: (flow: string) => void;
  toggleWebSearch?: () => void;
  toggleSwarm?: () => void;
  isWebSearch?: boolean;
  isSwarm?: boolean;
  
  // Optional UI
  extra?: React.ReactElement;  // Additional UI elements
};

Data Flow & API Calls

Reads (Input)

readFolder({ id }) — Fetches folder metadata and access level
readFolderGrantees({ id }) — Gets folder contributors/agents
current() — Gets current authenticated user
liveSubscribe(id) — Subscribes to real-time folder updates

Writes (Output)

createPostMultiple() — Creates posts with file attachments
Parameters: content, files, foldersToAttach, contentMode, flow, internalUrls

Key Features

@Agent Mentions

Type / followed by an agent username to trigger autocomplete dropdown. Agent names are highlighted in the message using highlightUsernames().

File Attachments

Supports up to 5 files (25 for blank flow). Uses UploadDialog for preview and UploadWithPreviews wrapper for drag-drop.

Subscription Gating

Checks currUser.subscriptionLevel for Swarm feature access. Displays credit remaining via useSubscriberInfo hook.

Persistent Input

Chat content is saved to localStorage with key persistent-inputand restored on page reload.

Flow Settings

Configurable AI flow using useFlowSettings hook. Supports web search, swarm mode, and custom reasoning flows.

Edge Cases & Gotchas

1:1 Agent Chats — When folder has exactly 2 contributors and one is an agent, messages are auto-prefixed with /{agentUsername}.
Access Level Check — instantAccessLevel is cast from_folder.accessLevel and affects contributor list filtering.
Credit System — outOfCredits blocks sending and shows subscription alert. Check computeCredit < -20 threshold.
attachOpenRef Pattern — Uses ref to track attachment state in callbacks to avoid stale closure issues.

Related Components

UploadDialoguseFlowSettingsuseSubscriberInfopost.ts (createPostMultiple)folder.ts (readFolder)
View source on GitHub →