Conversation List

ngx-prompt-kit original — not part of ibelick/prompt-kit

Sidebar of past conversations. Optional date grouping (Today / Yesterday / Last 7 Days / Older), inline rename (an hlmInput), and a hover-revealed spartan dropdown menu.

Examples

Grouped by date

Default mode. Empty buckets are not rendered. Hover or focus a row to reveal the actions menu.

Today

Yesterday

Previous 7 days

Older

<pk-conversation-list
  [conversations]="conversations()"
  [activeId]="activeId()"
  (selected)="activeId.set($event)"
  (renamed)="onRename($event)"
  (deleted)="onDelete($event)"
/>

Flat list

Set [groupBy]='none' to render conversations in their original order without date headers.

<pk-conversation-list
  groupBy="none"
  [conversations]="conversations()"
  [activeId]="activeId()"
  (selected)="activeId.set($event)"
/>

Installation

Add the conversation-list component (and the cn() utility) to your project.

ng generate ngx-prompt-kit:conversation-list

It is built on spartan/ui, so add these helm components too: button, dropdown-menu, input.

ng g @spartan-ng/cli:ui button dropdown-menu input

Component API

PkConversationList

Prop	Type	Default	Description
conversations	`readonly Conversation[]`	—	The conversations to render (required).
groupBy	`"date" \| "none"`	"date"	Bucket items by Today / Yesterday / Last 7 Days / Older, or render flat.
activeId	`string \| null`	null	The id of the currently selected conversation.
class	`string`	—	Extra classes for the host.

PkConversationItem

Prop	Type	Default	Description
conversation	`Conversation`	—	The conversation to render (required).
isActive	`boolean`	false	Highlight as the active row.
class	`string`	—	Extra classes for the row.

Outputs (both)

Prop	Type	Default	Description
selected	`(id: string) => void`	—	Fires when a row is clicked.
renamed	`({ id, title }) => void`	—	Fires after the inline rename input commits a non-empty, changed value.
deleted	`(id: string) => void`	—	Fires when the Delete action is chosen.