A comprehensive dashboard application for business users to configure and manage their embeddable chatbot widgets. This dashboard provides an intuitive interface for customizing bot behavior, managing conversations, and analyzing chatbot performance.
This repository contains the dashboard application for users who integrate our embeddable chatbot widget into their websites or applications. Business users can:
- Configure chatbot settings - Customize bot appearance, behavior, and responses
- Manage bot conversations - View and respond to user interactions
- Analyze performance - Track metrics and insights about chatbot usage
- Manage multiple bots - Create and configure multiple chatbot instances
- Set up integrations - Connect chatbots to various services and APIs
- Framework: Next.js 16 with App Router
- ORM: Prisma
- Database: PostgreSQL
- Auth: Custom OTP auth via AWS SES
- Storage: Cloudflare R2 (S3-compatible)
- Styling: Tailwind CSS with shadcn/ui components
- Form Management: React Hook Form with Zod validation
- Language: TypeScript
chat_dashboard/
├── app/ # Next.js App Router directory
│ ├── api/ # API routes (server-side endpoints)
│ ├── auth/ # Authentication pages
│ │ ├── login/
│ │ │ └── page.tsx # Login page
│ │ └── signup/
│ │ └── page.tsx # Signup page
│ ├── dashboard/ # Dashboard pages (to be implemented)
│ │ ├── layout.tsx # Dashboard layout with sidebar/nav
│ │ ├── page.tsx # Dashboard home/overview
│ │ ├── bots/ # Bot management
│ │ │ ├── page.tsx # List all bots
│ │ │ ├── [id]/ # Individual bot pages
│ │ │ │ ├── page.tsx # Bot details/configuration
│ │ │ │ ├── settings/ # Bot settings
│ │ │ │ └── analytics/ # Bot analytics
│ │ │ └── new/ # Create new bot
│ │ ├── conversations/ # Conversation management
│ │ │ ├── page.tsx # List conversations
│ │ │ └── [id]/ # Individual conversation view
│ │ ├── integrations/ # Third-party integrations
│ │ └── settings/ # User/account settings
│ ├── layout.tsx # Root layout
│ ├── page.tsx # Landing/home page
│ └── globals.css # Global styles
│
├── components/ # React components
│ ├── auth/ # Authentication components
│ │ ├── AuthForm.tsx # Login/signup form
│ │ └── ConfirmationDialog.tsx
│ ├── ui/ # Reusable UI components (shadcn/ui)
│ │ ├── button.tsx
│ │ ├── card.tsx
│ │ ├── input.tsx
│ │ └── ...
│ └── dashboard/ # Dashboard-specific components (to be implemented)
│ ├── Sidebar.tsx # Dashboard navigation sidebar
│ ├── BotCard.tsx # Bot display card
│ ├── ConversationList.tsx # List of conversations
│ └── AnalyticsChart.tsx # Analytics visualization
│
├── lib/ # Utility functions and configurations
│ ├── prisma.ts # Prisma client initialization
│ └── utils.ts # General utilities (cn function, etc.)
│
├── public/ # Static assets
│ └── ... # Images, icons, etc.
│
├── .env.local # Environment variables (not committed)
├── next.config.ts # Next.js configuration
├── tailwind.config.ts # Tailwind CSS configuration
├── tsconfig.json # TypeScript configuration
└── package.json # Dependencies and scripts
The dashboard will be organized into the following main sections:
- Welcome screen with quick stats
- Recent activity feed
- Quick actions (create bot, view conversations, etc.)
- List View (
/dashboard/bots) - Grid/list of all configured bots - Bot Details (
/dashboard/bots/[id]) - Individual bot configuration- General settings (name, description, avatar)
- Behavior configuration (responses, triggers)
- Appearance customization (colors, theme)
- Integration settings
- Analytics (
/dashboard/bots/[id]/analytics) - Bot-specific metrics - Create New Bot (
/dashboard/bots/new) - Bot creation wizard
- List all conversations across all bots
- Filter by bot, date, status
- Individual conversation view with chat history
- Ability to respond as bot or escalate to human
- Connect to external services (CRM, email, etc.)
- API key management
- Webhook configuration
- User profile settings
- Account management
- Billing/subscription (if applicable)
- Team management (if multi-user)
- Node.js 18+ and pnpm (or npm/yarn)
- PostgreSQL database
- Clone the repository:
git clone <repository-url>
cd chat_dashboard- Install dependencies:
pnpm install- Set up environment variables:
Create a
.env.localfile in the root directory:
# ------------ client side public env variables prefix with NEXT_PUBLIC_ -------- #
NEXT_PUBLIC_APP_NAME=
NEXT_PUBLIC_APP_URL=
NEXT_PUBLIC_PYTHON_SERVER_URL=
# ------------- server side env variables ------------- #
R2_ACCOUNT_ID=
R2_API_KEY_TOKEN=
APP_URL=
SUPABASE_SERVICE_KEY=
CLOUDFLARE_R2_BASE_URL=
ACCESS_KEY_ID=
SECRET_ACCESS_KEY=
AWS_REGION=
AWS_SES_FROM_EMAIL=
AWS_SES_FROM_NAME=
DATABASE_URL=
AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AUTH_JWT_SECRET=- Run the development server:
pnpm dev- Open localhost:4000 in your browser.
Email OTP authentication. Authentication pages live in app/auth/ and use AuthForm.
The application uses PostgreSQL with Prisma. See prisma/schema.prisma for tables.
- Use functional components with TypeScript
- Client components marked with
"use client"directive - Server components by default (App Router)
- Reusable UI components in
components/ui/ - Feature-specific components in
components/[feature]/