Sessions

Sessions sidebar — the list of past chats, the new-session trigger, and group-by-date helpers. All read state from ChatContext.

Imports

import {
  SessionsList,
  SessionGroups,
  SessionsGroup,
  SessionListItem,
  NewSessionButton
} from 'reachat';

SessionsList

Sidebar wrapper that renders an animated container around its children. Hidden in compact mode while a session is active (so the panel can take over the viewport).

<SessionsList templates={templates}>
  <NewSessionButton />
  <SessionGroups />
</SessionsList>

templates:

interface Template {
  id: string;
  title: string;
  message: string;
  icon?: ReactElement;
}

SessionGroups

Groups the context's sessions by relative date (Today / Yesterday / This Week / etc.) using the bundled groupSessionsByDate utility, and renders <SessionsGroup> per heading with <SessionListItem> children.

<SessionGroups />

// Custom render
<SessionGroups>
  {groups => groups.map(({ heading, sessions }) => (
    <SessionsGroup key={heading} heading={heading}>
      {sessions.map(s => <SessionListItem key={s.id} session={s} />)}
    </SessionsGroup>
  ))}
</SessionGroups>

SessionsGroup

Visual group with a heading. Wraps SessionListItems in a single section.

SessionListItem

Individual session row. Built on reablocks ListItem with start (chat icon) and end (delete icon-button) adornments. Active state is highlighted via theme. Click selects the session; the trash button stops propagation and triggers deleteSession.

<SessionListItem session={session} chatIcon={<AppIcon />} />

// Custom item content
<SessionListItem session={session}>
  <div className="flex flex-col">
    <strong>{session.title}</strong>
    <span>{session.conversations.length} messages</span>
  </div>
</SessionListItem>

NewSessionButton

Full-width primary button bound to createSession() from context. Shows the plus icon as start adornment and respects disabled from context.

<NewSessionButton newSessionText="Start chat" />

// Or wrap a custom trigger
<NewSessionButton>
  <button className="custom-button">+ New chat</button>
</NewSessionButton>

groupSessionsByDate

Exported from reachat/utils (re-exported via reachat). Buckets sessions by relative date for SessionGroups.

interface GroupedSessions {
  heading: string;
  sessions: Session[];
}

function groupSessionsByDate(sessions: Session[]): GroupedSessions[];

Theme keys

theme.sessions.{base, console, companion, group, create}
theme.sessions.session.{base, active, delete}