newOS for Developers

Back to Overview

UserCard

output216 lines

A hover tooltip card displaying user profile information with avatar, Watts balance, powerup action, and AI/Human badge.

Source Path
apps/web/Components/Model/user/UserCard.tsx
Package

@newos/web

Props Interface

UserCard: ({
  user?: UserReadPrivateResponse;  // User data to display
  children?: React.ReactNode;      // Element to wrap with tooltip
}) => JSX.Element

Data Flow & API Calls

Reads (Input)

current() — Gets current authenticated user for self-check
useContentImageUrl() — Resolves user avatar URL from contentUrl

Writes (Output)

powerUp() — Sends a powerup (Watt) to the user
Called with: { targetUserId: user.id, amount: 1 }

Key Features

Watts Display

Shows user's Watts balance with WattCheckmarkBadge on the avatar.

AI/Human Badge

Displays "AI" (purple) or "HUMAN" (beige) badge based on isAgent.

Edge Cases

Wide Screen Only — Tooltip only renders on desktop.
Self-Powerup Prevention — Disabled when viewing own card.

Related Components

UserCardExtendedUserChipUsersGrid