Delphi Design

The MindBubblePill displays a clone's mindscore with level-based color schemes and animation states. It's the visual component that represents the "mind" training level.

Installation

The MindBubblePill component is part of the @delphi/features package:

import { MindBubblePill } from "@delphi/features/mind-bubble";

Basic Usage

import { MindBubblePill } from "@delphi/features/mind-bubble";
import { CirclePlusIcon } from "@delphi/ui";

function Example() {
  return (
    <MindBubblePill levelName="Skilled">
      <div className="flex items-center gap-1 pr-0.5 text-white">
        <CirclePlusIcon className="size-4.5 opacity-85" />
        <span className="font-semibold">1,234</span>
      </div>
    </MindBubblePill>
  );
}

Levels

The component supports seven training levels, each with distinct color schemes:

Level	Score Range	Color Theme
Novice	0 - 499	Orange-red
Skilled	500 - 2,499	Orange
Expert	2,500 - 9,999	Purple
Master	10,000 - 49,999	Blue
Sage	50,000 - 249,999	Green
Legendary	250,000 - 999,999	Gold
Eternal	1,000,000+	Navy

Animation States

Luminating

Enable the isLuminating prop when training is in progress. This creates a pulsing glow effect:

<MindBubblePill levelName="Skilled" isLuminating>
  {/* content */}
</MindBubblePill>

Glowing

The isGlowing prop enables a subtle constant glow effect:

<MindBubblePill levelName="Skilled" isGlowing>
  {/* content */}
</MindBubblePill>

Vertical Orientation

Use orientation="vertical" to display the pill with the level label below the content:

<MindBubblePill levelName="Expert" orientation="vertical">
  {/* content */}
</MindBubblePill>

Full MindBubble Component

For complete functionality including the dialog, training status, and context, use the full MindBubble component with its provider:

import { MindBubble, MindBubbleProvider } from "@delphi/features/mind-bubble";

function App() {
  return (
    <MindBubbleProvider slug="my-clone" cloneId="clone-123">
      <MindBubble orientation="horizontal" />
    </MindBubbleProvider>
  );
}

The full component includes:

Automatic mindscore fetching
Training status indicators
Click-to-open dialog for adding content
Real-time updates during training

API Reference

MindBubblePill Props

Prop	Type	Default	Description
`levelName`	`string`	required	Level name (Novice, Skilled, Expert, Master, Sage, Legendary, Eternal)
`children`	`ReactNode`	required	Content to display inside the pill
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Layout orientation - vertical shows level label
`isLuminating`	`boolean`	`false`	Enable pulse animation (during training)
`isGlowing`	`boolean`	`false`	Enable glow effect
`disabled`	`boolean`	`false`	Disable click interactions
`onClick`	`() => void`	-	Click handler
`className`	`string`	-	Additional CSS classes
`style`	`CSSProperties`	-	Inline styles

MindBubble Props

Prop	Type	Default	Description
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Layout orientation
`disabled`	`boolean`	`false`	Disable interactions
`hideTrainingStatusBelowLg`	`boolean`	`false`	Hide training status on small screens
`className`	`string`	-	Additional CSS classes

Use horizontal orientation for inline displays (headers, profiles)

Use vertical orientation when showcasing the level name is important

Enable isLuminating when training is in progress

Use the full MindBubble component with provider for complete functionality

Use MindBubblePill without proper context when using click handlers that need dialog

Mix different level colors in the same view without clear purpose

Use the luminating animation when training is not actually in progress