CHAT AI DEMO

D2D-AI Chat is a sophisticated AI Chat application built with Next.js 16 (App Router) and TypeScript. It provides a robust interface for interacting with AI, featuring:

1. Persistent Chat Sessions Chat history is saved locally using Zustand with persistence, allowing users to resume conversations even after refreshing the page.

2. Project Organization Users can group related chat sessions into "Projects" for better workflow management.

3. Rich UI/UX Built with HeroUI and Tailwind CSS 4, featuring smooth animations from Framer Motion. It includes a Sidebar for navigation, a Topbar with editable titles, and a refined Chat Area.

4. Comprehensive Features Includes message editing (with history truncation), media attachments, user profile management, and a detailed settings panel (Appearance, Notifications, Security).

5. Structured Views Beyond the chat, it includes dedicated views for Documents, Gallery, Projects, and Pricing, along with a full Authentication system (Login/Register)

Main page

The entry point of the application when no chat is active. It features a personalized greeting (e.g., "Good morning, User"), a clean central interface with a prominent chat input, and "Quick Prompts" to help users start a conversation immediately. The Topbar displays "New Chat" by default.

Chat page

Once a conversation starts, the UI shifts to a functional chat thread. It features a scrollable "Chat Area" displaying messages from both the user and AI. The input field becomes "compact" and pinned to the bottom. Users can edit their previous messages, which will truncate the subsequent conversation history to maintain logical flow

Login page

A modern, secure authentication interface. It includes fields for email and password with visibility toggling, a "Forgot password" link, and a prominent gradient "Sign In" button. It also provides a clear path for new users to navigate to the registration page

Pricing page

A transparent pricing dashboard showcasing three tiers: Basic (Free), Pro (Best Value), and Enterprise (Custom). Each card lists specific features with checkmarks. The "Pro" plan is highlighted with a stunning animated gradient border and a "Best Value" badge to drive conversions

New Project management

A dedicated workspace for organizing chat sessions. Users can create new "Projects" via a modal popup, which then appear in a grid view. This section allows users to group related conversations into specific folders, making it easier to manage multiple workflows or topics.

Click here to visit https://d2d-ai-chat-demo.vercel.app/

Technical Stack

1. Framework Next.js 16 (App Router)

2. Language TypeScript

3. Styling Tailwind CSS 4 & HeroUI

4. State Management Zustand (with Persistence)

5. Animations Framer Motion

6. Icons React Icons