npm package: @naniteninja/profile-comparison-lib
Description: Angular library that renders a side-by-side profile comparison (two profile images, a central draggable shape, and semantically aligned interest lists). It is a **thin client** — the library sends user config to a backend and displays the payload it retur
Latest version: 1.0.4

# Profile Comparison Library

Angular library that renders a side-by-side profile comparison (two profile images, a central draggable shape, and semantically aligned interest lists). It is a **thin client** — the library sends user config to a backend and displays the payload it returns. No API keys or key-entry modals live in the library.

**You need a backend** that implements the profile comparison API (e.g. the **profile-comparison-server** repo). By default the component points at the real deployed backend. Set `[backendMode]="BackendMode.Mock"` to use `localhost:3000` during development.

---

## Quick start (copy-paste)

### 1. Install

```bash
npm install @naniteninja/profile-comparison-lib
```

### 2. Wire up the module

```typescript
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { ProfileComparisonLibModule } from '@naniteninja/profile-comparison-lib';

@NgModule({
  imports: [HttpClientModule, ProfileComparisonLibModule],
})
export class AppModule {}
```

### 3. Add the component to a template

Minimal — uses the real deployed backend with all edges faded:

```html
<lib-profile-comparison [config]="profileConfig"></lib-profile-comparison>
```

During development, point at a local backend:

```html
<lib-profile-comparison
  [config]="profileConfig"
  [backendMode]="BackendMode.Mock"
></lib-profile-comparison>
```

Or supply a fully custom URL (overrides `backendMode`):

```html
<lib-profile-comparison
  [config]="profileConfig"
  [backendUrl]="'https://my-custom-api.example.com/api'"
></lib-profile-comparison>
```

Full example with all inputs and outputs:

```html
<lib-profile-comparison
  [config]="profileConfig"
  [backendMode]="backendMode"
  [backendUrl]="customUrl"
  [fadeAllEdges]="true"
  (matrixDataChange)="onMatrixData($event)"
  (rawLLMOutputChange)="onRawLLM($event)"
  (viewProfileClick)="onViewProfile($event)"
></lib-profile-comparison>
```

### 4. Component class

```typescript
import { Component } from '@angular/core';
import { IProfileConfig, IMatrixData, BackendMode } from '@naniteninja/profile-comparison-lib';

@Component({ /* ... */ })
export class AppComponent {
  readonly BackendMode = BackendMode; // expose enum to template

  backendMode = BackendMode.Real;
  customUrl: string | null = null;

  profileConfig: IProfileConfig = {
    person1Interests: [
      'Gaming', 'Programming', 'AI/ML', 'Startups',
      'Blockchain', 'Cybersecurity', 'Web Development', 'Data Science',
    ],
    person2Interests: [
      'AI machine learning', 'Mobile Games', 'Hardware',
      'Data Science', 'Entrepreneurship', 'Design Thinking', 'Blockchain',
    ],
    person3Interests: ['Board Games', 'Machine Learning'],
    user1Image: './assets/user1.jpg',   // data-URL or asset path
    user2Image: './assets/user2.jpg',
  };

  onMatrixData(data: IMatrixData) { console.log('Matrix:', data); }
  onRawLLM(raw: string)          { console.log('LLM:', raw); }
  onViewProfile(e: { side: 'left' | 'right' }) {
    console.log('View profile:', e.side);
  }
}
```

### 5. Run

```bash
ng serve
```

If using `BackendMode.Mock`, start the local backend first:

```bash
cd ../profile-comparison-server && npm install && npm start   # listens on :3000
```

---

## Inputs

| Input | Type | Default | Description |
|-------|------|---------|-------------|
| `config` | `IProfileConfig` | *required* | Profile data (interests, images) for the comparison. |
| `backendMode` | `BackendMode` | `BackendMode.Real` (0) | `Real` = deployed backend, `Mock` = `localhost:3000`. |
| `backendUrl` | `string \| null` | `null` | When non-empty, overrides `backendMode` entirely. |
| `fadeAllEdges` | `boolean` | `true` | Fade the outer edges of the profile area. |

## Outputs

All outputs are optional — bind only what you need.

| Output | Type | Description |
|--------|------|-------------|
| `matrixDataChange` | `IMatrixData` | Legend, headers, and rows for the similarity matrix. |
| `rawLLMOutputChange` | `string` | Raw LLM output from the backend (if any). |
| `viewProfileClick` | `{ side: 'left' \| 'right' }` | Emitted when the user clicks "View Profile". |

## BackendMode enum

```typescript
import { BackendMode } from '@naniteninja/profile-comparison-lib';

BackendMode.Real  // 0 — deployed backend (default)
BackendMode.Mock  // 1 — localhost:3000
```

### URL resolution priority

1. `backendUrl` input (if non-empty)
2. `backendMode` enum mapping
3. Legacy `PROFILE_COMPARISON_API_BASE_URL` injection token (backward compatible)

---

## Backend API contract

The library calls `POST {baseUrl}/profile/compare-full` with body `{ config: IProfileConfig }`. The backend returns a display payload (face results, aligned lists, center item, matrix data, raw LLM output). See the **profile-comparison-server** repo and the `IComparisonPayload` interface for the response shape.

---

## Building the library

```bash
ng build profile-comparison-lib
```

Output is in `dist/profile-comparison-lib/` (FESM bundles, typings, package.json). Peer dependencies: Angular `^20.0.0`.