@mounaji_npm/assistant

Assistant management UI components for Mounaji-based projects. Provides cards, lists, and avatars for displaying and selecting AI assistants — styled via @mounaji_npm/tokens.

Install

npm install @mounaji_npm/tokens @mounaji_npm/assistant

Quick Start

import { TokensProvider } from '@mounaji_npm/tokens';
import { AssistantList } from '@mounaji_npm/assistant';

const assistants = [
  {
    id: '1',
    name: 'Support Bot',
    model: 'gpt-4o',
    description: 'Handles customer support queries with empathy.',
    skills: ['search', 'calendar'],
    stats: { conversations: 1240, rating: 4.8 },
  },
  {
    id: '2',
    name: 'Code Assistant',
    model: 'claude-3-5-sonnet',
    description: 'Helps developers write, review, and debug code.',
    skills: ['code', 'search'],
  },
];

export default function AssistantsPage() {
  return (
    <TokensProvider>
      <AssistantList
        assistants={assistants}
        onSelect={(a) => console.log('selected', a)}
      />
    </TokensProvider>
  );
}

Components

AssistantList

Responsive grid of AssistantCard components. Auto-fills columns.

import { AssistantList } from '@mounaji_npm/assistant';

<AssistantList
  assistants={assistants}
  onSelect={(assistant) => router.push(`/assistants/${assistant.id}`)}
  onEdit={(assistant) => openEditModal(assistant)}
  onDelete={(assistant) => confirmDelete(assistant)}
  loading={isFetching}
  emptyState={<p>No assistants yet. Create one to get started.</p>}
/>

| Prop | Type | Default | Description | |---|---|---|---| | assistants | array | [] | Array of assistant objects (see shape below) | | onSelect | function | — | Called when a card is clicked | | onEdit | function | — | Called when edit button is clicked | | onDelete | function | — | Called when delete button is clicked | | loading | boolean | false | Shows skeleton cards | | emptyState | ReactNode | default | Shown when list is empty |

AssistantCard

Single assistant card with avatar, name, model badge, description, skill tags, and stats.

import { AssistantCard } from '@mounaji_npm/assistant';

<AssistantCard
  assistant={{
    id: '1',
    name: 'Support Bot',
    model: 'gpt-4o',
    description: 'Customer support assistant.',
    skills: ['search', 'calendar'],
    stats: { conversations: 1240, rating: 4.8 },
    active: true,
  }}
  onSelect={() => handleSelect()}
  onEdit={() => handleEdit()}
  onDelete={() => handleDelete()}
/>

Assistant object shape:

| Field | Type | Description | |---|---|---| | id | string | Unique identifier | | name | string | Display name | | model | string | Model ID (e.g. gpt-4o, claude-3-5-sonnet) — drives badge color | | description | string | Short description shown on card | | skills | string[] | Skill IDs shown as tags | | stats | object | { conversations: number, rating: number } | | active | boolean | Shows green/grey status dot | | avatar | string | Avatar image URL (falls back to initials) |

Model badge colors:

| Model prefix | Color | |---|---| | gpt- | Green | | claude- | Purple | | gemini- | Blue | | Others | Grey |

AssistantAvatar

Colored square avatar with initial fallback.

import { AssistantAvatar } from '@mounaji_npm/assistant';

<AssistantAvatar name="Support Bot" size="md" />
<AssistantAvatar src="/bot-avatar.png" name="Code Bot" size="lg" />

| Prop | Type | Default | Values | |---|---|---|---| | name | string | — | Used for initials and color derivation | | src | string | — | Image URL | | size | string | 'md' | sm md lg xl |

The background color is deterministically derived from the name — same name always produces the same color.

Full Example with Actions

import { useState } from 'react';
import { TokensProvider } from '@mounaji_npm/tokens';
import { AssistantList } from '@mounaji_npm/assistant';

export default function AssistantsPage() {
  const [assistants, setAssistants] = useState(initialData);
  const [selected, setSelected] = useState(null);

  function handleDelete(assistant) {
    if (confirm(`Delete ${assistant.name}?`)) {
      setAssistants(prev => prev.filter(a => a.id !== assistant.id));
    }
  }

  return (
    <TokensProvider>
      <h1>Assistants</h1>
      <AssistantList
        assistants={assistants}
        onSelect={setSelected}
        onEdit={(a) => router.push(`/assistants/${a.id}/edit`)}
        onDelete={handleDelete}
      />
      {selected && <AssistantDetailPanel assistant={selected} />}
    </TokensProvider>
  );
}