The issue was that router.replace() in ConversationContainer.tsx:75 was causing a page reload when transitioning from /chat/new to /chat/[chatId]. Using window.history.replaceState() instead updates the URL without triggering a page reload.

window.history.replaceState(null, '', /chat/${result.newChatId}); instead of useRouter we used the above.

Bot AI - Next.js Application

This is an AI chatbot application built with Next.js, featuring multiple AI model integrations including Groq, OpenRouter, and Perplexity models.

Features

• Modern chat interface with sidebar navigation
• Multiple AI model support (Groq, OpenRouter, Perplexity)
• Chat history and persistence using localStorage
• Real-time streaming responses
• Dark/Light theme toggle
• Responsive design with Tailwind CSS
• Smooth animations with Framer Motion

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

1. Clone the repository
2. Install dependencies:

npm install

3. Set up environment variables:

Create a .env.local file in the root directory and add your API keys:

OPENROUTER_API_KEY=your_openrouter_api_key_here
GROQ_API_KEY=your_groq_api_key_here
PERPLEXITY_API_KEY=your_perplexity_api_key_here

Note: These API keys are now securely handled on the server side and will not be exposed to the client.

Running the Application

Development Mode

npm run dev

Open http://localhost:3000 to view the application in your browser.

The page will reload when you make changes and you'll see any lint errors in the console.

Production Build

npm run build
npm start

Builds the app for production and starts the production server.

Project Structure

• /src/app - Next.js App Router pages and API routes
• /src/components - React components
  • /chat - Chat UI components
  • /providers - Context providers
• /src/hooks - Custom React hooks
• /src/lib - Shared libraries and utilities
• /src/server/models - Mongoose schemas
• /src/types - TypeScript type declarations
• /public - Public static files

API Keys Setup

To use the AI features, you'll need to obtain API keys from:

• Groq - For Groq models
• OpenRouter - For various AI models
• Perplexity - For Perplexity models

Technologies Used

• Next.js 14
• React 18
• Tailwind CSS
• Framer Motion
• OpenAI SDK
• Groq SDK
• React Markdown
• Lucide React Icons

Learn More

To learn more about Next.js, check out the following resources:

• Next.js Documentation - learn about Next.js features and API
• Learn Next.js - an interactive Next.js tutorial