Chat Dropdown

A standalone animated dropdown micro-interaction for an AI chat input. The prototype turns the Figma reference into a working Next.js experience with a fixed prompt bar, animated action menu, nested panels, local toggles, and polished motion.

Figma reference: Playground

Features

• Anchored chatbox that does not shift when the dropdown opens.
• Plus button opens a compact action menu.
• Auto model selector with the Figma-matched right-aligned model menu.
• Framer Motion entrance, panel, toggle, tooltip, and snackbar animations.
• Nested panels for projects, connectors, and skills.
• Local-only connector toggles for Google Drive, Figma, and Linear.
• Portal-rendered skills tooltips that are not clipped by the card.
• Dummy snackbar feedback for registered click actions.
• Inline brand SVGs kept separate from Lucide UI icons.
• Figma-corrected dummy data documented in prd.md and style.md.
• Desktop-first layout with responsive fallbacks.

Stack

• Next.js App Router
• React
• TypeScript
• Tailwind CSS
• Framer Motion
• Lucide React

Getting Started

Install dependencies:

npm install

Run the dev server:

npm run dev

Open:

http://localhost:3000

Build for production:

npm run build

Project Structure

app/
  globals.css
  layout.tsx
  page.tsx
components/
  micro-dropdown/
    AnimatedDropdown.tsx
    BrandIcon.tsx
    DropdownMenuItem.tsx
    NestedPanel.tsx
    ToggleSwitch.tsx
    data.ts
prd.md
style.md

Interaction Notes

• The chatbox is inside a fixed-height relative container.
• The dropdown is absolutely positioned below it, so opening panels never pushes the chatbox.
• Menu, panel, skill, connector, and model rows use simple color hover states with stable row heights.
• Nested panels are rendered beside the left menu, share the same height, and swap content without remounting the panel shell.
• The model menu is mutually exclusive with the plus action menu.
• The project intentionally does not implement real upload, search, auth, project management, or connector APIs.

Verification

Verified locally with:

npm run build

Browser QA also confirmed that the prompt bar kept the same bounding box before and after opening:

top: 314
left: 275
width: 730
height: 56

Documentation

• prd.md captures the product and interaction requirements.
• style.md captures the Figma-derived visual system, spacing, colors, and motion specs.

Notes

This is a micro-interaction demo, not a production chat application.