Conversations

kai-conversations

A self-contained sidebar that renders a grouped, scrollable conversation list with a “New chat” button and collapse toggle — drop it into any framework and wire up three events.

• Shadow DOM
• 3 events
• Auto-bucketing by recency
• Pre-bucketed groups
• Declarative child elements

Preview

When to use

Use <kai-conversations> for a conversation switcher outside SolidJS — React, Vue, Svelte, or plain HTML. Shadow DOM keeps styles isolated in both directions. In SolidJS with fine-grained layout needs, compose the ConversationList primitive directly.

Usage

Set the data in JavaScript (it’s arrays and objects) and listen for CustomEvents:

<kai-conversations id="sidebar" style="display:block; width:300px; height:100vh;"></kai-conversations>

<script type="module">
  import '@kitn.ai/ui/elements';
  const el = document.getElementById('sidebar');

  el.conversations = [
    {
      id: 'c-1', title: 'Web component architecture',
      scope: { type: 'collection' }, messageCount: 12,
      lastMessageAt: '2026-06-16T10:00:00.000Z',
      updatedAt: '2026-06-16T10:00:00.000Z',
    },
  ];
  el.activeId = 'c-1';

  el.addEventListener('kai-conversation-select', (e) => {
    el.activeId = e.detail.id; // keep the active highlight in sync
  });
  el.addEventListener('kai-new-chat', () => console.log('new chat'));
  el.addEventListener('kai-toggle-sidebar', () => console.log('toggled'));
</script>

Two data approaches:

• In JavaScript — el.conversations (flat list, auto-bucketed by recency) or el.groups (pre-bucketed; supply when you own the section headers). When groups is set it takes precedence.
• Declarative children — nest <kai-conversation> tags directly; each carries its id as an attribute and title as text content. The element reads them on mount and watches via MutationObserver — works in plain HTML, SSR, or any framework that sets innerHTML.

Examples

Default List

A flat conversations array — the element auto-buckets by recency.

Code

Active Conversation Highlighted

activeId highlights the matching row and scrolls it into view.

Code

Pre-bucketed Groups

Supply groups to own the section headers; ungrouped items fall to an “Other” bucket.

Code

Empty State

An empty conversations array renders the built-in empty state.

Code

Declarative Children

Nested <kai-conversation> elements — no JavaScript wiring needed.

Code

Props

Property	Type	Default	Notes
groups	ConversationGroup[]	[]	Pre-bucketed conversation groups (e.g. "Today", "Yesterday"), each with its own conversations. Use this when you want to control the grouping/headers yourself; otherwise pass a flat `conversations` array. Set as a JS property.
conversations	ConversationSummary[]	[]	A flat list of conversation summaries; the component buckets them by recency for you. Ignored when `groups` is provided. Set as a JS property.
activeId	string	—	The id of the currently-open conversation, highlighted in the list.

Events

Event	Detail	Notes
kai-conversation-select	{ … }	A conversation was selected.
kai-new-chat	Record<string, never>	The "New chat" button was clicked.
kai-toggle-sidebar	Record<string, never>	The sidebar toggle was clicked.

Composed from

This element wraps these SolidJS components — reach for them directly when you need finer control than the props expose.

ConversationList

---

Need a hand? Report a bug Ask for help