<!-- source-hash: 1a5069303b8ed13eb9814a0faafa1f13 -->
Storybook stories for the `SlashCommandSuggestions` chat autocomplete dropdown, covering static, interactive, filtered, and no-action variants.

## Key Components

- **`Default`** — Full command list rendered with the first row highlighted; logs `select` and `action` events to the console.
- **`Interactive`** — Stateful story using `useState` to track `highlightedIdx`; hover over rows to drive keyboard-style highlight changes.
- **`FilteredSingle`** — Renders only the first command, simulating a typed filter such as `/road`.
- **`NoActions`** — Omits the `onAction` handler, causing each row's chip rail to collapse to click-only behavior.
- **`SAMPLE_COMMANDS`** — Fixture array of 14 `SlashCommandSummary` objects using live icon keys (`clickup`, `github`, `slack`, `openframe`, `rocket`, `briefcase`, `graduation-cap`, `video`, `headphones`, `calendar`, `newspaper`) that match the production `/api/docs/commands` contract.

## Usage Example

```typescript
import { SlashCommandSuggestions } from '../components/chat/slash-command-suggestions'

// Minimal controlled usage matching the story pattern
const [highlightedIdx, setHighlightedIdx] = useState(0)

<SlashCommandSuggestions
  commands={filteredCommands}
  highlightedIdx={highlightedIdx}
  onHover={setHighlightedIdx}
  onSelect={(cmd) => handleSelect(cmd)}
  onAction={(cmd, actionId) => handleAction(cmd, actionId)}
/>
```

The decorator wraps every story in a `640px` container with a mock chat input row (`/`) so the dropdown's `absolute bottom-full` positioning anchors correctly, replicating the in-app `ChatInput` context.

**Source:** [`SlashCommandSuggestions.stories.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/SlashCommandSuggestions.stories.tsx)