Block

Sidebar header

Name: ngx-prompt-kit
Author: PianoNic

Persistent left rail. Top: model picker for the current chat. Middle: scrollable conversation list. Bottom: usage card with the user's identity and budget.

Model picker · conversations · usage

Model

Today

Yesterday

Last 7 Days

NiclasPro · resets in 12 days

42,000 / 50,000 · 84%

<aside class="flex h-screen w-72 flex-col border-r">
  <div class="border-b p-3">
    <pk-model-picker
      [compact]="true"
      [models]="models"
      [(selectedId)]="selectedModelId"
    />
  </div>

  <div class="flex-1 overflow-hidden">
    <pk-conversation-list
      [conversations]="conversations()"
      [activeId]="activeId()"
      (selected)="activeId.set($event)"
    />
  </div>

  <div class="border-t p-3">
    <pk-usage-card
      display="inline"
      [used]="42_000"
      [limit]="50_000"
      [avatar]="avatarUrl"
      name="Niclas"
      sublabel="Pro · resets in 12 days"
    />
  </div>
</aside>