AskNova - Modern ChatGPT Clone

A beautiful, responsive ChatGPT-style web application with enhanced visual aesthetics and smooth user experience.

• 🎨 Modern Neumorphism/Dark Mode design with theme toggle
• 💬 Real-time chat interface with typing indicators
• 🤖 OpenAI GPT integration with fallback mock responses
• 📱 Fully responsive design (mobile/tablet/desktop)
• ✨ Smooth animations and micro-interactions
• 🌙 Dark/Light mode toggle
• 📜 Scrollable conversation history with auto-scroll

├── backend/
│   └── index.ts           # Hono API server
├── frontend/
│   ├── index.html         # Main HTML template
│   ├── index.tsx          # React app entry point
│   ├── components/
│   │   ├── App.tsx        # Main app component
│   │   ├── ChatBubble.tsx # Individual message component
│   │   ├── ChatInput.tsx  # Message input component
│   │   └── ThemeToggle.tsx # Dark/light mode toggle
│   └── style.css          # Global styles
├── shared/
│   └── types.ts           # Shared TypeScript types
└── README.md

• GET / - Serves the main application
• POST /api/chat - Handles chat messages and AI responses
• GET /frontend/* - Serves frontend assets
• GET /shared/* - Serves shared utilities

• OPENAI_API_KEY - OpenAI API key (optional, falls back to mock responses)

The application automatically serves on the root path. Simply visit the URL to start chatting with AskNova!

✅ Modern UI/UX Design

• Neumorphism design with dark/light mode toggle
• Glassmorphism effects on chat bubbles and navigation
• Animated gradient background with floating shapes
• Smooth transitions and micro-interactions

✅ Chat Interface

• Real-time message exchange with typing indicators
• Typewriter effect for AI responses
• Auto-scroll to latest messages
• Message timestamps
• Responsive chat bubbles (user right-aligned, AI left-aligned)

✅ AI Integration

• OpenAI GPT-4o-mini integration with fallback mock responses
• Context-aware conversations (sends last 10 messages)
• Intelligent mock responses for demo purposes
• Error handling with graceful fallbacks

✅ Responsive Design

• Mobile-first approach with breakpoints for tablet/desktop
• Touch-friendly interface on mobile devices
• Adaptive layout and typography scaling

✅ Accessibility & UX

• Keyboard navigation support (Enter to send, Shift+Enter for new line)
• Auto-resizing input field
• Loading states and disabled states
• Theme persistence in localStorage
• Semantic HTML and ARIA labels

✅ Performance & Polish

• Smooth animations and transitions
• Optimized bundle with pinned React dependencies
• Error boundary for client-side error catching
• Clean, maintainable code structure