Renders a scrollable, date-grouped list of Mingo AI chat dialogs with support for row actions, unread badges, owner avatars, infinite scroll, skeleton loading states, and empty state handling. ## Key Components | Export | Description | |---|---| | `MingoChatHistoryProps` | Primary props interface for the list component | | `MingoChatHistory` *(default export implied)* | Root scrollable dialog list with grouped sections | | `MingoChatHistoryRow` | Individual dialog row with title, unread badge, avatar, and actions menu | | `MingoChatHistorySkeleton` | Animated pulse placeholder shown during initial page load | | `groupDialogs` | Pure utility that buckets dialogs into **Today / Yesterday / Older** groups | | `DialogGroup` | Internal type representing a labeled group of `DialogItem` entries | ## Usage Example ```typescript import { MingoChatHistory, MingoChatHistorySkeleton, } from '@openframe/oss-lib' import type { DialogItem } from '@openframe/oss-lib' const dialogs: DialogItem[] = [ { id: 'abc-123', title: 'Network outage triage', timestamp: new Date(), unreadMessagesCount: 3, owner: { name: 'Ada Lovelace', avatarUrl: 'https://cdn.example.com/ada.png' }, }, ] // Show skeleton while loading the first page if (isLoading) return // Render the list once data arrives return ( router.push(`/chat/${id}`)} onRequestRename={(dialog) => openRenameModal(dialog)} onRequestArchive={(dialog) => openArchiveModal(dialog)} onLoadMore={fetchNextPage} /> ) ``` ## Behavior Notes - **Date grouping** is computed client-side from `dialog.timestamp` (accepts both `string` and `Date`); dialogs without a timestamp fall into **Older**. - **Infinite scroll** is driven by an Intersection Observer on a bottom sentinel; `onLoadMore` fires automatically when it enters the viewport. - **Search** is server-side — the list renders whatever `dialogs` the host provides and uses `searchQuery` only to render the correct empty-state message. - **Active row** renders an amber accent bar and yellow title text per the ODS design spec. - The `⋯` actions menu is desktop-only (hidden on touch via `max-md:hidden`) and stays visible while the Radix dropdown is open via controlled `menuOpen` state. ## Source [`mingo-chat-history.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/mingo-chat-history.tsx)