Scrollable list component that renders a collection of chat ticket items with scroll-fade shadow overlays, loading skeleton states, and empty-state handling. ## Key Components | Export | Type | Description | |---|---|---| | `ChatTicketList` | `React.forwardRef` component | Main list container with scroll-fade behavior | | `ChatTicketListProps` | Interface | Props extending `HTMLAttributes` | | `ChatTicketItemData` | Re-exported type | Ticket data shape from `chat-ticket-item` | ### Props | Prop | Type | Default | Description | |---|---|---|---| | `tickets` | `ChatTicketItemData[]` | — | Array of ticket data to render | | `onTicketClick` | `(ticketId: string) => void` | — | Click handler passed to each item | | `isLoading` | `boolean` | `false` | Renders skeleton placeholders instead of tickets | | `skeletonCount` | `number` | `5` | Number of skeleton rows during loading | ### Behavior - Uses `useScrollFade` to track scroll position and conditionally apply top/bottom fade overlays via `ScrollFadeOverlay` - Border radius on the list container dynamically toggles based on whether top/bottom fades are active - Returns `null` when `tickets` is empty (no empty state UI) ## Usage Example ```typescript import { ChatTicketList } from './chat-ticket-list' import type { ChatTicketItemData } from './chat-ticket-list' const tickets: ChatTicketItemData[] = [ { id: 'TKT-001', title: 'Cannot connect to VPN', status: 'open' }, { id: 'TKT-002', title: 'Printer offline', status: 'pending' }, ] // Normal render router.push(`/tickets/${id}`)} /> // Loading state ``` ## Source [`chat-ticket-list.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/chat-ticket-list.tsx)