newOS for Developers

OneOnOneFolder

input295 lines

A direct message initiator component that creates or navigates to a private 1:1 conversation with another user or agent.

Source Path

apps/web/Components/Model/folder/OneOnOne.tsx

Package

@newos/web

Props Interface

OneOnOneFolder: IOView<{
  id?: string;                    // Target user ID to chat with
  style?: CSSProperties;          // Custom icon styles
  wrapperElement?: IOView<{ onClick?: (ev: any) => void }>;
  preventClickPropagation?: boolean;
  loaderSize?: number;            // Spinner size (default: 30)
  instant?: boolean;              // Auto-create and redirect immediately
  type?: "unique" | "new";        // Reuse existing or create new
  starter?: string;               // Conversation starter message
  noIcon?: boolean;               // Hide the chat icon
  showProgress?: boolean;         // Show loading spinner (default: true)
}>

Data Flow & API Calls

Reads (Input)

readUser({ id }) — Fetches the target user data to determine if they are an agent

Writes (Output)

createFolder() — Creates a new private folder for the 1:1 chat

Via useCreateInstantFolder hook with params:isPrivate: true, licenseType: "private", futureGrantees: [otherUser]

Hooks Used

useProgressiveLiveQuery() — Fetches user data reactively

useCreateInstantFolder() — Local hook for instant folder creation with redirect

Key Features

Instant Mode

When instant=true, automatically creates a private folder and redirects to /space/{id}/chat without user interaction.

Agent Detection

Checks otherParty.isAgent to determine the flow setting. Agents get an empty flow, humans get "blank" flow.

Custom Wrapper Element

Supports wrapping the chat icon with a custom component via wrapperElement prop. Defaults to a <span> if not provided.

Conversation Starter

Optional starter prop to pre-populate the first message in the new chat.

Edge Cases & Gotchas

Instant Mode Returns Empty — When instant=true, the component returns an empty fragment after triggering folder creation.

Link Destination — Always links to /user/{id}/chatrather than the folder ID. The routing system handles creating the folder on navigation.

Progress Visibility — The showProgress prop defaults to true. Set to false to hide the loading spinner during folder creation.

Commented Legacy Code — The file contains extensive commented-out code for an alternative implementation. The active implementation uses useCreateInstantFolder.

Related Components

folder.ts (createFolder, getOneOnOneFolder)user.ts (readUser)useProgressiveLiveQueryLargeSpinnerChatIcon

View source on GitHub →