Messagemind Agent

A Next.js 14 + Tailwind CSS prototype for a ChatGPT-style messaging assistant. It features a collapsible prompt sidebar, mobile-friendly textarea input with auto-grow, execution status cards, and post-run summary states.

• Live Demo: https://mind-bot-sigma.vercel.app/

Tech Stack

• Framework: Next.js (App Router)
• Styling: Tailwind CSS
• Icons/Animations: Custom SVG + Tailwind animations
• State: React hooks and a small sidebar context provider

Key Features

• Chat-style landing page with responsive layout
• Collapsible left sidebar listing saved prompts and a “Start new prompt” CTA
• Auto-growing textarea input with Shift+Enter for newline and Enter to send
• Thinking overlay, execution progress card, and success card
• Copy/edit prompt controls within action summary
• Safe-area aware footer for iOS devices

Getting Started

Install dependencies and run the dev server:

npm install
npm run dev

Navigate to http://localhost:3000 to view the app.

Project Structure

app/
  layout.tsx      # Shell with sidebar provider
  page.tsx        # Main UI logic
components/
  PromptForm.tsx
  Sidebar.tsx
  contexts/SidebarContext.tsx
  action-summary/
    Summary.tsx
    ExecutionStatus.tsx
    ExecutionSuccess.tsx
    types.ts

Development Notes

• SidebarContext exposes helpers (openSidebar, startNewPrompt, etc.) so any page can trigger the drawer.
• PromptForm is client-side, handles onSubmit, and notifies the layout about loader state.
• Loader alignment is controlled via the optional align="center" prop.

Deployment

Deploy the project with Vercel or your preferred Next.js hosting platform:

npm run build
npm run start

For automated deployments, connect the repository to Vercel.

License

This project is a prototype for Messagemind Bot and is provided as-is for internal exploration.