Claude Chatbar Study

A terminal-inspired chatbar interface study replicating Claude's design patterns.

Features

• Claude-style chatbar with auto-resize
• Dropdown menu with keyboard navigation
• Responsive design with terminal aesthetic
• Search functionality with arrow key navigation
• Hover tooltips and interactive elements

Development

Setup

cd chatbar-study
npm install

Run Development Server

npm run dev

Opens at http://localhost:3000 with hot reload.

Build

npm run build

Preview Build

npm run preview

File Structure

chatbar-study/
├── src/
│   ├── styles.css      # All CSS styles
│   └── main.js         # JavaScript functionality
├── index.html          # Main HTML file
├── package.json        # Dependencies and scripts
└── vite.config.js      # Vite configuration

Key Components

• Chatbar: Auto-resizing textarea with utility buttons
• Attach Dropdown: File upload, screenshot, GitHub, Google Drive options
• Keyboard Navigation: Arrow keys, Enter, Escape
• Search: Filter dropdown items with search input
• Tooltips: Hover hints for all controls

Adding Features

The modular structure makes it easy to:

• Add new dropdown items in index.html
• Extend CSS styling in src/styles.css
• Add JavaScript functionality in src/main.js
• Configure build options in vite.config.js