Guide-mode chat empty state component that renders a centered greeting (icon, title, optional subtitle) and a pinned quick-action chip wall above the composer, sharing a single scrollable region with scroll-fade affordances. ## Key Components ### `GuideQuickAction` Interface for individual quick-action chips, supporting labels, prompt text, icon resolution (glyph name or URL), and accent tints (`'fae'` → pink, `'mingo'` → cyan). ### `GuideWelcomeProps` Full props interface for the `GuideWelcome` component, including identity icon override, subtitle loading state, quick-action callbacks, and agent slug for row-cap behavior in `QuickActionWall`. ### `GuideWelcome` Primary export. Renders: - **Scroll region** — greeting (icon + title + subtitle/skeleton) and `children` (slash-command onboarding list) share one `overflow-y-auto` container with `ScrollFadeOverlay` top/bottom edge fades. - **Identity icon** — uses `` when `icon.name` or `icon.url` is set; falls back to the default `` with cyan accents. - **Subtitle** — renders admin copy when present, a `` while `subtitleLoading` is true, or nothing by default. - **Quick-action wall** — pinned below the scroll region via `` in BRICK marquee mode (up to 4 rows, hover-pause, drag-scroll, left/right edge fades). ## Usage Example ```typescript import { GuideWelcome, type GuideQuickAction } from './guide-welcome' const actions: GuideQuickAction[] = [ { id: '1', label: 'Reset a password', iconName: 'key', accent: 'cyan' }, { id: '2', label: 'Check device health', prompt: 'Run a full device health check', accent: 'cyan' }, ] sendPrompt(action.prompt ?? action.label)} onQuickActionHover={(action) => previewInComposer(action.prompt ?? action.label)} onQuickActionHoverEnd={() => restoreComposer()} agentSlug="mingo" > ``` **Source:** [`guide-welcome.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/guide-welcome.tsx)