Chat History – Code

Implementation
ChatHistory Props
ChatHistoryItem

Common Examples

To use the ChatHistory, pass configured conversations through items, handle selection through React Aria’s selection APIs, and use onNewChat to start a conversation.

import { ChatHistory } from "@servicetitan/anvil2-ai-kit";

function ExampleComponent() {
  return (
    <ChatHistory
      items={chats}
      selectedKeys={[activeId]}
      onSelectionChange={(keys) => openChat([...keys][0])}
      onNewChat={startChat}
    />
  );
}

Selection is fixed to single. Omit items or pass an empty array to render only the New Chat button.

Selected and unread

selectedKeys controls the active conversation. Set unread on an item to add a status dot and localized screen-reader text.

Subtitle

Every item requires a subtitle, typically a relative timestamp or last-message stamp. The component renders it verbatim; your application owns formatting and relative-time policy.

Overflow

Labels and subtitles truncate to one line. Place ChatHistory in a height-constrained container so long lists scroll instead of growing the rail.

Internationalization

ChatHistory owns these localized strings:

ai-kit.chatHistory.newChat
ai-kit.chatHistory.list
ai-kit.chatHistory.unread
ai-kit.chatHistory.recents

Localize each item’s label and subtitle before passing it. Mount AiKitIntlProvider inside CartoTheme to switch the built-in strings.

React Accessibility

React Aria supplies single-selection listbox semantics, arrow-key navigation, and typeahead.
Each item label is its accessible name; subtitle is its accessible description.
Unread items include localized hidden text. The visual status dot is decorative.
Pass aria-label or aria-labelledby to override the localized list name.

<ChatHistory
  items={chats}
  selectedKeys={[activeId]}
  onSelectionChange={setActive}
  onNewChat={startChat}
/>

`ChatHistory` Props

The ChatHistory accepts the following props and forwards remaining React Aria ListBox props except layout, orientation, selection mode, and composed children.

string

Class merged onto the rail container.

ChatHistoryItem[]

Conversations to list in display order. Omit or pass an empty array for no history.

() => void

Handles the New Chat button.

(keys: Selection) => void

Called when the selected conversation changes.

Selection

Controlled selected conversation key.

const chat: ChatHistoryItem = {
  id: "invoice-review",
  label: "Invoice review",
  subtitle: "5 minutes ago",
  unread: true,
};

`ChatHistoryItem`

Key

required

Selection key reported through listbox selection APIs.

string

required

Visible conversation title and accessible name.

string

required

Visible secondary line and accessible description. Supply formatted, localized text.

boolean

Prevents focus and selection.

boolean

default:"false"

Displays an unread indicator and adds localized hidden text.

AI Kit

Agent Experience

Chat History – Code

Common Examples

Selected and unread

Subtitle

Overflow

Internationalization

React Accessibility

`ChatHistory` Props

`ChatHistoryItem`

​Common Examples

​Selected and unread

​Subtitle

​Overflow

​Internationalization

​React Accessibility

​ChatHistory Props

​ChatHistoryItem

Common Examples

Selected and unread

Subtitle

Overflow

Internationalization

React Accessibility

`ChatHistory` Props

`ChatHistoryItem`